6px

2024-09-25tagcloud.js 实现3d 云标签
我这个布局是准备在中间放一张图片，两边的便签在图片的左右两边区域动。中间图片自己放，每个标签鼠标放上去会放大并停止。效果如下：3d云标签注意：标签样式可以自行修改，tagcloud参数配置中，如果有的标签在区域内边界会被遮住，就通过radius和direction调节即可。完整代码如下
2024-07-29纯CSS实现气泡框效果
目标效果实现<divclass="poptriangle-border">Hello</div>/*气泡框类*/.pop{...}/*气泡尖角伪元素*/.triangle-border:before{content:'';position:absolute;top:10px;/*controlsverticalposition*/bottom:auto;lef
2024-07-15css自定义滚动条
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:6px;height:6px;background-color:#F5F5F5;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,
2024-07-12纯CSS检测滚动
纯CSS实现检测页面滚动位置并展示/*注册自定义属性*/@property--scroll-position{syntax:"<number>";inherits:false;initial-value:0;}/*属性值过渡动画*/@keyframesscroll-variation{to{--scroll-position:1;}}body::a
2024-03-29Email邮箱验证码发送
以下文件保存到/static/email.txt<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>邮箱验证码</title><style>table{
2023-10-11img 固定宽高图像不拉伸显示图片中间部分
.m-sd-chat-select-avatar-img{width:100px;height:125px;object-fit:cover;border-radius:6px;cursor:pointer;} 使用后：使用前：
2023-09-15css做个芒果，哈哈
前几天写border-radius的时候，突然想到了写个芒果color:#0000;width:120px;height:120px;background:#333;/*overflow:hidden;*/border-radius:50%340%127%256%;background:orange;background:#ffcc3a;box-shadow:-3px6px12pxorange,inset3px-6px12p
2023-07-17CSS滚动条样式
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:10px;/*滚动条宽度*/height:16px;/*滚动条高度*/}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radi
2023-03-23Bootstrap 3: 无限级别下拉菜单 Multi level dropdown menu in Bootstrap 3
HTML:<divclass="container"> <divclass="row"><h2>MultileveldropdownmenuinBootstrap3</h2><hr><divclass="dropdown">
2023-02-09CSS 3.0实现卡片悬停立体特效
今天给大家分享一个用CSS3.0实现的卡片悬停立体特效，效果如下：以下是代码实现，欢迎大家制复粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="U
2023-01-29css圆角梯形
.tabs-item{position:relative;width:77px;height:32px;line-height:32px;padding:0;text-align:center;color:#333;&::after{co
2023-01-06css 卡片hover效果
.card{height:430px;width:100%;background:#ffffff;border:1pxsolid#eaeefb;border-radius:5px;box-sizing:border-box;
2022-12-25教你用JavaScript实现搜索展开
欢迎来的我的小院，恭喜你今天又要涨知识了！案例内容利用JavaScript实现搜索框的移动展开。演示学习<!DOCTYPEhtml><htmllang="en"><head><metacharset=
2022-12-02Web入门：JavaScript搜索展开
欢迎来的我的小院，恭喜你今天又要涨知识了！案例内容利用JavaScript实现搜索框的移动展开。演示学习<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF
2022-10-09css如何美化滚动条
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:7px;height:7px;background-color:#f5f5f5;}/*定义滚动条轨道内阴
2022-09-01美丽的 3d 按钮 — 分步指南
美丽的3d按钮—分步指南HTML对于HTML，我们只有一个带有“CLICK”文本的按钮元素。<button>点击</button>CSS现在我们将为按钮设置一些基本样式。首先，我们将通
2022-08-31美丽的 3d 按钮 — 分步指南
美丽的3d按钮—分步指南HTML对于HTML，我们只有一个带有“CLICK”文本的按钮元素。<button>点击</button>CSS现在我们将为按钮设置一些基本样式。首先，我们将通