使用:scrollbar改变滚动条样式
- 要点：通过
scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式 - 场景：主题化、页面滚动
- 兼容：:scrollbar
<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> <style lang="scss"> .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; } } </style>
使用filter描绘头像彩色阴影
- 要点：通过
filter:blur() brightness() opacity()模拟阴影效果 - 场景：头像阴影
- 兼容：filter
<div class="bruce flex-ct-x"> <div class="avatar-shadow"></div> </div> <style lang="scss"> $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); } } </style>
使用box-shadow裁剪图像
- 要点：通过
box-shadow模拟蒙层实现中间镂空 - 场景：图片裁剪、新手引导、背景镂空、投射定位
- 兼容：box-shadow
<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>
<style lang="scss">
.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;
}
}
</style>使用outline描绘内边框
- 要点：通过
outline设置轮廓进行描边，可设置outline-offset设置内描边 - 场景：内描边、外描边
- 兼容：outline
<div class="bruce flex-ct-x">
<div class="outside-border"></div>
</div>
<style lang="scss">
.outside-border {
outline: 10px dashed $blue;
outline-offset: -50px;
border: 10px dashed $orange;
width: 300px;
height: 300px;
background-color: $green;
}
</style>滚动指示器
- 要点：提示滚动进度的指示器
- 场景：阅读进度
- 兼容：calc()、gradient
<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> <style lang="scss"> .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; } } </style>
状态悬浮球
- 要点：展示当前状态的悬浮球
- 场景：状态动态显示、波浪动画
- 兼容：gradient、animation
<div class="bruce flex-ct-x"> <div class="state-ball warning"> <div class="wave"></div> </div> </div> <style lang="scss"> .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); } } </style>
标签页
- 要点：可切换内容的标签页
- 场景：内容切换
- 兼容：scroll-behavior
<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>
<style lang="scss">
.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;
}
}
}
</style>
标签导航栏
- 要点：可切换内容的导航栏
- 场景：页面切换
- 兼容：~
-
<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> <style lang="scss"> .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; } </style>
折叠面板
- 要点：可折叠内容的面板
- 场景：隐藏式子导航栏
- 兼容：~
<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> <style lang="scss"> .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; } } </style>
星级评分
- 要点：点击星星进行评分的按钮
- 场景：评分
- 兼容：~
<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> <style lang="scss"> .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: "★"; } } } } </style>
加载指示器
- 要点：变换
...长度的加载提示 - 场景：加载提示
- 兼容：animation
<div class="bruce flex-ct-x"> <div class="load-indicator">加载中<dot></dot></div> </div> <style lang="scss"> .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); } } </style>
自适应相册
- 要点：自适应照片数量的相册
- 场景：九宫格相册、微信相册、图集
- 兼容：:only-child、:first-child、:nth-child()、:nth-last-child()、~
<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> <style lang="scss"> @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; } </style>
圆角进度条
- 要点：单一颜色的圆角进度条
- 场景：进度条
- 兼容：gradient
<div class="bruce flex-ct-x"> <div class="fillet-progressbar"></div> </div> <style> @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%); } </style>
立体按钮
- 要点：点击呈现按下状态的按钮
- 场景：按钮点击
- 兼容：box-shadow
<div class="bruce flex-ct-x"> <button class="stereo-btn">iCSS</button> </div> <style lang="scss"> .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); } } <style>
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
