灵活运用CSS开发技巧（转载）
2024-05-13 18:32:25
何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。
每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。
作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。
本来只是奔着标题去看一下而已，结果发现这里面的内容是真的好用，很多都贴近实际用到的，所以还是自己用自己的方式储存一下，方便后续学习
主要分为以下几个部分
1：Layout Skill：布局技巧
2：Behavior Skill：行为技巧
3：Color Skill：色彩技巧
4：Figure Skill：图形技巧
5：Component Skill：组件技巧
Layout Skill：
使用vw定制rem自适应布局
要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制
场景：rem页面布局（不兼容低版本移动端系统）
兼容：vw、calc()
/*基于UI width=750px DPR=2的页面*/
html{font-size: calc(100vw/7.5);
}
使用：nth-child()选择指定元素
要点：通过:nth-child()筛选置顶的元素设置样式
场景：表格着色、边界元素排版（首元素、尾元素、左右两边元素）
兼容：:nth-child()
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="specified-scope"><li>10001</li><li>10002</li><li>10003</li><li>10004</li><li>10005</li><li>10006</li><li>10007</li><li>10008</li><li>10009</li><li>10010</li></ul>
</div>
/*css部分*/
.specified-scope {width: 300px;li {padding: 0 20px;height: 40px;line-height: 40px;color: #fff;&:nth-child(odd) {background-color: $red;}&:nth-child(even) {background-color: $purple;}&:nth-child(n+6):nth-child(-n+10) {background-color: $green;}}
}
效果：
使用writing-mode排版竖文
要点：通过writing-mode调整文本排版方向
场景：竖行文字、文言文、诗词
兼容：writing-mode
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="vertical-text"><h3>情</h3><p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p></div>
</div>
/*css部分.vertical-text {writing-mode: vertical-rl;h3 {padding-left: 20px;font-weight: bold;font-size: 18px;color: $red;}p {line-height: 30px;color: $purple;}
}*/
效果：
使用text-align-last对齐两端文本
要点：通过text-align-last:justify设置文本两端对齐
场景：未知字数中文对齐
兼容：text-align-last
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="justify-text"><li>账号</li><li>密码</li><li>电子邮件</li><li>通讯地址</li></ul>
</div>
/*css部分*/
.justify-text {li {margin-top: 5px;padding: 0 20px;width: 100px;height: 40px;background-color: $red;line-height: 40px;text-align-last: justify;color: #fff;&:first-child {margin-top: 0;}}
}
效果：
使用:not()去除无用属性
要点：通过:not()排除置顶元素不使用设置样式
场景：符号分割文字、边界元素排版
兼容：:nor()
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="cleared-attr"><li class="first-line"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span></li><li class="second-line"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span></li></ul>
</div>
/*css部分*/
.cleared-attr {li {height: 40px;line-height: 40px;}span {display: inline-block;color: $purple;}.first-line span:not(:last-child)::after {content: ",";}.second-line span:not(:nth-child(-n+3)) {display: none;}
}
效果：
使用object-fit规定图像尺寸
要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸
场景：图片尺寸自适应
兼容：object-fit
例子：
/*html部分*/
<div class="bruce flex-ct-y"><h1>我家乖狗狗：AB</h1><ul class="image-size"><li><h3>Cover</h3><img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="cover"></li><li><h3>Contain</h3><img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="contain"></li><li><h3>Fill</h3><img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="fill"></li><li><h3>ScaleDown</h3><img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="scale-down"></li></ul>
</div>
/*css部分*/
h1 {line-height: 50px;font-weight: bold;font-size: 30px;color: $red;
}
.image-size {display: flex;justify-content: space-between;width: 1000px;height: 300px;li {width: 200px;}h3 {height: 40px;line-height: 40px;text-align: center;font-weight: bold;font-size: 16px;}img {width: 100%;height: 260px;background-color: $green;&.cover {object-fit: cover;}&.contain {object-fit: contain;}&.fill {object-fit: fill;}&.scale-down {object-fit: scale-down;}}
}
效果：
使用overflow-x排版横向列表
要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看
场景：横向滚动列表、元素过多但位置有限的导航栏
兼容：overflow-x
例子：
/*html部分*/
<div class="bruce flex-ct-y"><div class="horizontal-list flex"><ul><li>Alibaba</li><li>Tencent</li><li>Baidu</li><li>Jingdong</li><li>Ant</li><li>Netease</li><li>Meituan</li><li>ByteDance</li><li>360</li><li>Sina</li></ul></div><div class="horizontal-list inline"><ul><li>Alibaba</li><li>Tencent</li><li>Baidu</li><li>Jingdong</li><li>Ant</li><li>Netease</li><li>Meituan</li><li>ByteDance</li><li>360</li><li>Sina</li></ul></div>
</div>
/*css部分*/
.horizontal-list {overflow: hidden;width: 300px;height: 100px;ul {overflow-x: scroll;cursor: pointer;&::-webkit-scrollbar {height: 10px;}&::-webkit-scrollbar-track {background-color: #f0f0f0;}&::-webkit-scrollbar-thumb {border-radius: 5px;background-color: $red;}}li {overflow: hidden;margin-left: 10px;height: 90px;background-color: $purple;line-height: 90px;text-align: center;font-size: 16px;color: #fff;&:first-child {margin-left: 0;}}
}
.flex {ul {display: flex;flex-wrap: nowrap;justify-content: space-between;}li {flex-shrink: 0;flex-basis: 90px;}
}
.inline {margin-top: 10px;height: 102px;ul {overflow-y: hidden;white-space: nowrap;}li {display: inline-block;width: 90px;}
}
效果：
使用text-overflow控制文本溢出
要点：通过text-overflow:ellipsis对溢出的文本在末端添加...
场景：单行文字溢出、多行文字溢出
兼容：text-overflow、line-clamp、box-orient
例子：
/*html部分*/
<div class="bruce flex-ct-y"><p class="single-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p><p class="multiple-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p><p class="multiple-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>
/*css部分*/
p[class*=-line] {line-height: 30px;font-size: 20px;
}
.single-line {width: 200px;
}
.multiple-line {margin-top: 10px;width: 400px;text-align: justify;
}
.sl-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.ml-ellipsis {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */
}
.mls-ellipsis {overflow: hidden;position: relative;max-height: 90px;&::after {position: absolute;right: 0;bottom: 0;padding-left: 40px;background: linear-gradient(to right, transparent, #fff 50%);content: "...";}
}
效果：
使用transform描绘1px边框
要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框
场景：容器1px边框
兼容：transform
例子：
/*html部分*/
<div class="bruce flex-ct-y"><div class="onepx-border normal">1px</div><div class="onepx-border thin">0.5px</div>
</div>
/*css部分*/
.onepx-border {margin-top: 10px;width: 200px;height: 80px;cursor: pointer;line-height: 80px;text-align: center;font-weight: bold;font-size: 50px;color: $red;&:first-child {margin-top: 0;}
}
.normal {border: 1px solid $red;
}
.thin {position: relative;&::after {position: absolute;left: 0;top: 0;border: 1px solid $red;width: 200%;height: 200%;content: "";transform: scale(.5);transform-origin: left top;}
}
效果：
使用transform翻转内容
要点：通过transform:scale3d()对内容进行翻转（水平翻转、垂直翻转、倒序翻转）
场景：内容翻转
兼容：transform
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="horizontal-flip"><li>正常文本</li><li class="x-axis">水平翻转</li><li class="y-axis">垂直翻转</li><li class="reverse">倒序翻转</li></ul>
</div>
/*css部分*/
.horizontal-flip {li {position: relative;margin-top: 10px;width: 121px;height: 51px;line-height: 51px;text-align: center;font-weight: bold;font-size: 30px;color: $red;&::before,&::after {position: absolute;background-color: $purple;content: "";}&:first-child {margin-top: 0;}}
}
.x-axis {transform: scale3d(1, -1, 1);&::after {left: 0;top: 25px;width: 100%;height: 1px;}
}
.y-axis {transform: scale3d(-1, 1, 1);&::after {left: 60px;top: 0;width: 1px;height: 100%;}
}
.reverse {transform: scale3d(-1, -1, 1);&::before {left: 0;top: 25px;width: 100%;height: 1px;}&::after {left: 60px;top: 0;width: 1px;height: 100%;}
}
效果：
使用letter-spacing排版倒序文本
要点：通过letter-spacing设置负值字体间距将文本倒序
场景：文言文、诗词
兼容：letter-spacing
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="reverse-text">恭喜发财</div>
</div>
/*css部分*/
.reverse-text {font-weight: bold;font-size: 50px;color: $red;letter-spacing: -100px; // letter-spacing最少是font-size的2倍
}
效果：
使用margin-left排版左重右轻列表
要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
场景：右侧带图标的导航栏
/*html部分*/
<div class="bruce flex-ct-x"><ul class="left-list"><li>Alibaba</li><li>Tencent</li><li>Baidu</li><li>Jingdong</li><li>Ant</li><li>Netease</li></ul>
</div>
/*css部分*/
.left-list {display: flex;align-items: center;padding: 0 10px;width: 600px;height: 60px;background-color: $green;li {padding: 0 10px;height: 40px;background-color: $orange;line-height: 40px;font-size: 16px;color: #fff;& + li {margin-left: 10px;}&:last-child {margin-left: auto;}}
}
效果：
Behavior Skill
使用overflow-scrolling支持弹性滚动
要点：ios页面非body元素的滚动操作会非常卡（Android不会出现此情况），通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
场景：IOS页面滚动
兼容：IOS自带-webkit-overflow-scrolling
例子：
body {-webkit-overflow-scrolling: touch;
}
.elem {overflow: auto;
}
使用transform启动GPU硬件加速
要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
场景：动画元素（绝对定位、同级中超过6个以上使用动画）
例子：
.elem {transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
使用attr()抓取data-*
要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
场景：提示框
兼容：data-*、attr()
例子：
/*html部分*/
<div class="bruce flex-ct-y"><a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a><a class="tooltips" href="https://www.baidu.com"></a>
</div>
/*css部分*/
.tooltips {position: relative;margin-top: 10px;padding: 0 20px;border-radius: 10px;height: 40px;background-color: $purple;line-height: 40px;color: #fff;&::after {position: absolute;left: 0;top: 0;border-radius: 5px;width: 100%;height: 100%;background-color: rgba(#000, .5);opacity: 0;text-align: center;font-size: 12px;content: attr(data-msg);transition: all 300ms;}&:first-child {margin-top: 0;}&:hover::after {left: calc(100% + 20px);opacity: 1;}&[href]:empty::before {content: attr(href);}&[href]:empty:hover::after {display: none;}
}
效果：
使用:valid和:invalid校验表单
要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容
场景：表单校验
兼容：pattern、:valid、:invalid
例子：
/*html部分*/
<div class="bruce flex-ct-x"><form class="form-validation"><div><label>名字</label><input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required></div><div><label>手机</label><input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required></div><div><label>简介</label><textarea required></textarea></div></form>
</div>
/*css部分*/
.form-validation {width: 500px;div {margin-top: 10px;&:first-child {margin-top: 0;}}label {display: block;padding-bottom: 5px;font-weight: bold;font-size: 16px;}input,textarea {display: block;padding: 0 20px;outline: none;border: 1px solid #ccc;width: 100%;height: 40px;caret-color: $blue;transition: all 300ms;&:valid {border-color: $green;box-shadow: inset 5px 0 0 $green;}&:invalid {border-color: $red;box-shadow: inset 5px 0 0 $red;}}textarea {height: 122px;resize: none;line-height: 30px;font-size: 16px;}
}
效果：
使用pointer-events禁用事件触发
要点：通过pointer-events:none禁用事件触发（默认事件、冒泡事件、鼠标事件、键盘事件等），相当于<button>的disabled
场景：限时点击按钮（发送验证码倒计时）、事件冒泡禁用（多个元素重叠且自带事件、a标签跳转）
兼容：pointer-events
例子：
/*html部分*/
<div class="bruce flex-ct-x"><a class="disabled-trigger" href="https://www.baidu.com">点我</a>
</div>
/*css部分*/
.disabled-trigger {padding: 0 20px;border-radius: 10px;height: 40px;background-color: $purple;pointer-events: none;line-height: 40px;color: #fff;
}
效果：
使用+或~美化选项框
要点：<label>使用+或~配合for绑定radio或checkbox的选择行为
场景：选项框美化、选中项增加选中样式
兼容：+、~
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="beauty-selection"><li><input type="radio" name="radioName" id="fed-engineer" hidden><label for="fed-engineer"></label><span>前端工程师</span></li><li><input type="radio" name="radioName" id="bed-engineer" hidden><label for="bed-engineer"></label><span>后端工程师</span></li><li><input type="radio" name="radioName" id="fsd-engineer" hidden><label for="fsd-engineer"></label><span>全栈工程师</span></li></ul>
</div>
/*css部分*/
.beauty-selection {display: flex;li {display: flex;align-items: center;margin-left: 20px;&:first-child {margin-left: 0;}}input:checked + label {background-color: $orange;}label {margin-right: 5px;padding: 2px;border: 1px solid $orange;border-radius: 100%;width: 18px;height: 18px;background-clip: content-box;cursor: pointer;transition: all 300ms;&:hover {border-color: $blue;background-color: $blue;box-shadow: 0 0 7px $blue;}}span {font-size: 16px;}
}
效果：
使用:focus-within分发冒泡响应
要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within分发冒泡捕获该冒泡事件来设置样式
场景：登录注册弹框、表单校验、离屏导航、导航切换
兼容：:focus-within、:placeholder-shown
例子：
/*html部分*/
<div class="bruce flex-ct-x"><form class="bubble-distribution"><h3>注册</h3><div class="accout"><input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required><img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png"></div><div class="password"><input type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required><img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png"></div><div class="code"><input type="text" placeholder="请输入邀请码(6位数字)" pattern="^[\d]{6}$" maxLength="6" required><button type="button">查询</button><img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png"></div><img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png"><ul><li><input type="radio" name="sex" id="male"><label for="male">Boy</label></li><li><input type="radio" name="sex" id="female"><label for="female">Girl</label></li></ul><button type="button">注册</button></form>
</div>
/*css部分*/
.bruce {background-color: #999;
}
.bubble-distribution {position: relative;margin-top: 50px;padding: 25px;border-radius: 2px;width: 320px;background-color: #fff;h3 {font-weight: bold;font-size: 16px;color: #333;}div {margin-top: 10px;}img {position: absolute;left: 50%;bottom: 100%;margin: 0 0 -20px -60px;width: 120px;}ul {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;height: 30px;line-height: 30px;}li {position: relative;width: 45%;transition: all 300ms;&:focus-within {background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;background-position: 0 0, 0 100%, 0 0, 100% 0;background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;animation: move 500ms infinite linear;}}input[type=text],input[type=password] {padding: 10px;outline: none;border: 1px solid #e9e9e9;border-radius: 2px;width: 100%;height: 40px;transition: all 300ms;&:focus:valid {border-color: $blue;}&:focus:invalid {border-color: $red;}}input[type=radio] {position: absolute;width: 0;height: 0;&:checked + label {border: 3px solid transparent;background-color: $blue;color: #fff;}}label {display: block;border-bottom: 1px solid #ccc;width: 100%;background-clip: padding-box;cursor: pointer;text-align: center;transition: all 300ms;}button {overflow: hidden;margin-top: 10px;outline: none;border: none;border-radius: 2px;width: 100%;height: 40px;background-color: $blue;cursor: pointer;color: #fff;transition: all 300ms;}
}
.accout,
.password,
.code {img {display: none;margin-bottom: -27px;}&:focus-within {img {display: block;}& ~ img {display: none;}}
}
.code {display: flex;justify-content: space-between;button {margin-top: 0;}input {&:not(:placeholder-shown) {width: 70%;& + button {width: 25%;}}&:placeholder-shown {width: 100%;& + button {width: 0;opacity: 0;}}}
}
@keyframes move {to {background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;}
}
效果：
使用:hover描绘鼠标跟随
要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
场景：鼠标跟随轨迹、水波纹、怪圈
兼容：:hover
例子：
/*html部分*/
.bruce.mouse-following- for (var i = 0; i < 500; i++)li
/*css部分*/
@function randomNum($max, $min: 0, $u: 1) {@return ($min + random($max)) * $u;
}.mouse-following {display: flex;overflow: hidden;flex-wrap: wrap;height: 100%;cursor: pointer;li {position: relative;width: 30px;height: 30px;&::before {position: absolute;left: 0;right: 0;top: 0;bottom: 0;border-radius: 100%;background-color: transparent;content: "";transform: scale3d(.1, .1, 1);transition: all 500ms ease-in;}&:hover {&::before {transform: scale3d(1.8, 1.8, 1.8);transition: transform 0s;}}@for $i from 1 through 500 {&:nth-child(#{$i}):hover {&::before {background-color: rgba(randomNum(255), randomNum(255), randomNum(255), .8);}}}}
}
效果：
使用max-height切换自动高度
要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的切换过渡
场景：隐藏式子导航栏、悬浮式折叠面板
兼容：max-height
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="auto-height"><li><h3>列表1</h3><p>内容1<br>内容2<br>内容3<br>内容4</p></li><li><h3>列表2</h3><p>内容1<br>内容2<br>内容3<br>内容4</p></li><li><h3>列表3</h3><p>内容1<br>内容2<br>内容3<br>内容4</p></li></ul>
</div>
/*css部分*/
.auto-height {width: 300px;li {margin-top: 5px;cursor: pointer;&:first-child {margin-top: 0;}&:hover p {border-bottom-width: 1px;max-height: 600px;}}h3 {padding: 0 20px;height: 40px;background-color: $red;cursor: pointer;line-height: 40px;font-size: 16px;color: #fff;}p {overflow: hidden;padding: 0 20px;border: 1px solid $red;border-top: none;border-bottom-width: 0;max-height: 0;line-height: 30px;transition: all 500ms;}
}
使用transform模拟视差滚动
要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果
场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影
兼容：background-attachment、transform
例子：
/*html部分*/
<div class="bruce"><ul class="parallax-scrolling"><li>translateZ(-1px)</li><li>translateZ(-2px)</li><li>translateZ(-3px)</li></ul><p>内容</p><ul class="parallax-scrolling"><li>translateZ(-1px)</li><li>translateZ(-2px)</li><li>translateZ(-3px)</li></ul>
</div>
/*css部分*/
$bg: "https://yangzw.vip/static/codepen/bg.jpg";.bruce {overflow: auto;perspective: 1px;transform-style: preserve-3d;p {height: 300px;line-height: 300px;text-align: center;font-size: 20px;color: $red;}
}
.parallax-scrolling {display: flex;justify-content: center;align-items: center;height: 1000px;background: url($bg) no-repeat center fixed;li {width: 500px;text-align: center;font-weight: bold;font-size: 60px;&:nth-child(1) {color: $red;transform: translateZ(-1px);}&:nth-child(2) {color: $blue;transform: translateZ(-2px);}&:nth-child(3) {color: $green;transform: translateZ(-3px);}}
}
效果：
使用animation-delay保留动画起始帧
要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行
场景：开场动画
兼容：transform、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="initial-keyframe"><li></li><li></li><li></li></ul>
</div>
/*css部分*/
.initial-keyframe {position: relative;width: 100px;height: 100px;li {position: absolute;border-radius: 100%;width: 100%;height: 100%;background-color: $green;transform: rotate(0) translate(-80px, 0);animation: rotate 3s linear infinite;&:nth-child(2) {animation-delay: -1s;}&:nth-child(3) {animation-delay: -2s;}}
}
@keyframes rotate {to {transform: rotate(1turn) translate(-80px, 0);}
}
效果：
使用resize拉伸分栏
要点：通过resize设置横向自由拉伸来调整目标元素的宽度
场景：富文本编辑器、分栏阅读
兼容：resize
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="stretching-column"><div class="left"><div class="resize-bar"></div><div class="resize-line"></div><div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> </div><div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div></div>
</div>
/*css部分*/
.stretching-column {overflow: hidden;border: 1px solid $blue;width: 600px;height: 300px;line-height: 20px;font-size: 16px;color: $orange;.left {overflow: hidden;float: left;position: relative;height: 100%;}.right {overflow: hidden;padding: 10px;height: 100%;background-color: #f0f0f0;word-break: break-all;}
}
.resize-bar {overflow: scroll;width: 200px;height: 100%;opacity: 0;resize: horizontal;&::-webkit-scrollbar {width: 200px;height: 100%;}&:hover,&:active {& ~ .resize-line {border-left: 1px dashed $blue;}}
}
.resize-line {position: absolute;right: 0;top: 0;bottom: 0;border-left: 1px solid #ccc;border-right: 2px solid #f0f0f0;pointer-events: none;
}
.resize-text {overflow-x: hidden;position: absolute;left: 0;right: 5px;top: 0;bottom: 0;padding: 10px;word-break: break-all;
}
效果：
Color Skill
使用color改变边框颜色
要点：border没有定义border-color时，设置color后，border-color会被定义成color
场景：边框颜色与文字颜色相同
兼容：color
例子：
.elem {border: 1px solid;color: #f66;
}
效果：
使用filter开启悼念模式
要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景：网站悼念
兼容：filter
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="mourning-mode"><img src="https://yangzw.vip/static/codepen/car.jpg"></div>
</div>
/*css部分*/
html {filter: grayscale(100%);
}
.mourning-mode {img {width: 400px;}
}
效果：
使用::selection改变文本选择颜色
要点：通过::selection根据主题颜色自定义文本选择颜色
场景：主题化
兼容：::selection
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="select-color"><p>全局选择文字颜色</p><p>全局选择文字颜色</p><p class="special">局部选择文字颜色</p></div>
</div>
/*css部分*/
::selection {background-color: $purple;color: #fff;
}
.select-color {line-height: 50px;font-weight: bold;font-size: 30px;color: $red;
}
.special::selection {background-color: $green;
}
效果：
使用linear-gradient控制背景渐变
要点：通过linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果
背景：主题化、彩虹背景墙
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce"><div class="gradient-bg">iCSS</div>
</div>
/*css部分*/
.gradient-bg {display: flex;justify-content: center;align-items: center;height: 100%;background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;font-weight: bold;font-size: 100px;color: #fff;animation: move 10s infinite;
}
@keyframes move {0%,100% {background-position-x: left;}50% {background-position-x: right;}
}
效果：
使用linear-gradient控制文本渐变
要点：通过linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画
场景：主题化、特色标题
兼容：gradient、background-clip、filter、animation、text-fill-color
例子：
/*html部分*/
<div class="bruce flex-ct-x"><h1 class="gradient-text">Full Stack Developer</h1>
</div>
/*css部分*/
.gradient-text {background-image: linear-gradient(90deg, $red, $orange);background-clip: text;line-height: 60px;font-size: 60px;animation: hue 5s linear infinite;-webkit-text-fill-color: transparent;
}
@keyframes hue {from {filter: hue-rotate(0);}to {filter: hue-rotate(-1turn);}
}
效果：
使用caret-color改变光标颜色
要点：通过caret-color根据主题颜色自定义光标颜色
场景：主题化
兼容：caret-color
例子：
/*html部分*/
<div class="bruce flex-ct-x"><form class="form-validation"><div><label>名字</label><input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required></div><div><label>手机</label><input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required></div><div><label>简介</label><textarea required></textarea></div></form>
</div>
/*css部分*/
.form-validation {width: 500px;div {margin-top: 10px;&:first-child {margin-top: 0;}}label {display: block;padding-bottom: 5px;font-weight: bold;font-size: 16px;}input,textarea {display: block;padding: 0 20px;outline: none;border: 1px solid #ccc;width: 100%;height: 40px;caret-color: $blue;transition: all 300ms;&:valid {border-color: $green;box-shadow: inset 5px 0 0 $green;}&:invalid {border-color: $red;box-shadow: inset 5px 0 0 $red;}}textarea {height: 122px;resize: none;line-height: 30px;font-size: 16px;}
}
效果：
使用:scrollbar改变滚动条样式
要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式
场景：主题化、页面滚动
兼容：:scrollbar
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="scroll-indicator"><div class="article"><article><h1>2019中国互联网企业100强榜单</h1><p>8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。</p><p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p><p>一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。</p><p>二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。</p><p>三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。</p><p>四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。</p><p>五是“独角兽” 企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。</p><p>六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。</p></article></div></div>
</div>
/*css部分*/
.scroll-indicator {position: relative;overflow: hidden;border: 1px solid $purple;width: 500px;height: 300px;&::after {position: absolute;left: 0;right: 5px;top: 2px;bottom: 0;background-color: #fff;content: "";}
}
.article {overflow: auto;height: 100%;&::-webkit-scrollbar {width: 5px;}&::-webkit-scrollbar-track {background-color: #f0f0f0;}&::-webkit-scrollbar-thumb {border-radius: 2px;background-color: $purple;}article {padding: 0 20px;background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;background-size: 100% calc(100% - 298px + 5px);> * {position: relative;z-index: 9;}}h1 {line-height: 40px;text-align: center;font-weight: bold;font-size: 20px;}p {margin-top: 20px;line-height: 20px;text-indent: 2em;}
}
效果：
使用filter模拟Instagram滤镜
要点：通过filter的滤镜组合起来模拟Instagram滤镜
场景：图片滤镜
兼容：filter
例子：（css-gram）
/*html部分*/
<div class="bruce flex-ct-x"><ul class="instagram-filter"><li><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Default</p></li><li class="_1977"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>1977</p></li><li class="aden"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Aden</p></li><li class="brannan"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Brannan</p></li><li class="brooklyn"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Brooklyn</p></li><li class="clarendon"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Clarendon</p></li><li class="earlybird"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Earlybird</p></li><li class="gingham"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Gingham</p></li><li class="hudson"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Hudson</p></li><li class="inkwell"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Inkwell</p></li><li class="kelvin"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Kelvin</p></li><li class="lark"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Lark</p></li><li class="lofi"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>LoFi</p></li><li class="maven"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Maven</p></li><li class="mayfair"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Mayfair</p></li><li class="moon"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Moon</p></li><li class="nashville"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Nashville</p></li><li class="perpetua"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Perpetua</p></li><li class="reyes"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Reyes</p></li><li class="rise"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Rise</p></li><li class="slumber"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Slumber</p></li><li class="stinson"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Stinson</p></li><li class="toaster"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Toaster</p></li><li class="valencia"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Valencia</p></li><li class="walden"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Walden</p></li><li class="willow"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>Willow</p></li><li class="xpro2"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>X-pro II</p></li><li class="obscure"><img src="https://yangzw.vip/static/codepen/gz.jpg"><p>自定义：Obscure</p></li></ul>
</div>
/*css部分*/
.instagram-filter {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;width: 1635px;height: 630px;li {overflow: hidden;position: relative;width: 225px;height: 150px;}img {width: 100%;height: 100%;}p {position: absolute;right: 0;bottom: 0;padding: 0 10px;width: fit-content;height: 30px;background-color: #000;filter: none;line-height: 30px;color: #fff;}
}
.obscure {filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
}
效果：
Figure Skill
使用div描绘各种图形
要点：<div>配合其伪元素（::before、::after）通过clip、transform等方式绘制各种图形
场景：各种图形容器
兼容：clip、transform
例子：https://css-tricks.com/the-shapes-of-css/
使用mask雕刻镂空背景
要点：通过mask未图片背景生成蒙层提供遮罩效果
场景：遮罩动画、蒙层
兼容：mask、perspective、transform-style、animation
例子：
/*html部分*/
<div class="bruce pr flex-ct-x"><div class="mask-layer"></div>
</div>
/*css部分*/
$mask-bg: "https://yangzw.vip/static/codepen/mask-bg.jpg";
$mask-text: "https://yangzw.vip/static/codepen/mask-text.jpg";
$logo: "https://yangzw.vip/static/codepen/logo-netease.svg";.bruce {overflow: hidden;&::after {position: absolute;left: -20px;right: -20px;top: -20px;bottom: -20px;background: url($mask-bg) no-repeat center/cover;filter: blur(10px);content: "";}
}
.mask-layer {position: relative;z-index: 9;width: 600px;height: 300px;background: url($mask-text) left center/150% auto;mask: url($logo) center/cover;animation: move 10s infinite;
}
@keyframes move {0% {background-position-x: 0;}50% {background-position-x: 100%;}
}
效果：
使用linesr-gradient描绘波浪线
要点：通过linear-gradient绘制波浪线
场景：文字强化显示、文字下划线、内容分割线
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><p class="waveline-text">波浪线文字</p>
</div>
/*css部分*/
@mixin waveline($h, $color: $red) {position: relative;&::after {position: absolute;left: 0;top: 100%;width: 100%;height: $h;background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);background-size: $h * 2 $h * 2;content: "";}
}
.waveline-text {height: 20px;line-height: 20px;letter-spacing: 10px;@include waveline(10px);
}
效果：
使用linear-gradient描绘彩带
要点：通过linear-gradient绘制间断颜色的彩带
场景：主题化
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="colour-bar"></div>
</div>
/*css部分*/
.colour-bar {width: 500px;height: 50px;background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
}
效果：
使用conic-gradient描绘饼图
要点：通过conic-gradient绘制多种色彩的饼图
场景：项占比饼图
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="pie-chart"></div>
</div>
/*css部分*/
.pie-chart {border-radius: 100%;width: 300px;height: 300px;background-image: conic-gradient($red 0 25%, $purple 25% 30%, $orange 30% 55%, $blue 55% 70%, $green 70% 100%);
}
效果：
使用linear-gradient描绘方格背景
要点：使用Linear-gradient绘制间断颜色的彩带进行交互生成方格
场景：格子背景、占位图
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="square-bg"></div>
</div>
/*css部分*/
.square-bg {width: 500px;height: 300px;background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-position: 0 0, 20px 20px;background-size: 40px 40px;
}
效果：
使用box-shadow描绘单测投影
要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧
场景：容器投影、长投影、霓虹灯、灯光阴影等
兼容：box-shadow、filter、text-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="aside-shadow">投影</div>
</div>
/*css部分*/
.aside-shadow {display: flex;justify-content: center;align-items: center;border: 1px solid;width: 100px;height: 100px;box-shadow: -7px 0 5px -5px $orange;font-weight: bold;font-size: 30px;color: $orange;
}
效果：
使用filter描绘头像彩色阴影
要点：通过filter:blur() brightness() opacity()模拟阴影效果
场景：头像阴影
兼容：filter
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="avatar-shadow"></div>
</div>
/*css部分*/
$avatar: "https://yangzw.vip/static/codepen/thor.jpg";.avatar-shadow {position: relative;border-radius: 100%;width: 200px;height: 200px;background: url($avatar) no-repeat center/cover;&::after {position: absolute;left: 0;top: 10%;z-index: -1;border-radius: 100%;width: 100%;height: 100%;background: inherit;filter: blur(10px) brightness(80%) opacity(.8);content: "";transform: scale(.95);}
}
效果：
使用box-shadow裁剪图像
要点：通过box-shadow模拟蒙层实现中间镂空
场景：图片裁剪、忻州引导、背景镂空、投射定位
兼容：box-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="img-cliper"><img src="https://yangzw.vip/static/codepen/gz.jpg"><div class="mask"><i></i></div></div>
</div>
/*css部分*/
.img-cliper {overflow: hidden;position: relative;img {width: 400px;}i {position: absolute;left: 50px;top: 30px;border-radius: 100%;width: 100px;height: 50px;box-shadow: 0 0 0 9999px rgba(#000, .5);}.mask {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
}
效果：
使用outline描绘内边框
要点：通过outline设置轮廓进行描边，可设置outline-offset设置内描边
场景：内描边、外描边
兼容：outline
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="outside-border"></div>
</div>
/*css部分*/
.outside-border {outline: 10px dashed $blue;outline-offset: -50px;border: 10px dashed $orange;width: 300px;height: 300px;background-color: $green;
}
效果：
Component Skill
迭代计数器
要点：累加选项单位的计数器
场景：章节目录、选项计数器、加法计算器
兼容：counters
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="iterative-counter"><ul><li><input type="checkbox" id="angular"><label for="angular">Angular</label></li><li><input type="checkbox" id="react"><label for="react">React</label></li><li><input type="checkbox" id="vue"><label for="vue">Vue</label></li></ul><p class="count" data-unit="个">框架：</p><p class="weight" data-unit="%">权重：</p></div>
</div>
/*css部分*/
.iterative-counter {ul {counter-reset: index 0 count 0 weight 0;}li {display: flex;position: relative;align-items: center;margin-top: 10px;counter-increment: index 1;&::before {content: counter(index)"、";}&:first-child {margin-top: 0;}}input {overflow: hidden;position: absolute;width: 0;height: 0;&:checked + label::before {color: $green;content: "\2713";}}label {display: flex;align-items: center;height: 20px;&::before {box-sizing: border-box;margin-right: 5px;border: 1px solid $green;width: 20px;height: 20px;cursor: pointer;line-height: 20px;text-align: center;color: transparent;content: "";transition: all 300ms;}}p {margin-top: 10px;&.count::after {content: counter(count) attr(data-unit);}&.weight::after {content: counter(weight) attr(data-unit);}}
}
#angular:checked {counter-increment: count 1 weight 20;
}
#react:checked {counter-increment: count 1 weight 50;
}
#vue:checked {counter-increment: count 1 weight 30;
}
效果：
下划线跟随导航栏
要点：下划线跟随鼠标移动的导航栏
场景：动态导航栏
兼容：+
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="underline-navbar"><li>Alibaba阿里巴巴</li><li>Tencent腾讯</li><li>Baidu百度</li><li>Jingdong京东</li><li>Ant蚂蚁金服</li><li>Netease网易</li></ul>
</div>
/*css部分*/
.underline-navbar {display: flex;li {position: relative;padding: 10px;cursor: pointer;font-size: 20px;color: $blue;transition: all 300ms;&::before {position: absolute;left: 100%;top: 0;border-bottom: 2px solid transparent;width: 0;height: 100%;content: "";transition: all 300ms;}&:active {background-color: $blue;color: #fff;}&:hover {&::before {left: 0;top: 0;z-index: -1;border-bottom-color: $blue;width: 100%;transition-delay: 100ms;}& + li::before {left: 0;}}}
}
效果：
气泡背景墙
要点：不间断冒出气泡的背景墙
场景：动态背景
兼容：animation
例子：
/*html部分*/
<div class="bruce"><ul class="bubble-bgwall"><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li><li>Love</li></ul>
</div>
/*css部分*/
.bruce {background-image: linear-gradient(270deg, #8146b4, #6990f6);
}
.bubble-bgwall {overflow: hidden;position: relative;margin: 0 auto;width: 1200px;height: 100%;li {display: flex;position: absolute;bottom: -200px;justify-content: center;align-items: center;border-radius: 10px;width: 50px;height: 50px;background-color: rgba(#fff, .15);color: #ccc;animation: bubble 15s infinite;&:nth-child(1) {left: 10%;}&:nth-child(2) {left: 20%;width: 90px;height: 90px;animation-duration: 7s;animation-delay: 2s;}&:nth-child(3) {left: 25%;animation-delay: 4s;}&:nth-child(4) {left: 40%;width: 60px;height: 60px;background-color: rgba(#fff, .3);animation-duration: 8s;}&:nth-child(5) {left: 70%;}&:nth-child(6) {left: 80%;width: 120px;height: 120px;background-color: rgba(#fff, .2);animation-delay: 3s;}&:nth-child(7) {left: 32%;width: 160px;height: 160px;animation-delay: 2s;}&:nth-child(8) {left: 55%;width: 40px;height: 40px;font-size: 12px;animation-duration: 15s;animation-delay: 4s;}&:nth-child(9) {left: 25%;width: 40px;height: 40px;background-color: rgba(#fff, .3);font-size: 12px;animation-duration: 12s;animation-delay: 2s;}&:nth-child(10) {left: 85%;width: 160px;height: 160px;animation-delay: 5s;}}
}
@keyframes bubble {0% {opacity: .5;transform: translateY(0) rotate(45deg);}25% {opacity: .75;transform: translateY(-400px) rotate(90deg);}50% {opacity: 1;transform: translateY(-600px) rotate(135deg);}100% {opacity: 0;transform: translateY(-1000px) rotate(180deg);}
}
效果：
滚动指示器
要点：提示滚动进度的指示器
场景：阅读进度
兼容：calc()、gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="scroll-indicator"><div class="article"><article><h1>2019中国互联网企业100强榜单</h1><p>8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。</p><p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p><p>一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。</p><p>二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。</p><p>三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。</p><p>四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。</p><p>五是“独角兽” 企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。</p><p>六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。</p></article></div></div>
</div>
/*css部分*/
.scroll-indicator {position: relative;overflow: hidden;border: 1px solid $purple;width: 500px;height: 300px;&::after {position: absolute;left: 0;right: 5px;top: 2px;bottom: 0;background-color: #fff;content: "";}
}
.article {overflow: auto;height: 100%;&::-webkit-scrollbar {width: 5px;}&::-webkit-scrollbar-track {background-color: #f0f0f0;}&::-webkit-scrollbar-thumb {border-radius: 2px;background-color: $purple;}article {padding: 0 20px;background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;background-size: 100% calc(100% - 298px + 5px);> * {position: relative;z-index: 9;}}h1 {line-height: 40px;text-align: center;font-weight: bold;font-size: 20px;}p {margin-top: 20px;line-height: 20px;text-indent: 2em;}
}
效果：
故障文本
要点：显示器故障形式的文本
场景：错误提示
兼容：data-*、attr()、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="fault-text" data-text="ERROR">ERROR</div>
</div>
/*css部分*/
.bruce {background-color: #000;
}
.fault-text {position: relative;font-weight: bold;font-size: 100px;color: #fff;&::before,&::after {overflow: hidden;position: absolute;top: 0;background-color: #000;clip: rect(0, 900px, 0, 0);color: #fff;content: attr(data-text);animation: shake 3s linear infinite alternate-reverse;}&::before {left: -2px;text-shadow: 1px 0 $blue;}&::after {left: 2px;text-shadow: -1px 0 $red;animation-duration: 2s;}
}
@keyframes shake {$steps: 20;@for $i from 0 through $steps {#{percentage($i * (1 / $steps))} {clip: rect(random(100) + px, 9999px, random(100) + px, 0);}}
}
效果：
换色器
要点：通过拾色器改变图像色相的换色器
场景：图片色彩变换
兼容：mix-blend-mode
例子：
/*html部分*/
<div class="bruce"><div class="color-changer"><input type="color" value="#ff6666"><img src="https://yangzw.vip/static/codepen/car.jpg"></div>
</div>
/*css部分*/
.color-changer {overflow: hidden;position: relative;height: 100%;input {position: absolute;width: 100%;height: 100%;cursor: pointer;mix-blend-mode: hue;}img {width: 100%;height: 100%;object-fit: cover;}
}
效果：
状态悬浮球
要点：展示当前状态的悬浮球
场景：状态动态显示、波浪动画
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="state-ball warning"><div class="wave"></div></div>
</div>
/*css部分*/
.state-ball {overflow: hidden;position: relative;padding: 5px;border: 3px solid $green;border-radius: 100%;width: 150px;height: 150px;background-color: #fff;&::before,&::after {position: absolute;left: 50%;top: 0;z-index: 20;margin-left: -100px;width: 200px;height: 200px;content: "";}&::before {margin-top: -150px;border-radius: 45%;background-color: rgba(#fff, .5);animation: rotate 10s linear -5s infinite;}&::after {margin-top: -160px;border-radius: 40%;background-color: rgba(#fff, .8);animation: rotate 15s infinite;}&.warning {border-color: $orange;.wave {background-image: linear-gradient(-180deg, #f0c78a 13%, $orange 91%);}}&.danger {border-color: $red;.wave {background-image: linear-gradient(-180deg, #f78989 13%, $red 91%);}}
}
.wave {position: relative;border-radius: 100%;width: 100%;height: 100%;background-image: linear-gradient(-180deg, #af8 13%, $green 91%);
}
@keyframes rotate {from {transform: rotate(0);}to {transform: rotate(1turn);}
}
效果：
粘粘球
要点：香蕉粘粘效果的双球回弹运动
场景：粘粘动画
兼容：filter、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="sticky-ball"><div class="ball-1"></div><div class="ball-2"></div></div>
</div>
/*css部分*/
.bruce {filter: contrast(10);
}
.sticky-ball {position: relative;width: 320px;height: 80px;filter: contrast(10);
}
div[class*=ball-] {position: absolute;top: 0;padding: 10px;border-radius: 100%;width: 80px;height: 80px;background-color: $red;filter: blur(5px);animation: 6s infinite;
}
.ball-1 {left: 0;animation-name: move-1 !important;
}
.ball-2 {left: 240px;animation-name: move-2 !important;
}
@keyframes move-1 {0%,20%,100% {width: 80px;height: 80px;}50% {left: 110px;top: -15px;width: 110px;height: 110px;}85% {left: 75px;width: 90px;height: 70px;}90% {top: -2px;width: 75px;height: 85px;}
}
@keyframes move-2 {0%,20%,100% {width: 80px;height: 80px;}50% {left: 110px;top: -15px;width: 110px;height: 110px;}85% {left: 165px;width: 90px;height: 70px;}90% {top: -2px;width: 75px;height: 85px;}
}
效果：
商城票劵
要点：边缘带孔和中间折痕的票劵
场景：电影票、代金卷、消费卡
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="mall-ticket"><h3>100元</h3><p>网易考拉代金券</p></div>
</div>
/*css部分*/
.mall-ticket {display: flex;position: relative;width: 300px;height: 100px;background: radial-gradient(circle at right top, transparent 10px, $red 0) top left/100px 51% no-repeat,radial-gradient(circle at right bottom, transparent 10px, $red 0) bottom left/100px 51% no-repeat,radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;filter: drop-shadow(2px 2px 2px rgba(#fff, .2));line-height: 100px;text-align: center;color: #fff;&::before {position: absolute;left: 100px;top: 0;bottom: 0;margin: auto;border: 1px dashed $purple;height: 80px;content: "";}&::after {position: absolute;left: 100%;top: 0;width: 5px;height: 100%;background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);background-size: 5px 15px;content: "";}h3 {width: 100px;font-size: 30px;}p {flex: 1;font-weight: bold;font-size: 18px;}
}
效果：
倒影加载条
要点：带有渐变倒影的加载条
场景：加载提示
兼容：box-reflect、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="reflect-loading"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
/*css部分*/
$count: 10;
$color: $purple $blue;.reflect-loading {display: flex;height: 100px;-webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, .7));li {width: 20px;@for $i from 0 to $count {$args: append($color, $i * 100% / ($count - 1));&:nth-child(#{$i + 1}) {background-color: mix($args...);animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;animation-delay: $i * 50ms;}}}
}
@keyframes rotate {0% {transform: rotate(-.5turn) rotateX(-1turn);}75%,100% {transform: none;}
}
效果：
三维立方体
要点：三维建模的立方体
场景：三维建模
兼容：transform、perspective、transform-style、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="td-cube"><ul><li class="front">1</li><li class="back">2</li><li class="top">3</li><li class="bottom">4</li><li class="left">5</li><li class="right">6</li></ul></div>
</div>
/*css部分*/
$width: 150px;
$height: 150px;
$length: 150px;.td-cube {width: $width;height: $height;perspective: 1000px;ul {position: relative;width: 100%;height: 100%;transform: rotateX(-15deg) rotateY(15deg);transform-style: preserve-3d;animation: rotate 5s infinite linear;}li {display: flex;position: absolute;justify-content: center;align-items: center;width: $width;height: $height;opacity: .8;font-size: 50px;color: #fff;}
}
.front {background-color: $red;transform: translateZ($length / 2);
}
.back {background-color: $purple;transform: rotateY(180deg) translateZ($length / 2);
}
.top {background-color: $orange;transform: rotateX(90deg) translateZ($height / 2);
}
.bottom {background-color: $blue;transform: rotateX(-90deg) translateZ($height / 2);
}
.left {background-color: $cyan;transform: rotateY(-90deg) translateZ($width / 2);
}
.right {background-color: $green;transform: rotateY(90deg) translateZ($width / 2);
}
@keyframes rotate {from {transform: rotateY(0) rotateX(0);}to {transform: rotateY(-1turn) rotateX(-1turn);}
}
效果：
动态边框
要点：鼠标悬浮时动态渐变显示的边框
场景：悬浮按钮、边框动画
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="dynamic-border">iCSS</div>
</div>
/*css部分*/
.dynamic-border {width: 200px;height: 80px;background: linear-gradient(0, $red 2px, $red 2px) no-repeat left top/0 2px,linear-gradient(-90deg, $red 2px, $red 2px) no-repeat right top/2px 0,linear-gradient(-180deg, $red 2px, $red 2px) no-repeat right bottom/0 2px,linear-gradient(-270deg, $red 2px, $red 2px) no-repeat left bottom/2px 0;cursor: pointer;line-height: 80px;text-align: center;font-weight: bold;font-size: 50px;color: $red;transition: all 300ms;&:hover {background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;}
}
效果：
标签页
要点：可切换内容的标签页
场景：内容切换
兼容：scroll-behavior
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="tab-page"><nav><h3><input type="radio" name="tab"><label for="tab1">标题1</label></h3><h3><input type="radio" name="tab"><label for="tab2">标题2</label></h3><h3><input type="radio" name="tab"><label for="tab3">标题3</label></h3></nav><ul><li><input id="tab1"><p>内容1</p></li><li><input id="tab2"><p>内容2</p></li><li><input id="tab3"><p>内容3</p></li></ul></div>
</div>
/*css部分*/
.tab-page {width: 300px;nav {display: flex;border: 1px solid $green;height: 40px;line-height: 40px;text-align: center;h3 {position: relative;flex: 1;background-color: $green;color: #fff;& + h3 {border-left: 1px solid #fff;}}input {display: none;}label {display: block;width: 100%;height: 100%;cursor: pointer;}}ul {overflow: hidden;scroll-behavior: smooth;border: 1px solid $green;border-top: none;height: 100px;li {display: flex;position: relative;justify-content: center;align-items: center;height: 100%;font-size: 20px;color: $blue;}input {position: absolute;width: 0;height: 0;opacity: 0;}}
}
效果：
标签导航栏
要点：可切换内容的导航栏
场景：也买你切换
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="tab-navbar"><input type="radio" name="tab" id="tab1" checked><input type="radio" name="tab" id="tab2"><input type="radio" name="tab" id="tab3"><input type="radio" name="tab" id="tab4"><nav><label for="tab1">标题1</label><label for="tab2">标题2</label><label for="tab3">标题3</label><label for="tab4">标题4</label></nav><main><ul><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li></ul></main></div>
</div>
/*css部分*/
.tab-navbar {display: flex;overflow: hidden;flex-direction: column-reverse;border-radius: 10px;width: 300px;height: 400px;input {display: none;&:nth-child(1):checked {& ~ nav label:nth-child(1) {@extend .active;}& ~ main ul {background-color: $red;transform: translate3d(0, 0, 0);}}&:nth-child(2):checked {& ~ nav label:nth-child(2) {@extend .active;}& ~ main ul {background-color: $purple;transform: translate3d(-25%, 0, 0);}}&:nth-child(3):checked {& ~ nav label:nth-child(3) {@extend .active;}& ~ main ul {background-color: $orange;transform: translate3d(-50%, 0, 0);}}&:nth-child(4):checked {& ~ nav label:nth-child(4) {@extend .active;}& ~ main ul {background-color: $blue;transform: translate3d(-75%, 0, 0);}}}nav {display: flex;height: 40px;background-color: #f0f0f0;line-height: 40px;text-align: center;label {flex: 1;cursor: pointer;transition: all 300ms;}}main {flex: 1;ul {display: flex;flex-wrap: nowrap;width: 400%;height: 100%;transition: all 300ms;}li {display: flex;justify-content: center;align-items: center;flex: 1;font-weight: bold;font-size: 20px;color: #fff;}}
}
.active {background-color: $green;color: #fff;
}
效果：
折叠面板
要点：可折叠内容的面板
场景：隐藏式子导航栏
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="accordion"><input type="checkbox" id="collapse1"><input type="checkbox" id="collapse2"><input type="checkbox" id="collapse3"><article><label for="collapse1">列表1</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article><article><label for="collapse2">列表2</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article><article><label for="collapse3">列表3</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article></div>
</div>
/*css部分*/
.accordion {width: 300px;article {margin-top: 5px;cursor: pointer;&:first-child {margin-top: 0;}}input {display: none;&:nth-child(1):checked ~ article:nth-of-type(1) p,&:nth-child(2):checked ~ article:nth-of-type(2) p,&:nth-child(3):checked ~ article:nth-of-type(3) p {border-bottom-width: 1px;max-height: 600px;}}label {display: block;padding: 0 20px;height: 40px;background-color: $red;cursor: pointer;line-height: 40px;font-size: 16px;color: #fff;}p {overflow: hidden;padding: 0 20px;border: 1px solid $red;border-top: none;border-bottom-width: 0;max-height: 0;line-height: 30px;transition: all 500ms;}
}
效果：
星级评分
要点：点击星星进行评分的按钮
场景：评分
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="star-rating"><input type="radio" name="rate"><input type="radio" name="rate"><input type="radio" name="rate"><input type="radio" name="rate"><input type="radio" name="rate"></div>
</div>
/*css部分*/
.star-rating {display: flex;flex-direction: row-reverse;input {width: 30px;height: 30px;appearance: none;cursor: pointer;line-height: 30px;text-align: center;font-size: 30px;transition: all 300ms;&::after {color: $purple;content: "☆";transition: all 300ms;}&:hover {transform: scale(1.2);}&:checked,&:hover {&::after,& ~ input::after {color: $red;content: "★";}}}
}
效果：
加载指示器
要点：变换...长度的加载提示
场景：加载提示
兼容：animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="load-indicator">加载中<dot></dot></div>
</div>
/*css部分*/
.load-indicator {font-size: 16px;color: $blue;dot {display: inline-block;overflow: hidden;height: 1em;line-height: 1;vertical-align: -.25em;&::after {display: block;white-space: pre-wrap;content: "...\A..\A.";animation: loading 3s infinite step-start both;}}
}
@keyframes loading {33% {transform: translate3d(0, -2em, 0);}66% {transform: translate3d(0, -1em, 0);}
}
效果：
自适应相册
要点：自适应照片数量的相册
场景：九宫格相册、微信相册、图集
兼容：:only-child、:first-child、:nth-child()、:nth-lash-child()、~
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="response-album"><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li><li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li></ul>
</div>
/*css部分*/
@mixin square($count: 2) {$length: calc((100% - #{$count} * 10px) / #{$count});width: $length;height: $length;
}
.response-album {display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: flex-start;padding: 5px;border: 1px solid #ccc;border-radius: 5px;width: 400px;height: 400px;li {display: flex;overflow: hidden;justify-content: center;margin: 5px;background-color: #f0f0f0;@include square(3);}img {width: 100%;height: 100%;object-fit: cover;}
}
// 一个元素
.item:only-child {border-radius: 10px;width: auto;max-width: 80%;height: auto;max-height: 80%;
}
// 两个元素
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {@include square(2);
}
.item:first-child:nth-last-child(2) {border-radius: 10px 0 0 10px;
}
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {border-radius: 0 10px 10px 0;
}
// 三个元素
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item:nth-child(2),
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {@include square(2);
}
.item:first-child:nth-last-child(3) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(2) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {border-bottom-left-radius: 10px;
}
// 四个元素
.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item:nth-child(2),
.item:first-child:nth-last-child(4) ~ .item:nth-child(3),
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {@include square(2);
}
.item:first-child:nth-last-child(4) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(2) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(3) {border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {border-bottom-right-radius: 10px;
}
// 五个元素
.item:first-child:nth-last-child(5) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(3) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(4) {border-bottom-left-radius: 10px;
}
// 六个元素
.item:first-child:nth-last-child(6) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(3) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(4) {border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(6) {border-bottom-right-radius: 10px;
}
// 七个元素
.item:first-child:nth-last-child(7) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(3) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(7) {border-bottom-left-radius: 10px;
}
// 八个元素
.item:first-child:nth-last-child(8) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(3) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(7) {border-bottom-left-radius: 10px;
}
// 九个元素
.item:first-child:nth-last-child(9) {border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(3) {border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(7) {border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(9) {border-bottom-right-radius: 10px;
}
效果：
圆角进度条
要点：单一颜色的圆角进度条
场景：进度条
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="fillet-progressbar"></div>
</div>
/*css部分*/
@mixin progress-bar($width: 100px, $height: 10px, $color: $red, $percent: 0) {border-radius: $height / 2;width: $width;height: $height;background-color: #ccc;background-image: radial-gradient(closest-side circle at $percent, $color, $color 100%, transparent),linear-gradient($color, $color);background-repeat: no-repeat;background-size: 100%, $percent;
}
.fillet-progressbar {@include progress-bar(500px, 10px, $purple, 50%);
}
效果：
螺纹进度条
要点：渐变螺纹的进度条
场景：进度条、加载动画
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="thread-progressbar"></div>
</div>
/*css部分*/
.thread-progressbar {position: relative;padding-right: 200px;width: 500px;height: calc(1.4142 * 20px);background: repeating-linear-gradient(45deg, $green, $green 10px, transparent 11px, transparent 19px, $green 20px) 0 0 content-box;animation: twill 1s linear infinite;&::after {position: absolute;width: 100%;height: 100%;background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));content: "";}
}
@keyframes twill {from {background-position-y: 0;}to {background-position-y: calc(-1 * 1.4142 * 40px);}
}
效果：
立体按钮
要点：点击呈现按下状态的按钮
场景：按钮点击
兼容：box-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x"><button class="stereo-btn">iCSS</button>
</div>
/*css部分*/
.stereo-btn {padding: 10px 20px;outline: none;border: none;border-radius: 10px;background-image: linear-gradient($blue, $green);box-shadow: 0 10px 0 $blue;cursor: pointer;text-shadow: 0 5px 5px #ccc;font-size: 50px;color: #fff;transition: all 300ms;&:active {box-shadow: 0 5px 0 $blue;transform: translate3d(0, 5px, 0);}
}
混沌加载圈
要点：带混沌虚影的加载圈
场景：加载提示
兼容：filter、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><ul class="chaos-loading"><li></li><li></li><li></li><li></li></ul>
</div>
/*css部分*/
.chaos-loading {overflow: hidden;position: relative;border-radius: 100%;width: 200px;height: 200px;&::after {display: block;filter: drop-shadow(2px 4px 6px #000);line-height: 200px;text-align: center;font-weight: bold;font-size: 30px;color: #fff;content: "Loading...";}li {position: absolute;left: 0;top: 0;border-radius: 100%;width: 100px;height: 100px;filter: blur(25px);animation: move 2s linear infinite;&:nth-child(1) {background-color: $red;}&:nth-child(2) {background-color: $purple;animation-delay: -500ms;}&:nth-child(3) {background-color: $orange;animation-delay: -1s;}&:nth-child(4) {background-color: $blue;animation-delay: -1.5s;}}
}
@keyframes move {0%,100% {transform: translate3d(0, 0, 0);}25% {transform: translate3d(100%, 0, 0);}50% {transform: translate3d(100%, 100%, 0);}75% {transform: translate3d(0, 100%, 0);}
}
效果：
蛇形边框
要点：蛇形运动的边框
场景：蛇形动画
兼容：clip、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="snakelike-border"></div>
</div>
/*css部分*/
.snakelike-border {position: relative;width: 190px;height: 190px;background-color: $green;&::before,&::after {position: absolute;left: -5px;right: -5px;top: -5px;bottom: -5px;border: 5px solid;content: "";animation: move 5s linear infinite;}&::before {border-color: $red;}&::after {border-color: $purple;animation-delay: -2.5s;}
}
@keyframes move {0%,100% {clip: rect(0 200px 5px 0);}25% {clip: rect(0 200px 200px 195px);}50% {clip: rect(195px 200px 200px 0);}75% {clip: rect(0 5px 200px 0);}
}
效果：
自动打字
要点：逐个字符自动打印出来的文字
场景：代码演示、文字输入动画
兼容：ch、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x"><div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
/*css部分*/
@mixin typing($count: 0, $duration: 0, $delay: 0) {overflow: hidden;border-right: 1px solid transparent;width: #{$count + 1}ch;font-family: Consolas, Monaco, Monospace;white-space: nowrap;animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards, caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
.auto-typing {font-weight: bold;font-size: 30px;color: $blue;@include typing(52, 5);
}
@keyframes typing {from {width: 0;}
}
@keyframes caret {50% {border-right-color: currentColor;}
}
效果：
灵活运用CSS开发技巧（转载）相关推荐
- 灵活运用CSS开发技巧
「链接和长图失效,请大家点击阅读原文查看详情」 前言 何为技巧,意指表现在文学.工艺.体育等方面的巧妙技能.代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步. ...
- css鼠标拖拉卡顿_66个值得收藏的CSS开发技巧
来源:https://mp.weixin.qq.com/s/hEWqQYfrbTrEJ4CIa16DCQ 作者:前端宇宙 何为技巧,意指表现在文学.工艺.体育等方面的巧妙技能.代码作为一门现代高级工艺 ...
- CSS开发技巧实用记（一）
CSS技术之于前端,犹化妆品于女孩,有语云,最是人间留不住,朱颜辞镜花辞树,化妆品之重要性可见一斑.然CSS一些技巧的运用,对于web前端而言,不仅仅是技术,而且是艺术.以下为余于工作之中总结些许CS ...
- 提高你css技能的css开发技巧
好久没整理博客了 进来啰嗦两句 继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 "可打印版本" 相比,print 提供了更 ...
- 【方法篇·壹】css开发技巧-全局样式设置和局部样式
目录 前言: 1.全局样式和局部样式设置 2.提升效率重要方法 3.提升效率重要方法-集中处理UI样式 4.提升效率重要方法-学会复制 5. 提升质量方法-flex.百分比.rem布局 6.解决疑难杂 ...
- 移动端web开发技巧 -- 转载
META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题" ...
- CSS开发技巧（一）：button样式设置
button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...
- CSS实用技巧第一讲：文字处理
前言 作为程序员的我们,书写代码也需要大量的技巧.一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满.因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新.容易理解.舒服自 ...
最新文章
- 【Spring MVC学习】WebApplicationContext初始化的三种方式
- 信息系统项目管理师-成本管理知识点
- cython linux so,更改Cython的.so文件命名规则
- WayOs 聊天软件号码登记器，让找人变得更简单
- Mysql面试常见题
- Java前端技术汇总
- 增值税发票税控开票软件 无法正常启动
- Spring事务传播机制详解
- 20190328-几种数据清洗的方法
- C语言编程三子棋程序代码,C语言实现三子棋源代码
- 为什么 K8s 在阿里能成功(转)
- 考验直播平台搭建水平的十个性能指标
- python 人像素描_Python3.4图片转换素描详解
- 【整理】输入导航功能-查询与拼音首字母的结合以提高用户体验
- MATLAB叠加高斯白噪声
- 安森美为何「上热搜」？汽车业务增量背后的隐忧已经出现
- 魂武者服务器维护,《魂武者》8月16日停机更新公告
- eai java,EAI与SOA
- 精密加工与超精密加工的一些问题整理
- 科研中如何使用SPSS进行数据分析？