灵活运用CSS开发技巧(转载)
何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。
每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情
等,这些应该都是我们从小到大写文章而接触到的写作技巧。
作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下三年来自己使用到的一些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="*lyn"> <img src="https://yangzw.vip/static/codepen/gz.jpg"> <p>*lyn</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; } }
效果: