你值得收藏的66个实用的css开发技巧之组件技巧
上篇我们介绍了css 开发技巧之图形技巧,接下来我们看看组件技巧,这也是 66 个实用的 css 开发技巧的最后一篇,如果你能学到这里,我真的是很佩服你,不管做什么都要持之以恒,大佬是怎么练成的,就是不断学习不断总结的过程,所以编程的路上我们还需要加油。
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>
SCSS
.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>
SCSS
.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>
SCSS
.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>滚动指示器</h1> <p>内容</p> <p>内容</p> </article> </div> </div> </div>
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; } }
效果展示:
故障文本
要点:显示器故障形式的文本
场景:错误提示
兼容:data-*、attr()、animation
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="fault-text" data-text="ERROR">ERROR</div> </div>
SCSS
.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
实例代码:点击运行
状态悬浮球
要点:展示当前状态的悬浮球
场景:状态动态显示、波浪动画
兼容:gradient、animation
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="state-ball warning"> <div class="wave"></div> </div> </div>
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); } }
效果展示:
粘粘球
要点:相交粘粘效果的双球回弹运动
场景:粘粘动画
兼容: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>
SCSS
.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>
SCSS
.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>
SCSS
$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>
SCSS
$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>
SCSS
.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>
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; } } }
效果展示:
标签导航栏
要点:可切换内容的导航栏
场景:页面切换
兼容:~
实例代码:
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>
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; }
效果展示:
折叠面板
要点:可折叠内容的面板
场景:隐藏式子导航栏
兼容:~
实例代码:
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>
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; } }
效果展示:
星级评分
推荐阅读:《纯 css 代码实现 rate 评分组件》《js 实现星级评分点击效果》
要点:点击星星进行评分的按钮
场景:评分
兼容:~
实例代码:
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>
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: "★"; } } } }
效果展示:
加载指示器
要点:变换…长度的加载提示
场景:加载提示
兼容:animation
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="load-indicator">加载中<dot></dot></div> </div>
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); } }
效果展示:
自适应相册
要点:自适应照片数量的相册
场景:九宫格相册、微信相册、图集
兼容::only-child、:first-child、:nth-child()、:nth-last-child()、~
实例代码:点击运行
圆角进度条
要点:单一颜色的圆角进度条
场景:进度条
兼容:gradient
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="fillet-progressbar"></div> </div>
SCSS
@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>
SCSS
.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); } }
效果展示:
结束语
写到最后总结得差不多了,后续如果我想起还有哪些 CSS 开发技巧遗漏的,会继续在这篇文章上补全,同时也希望各位小伙伴对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
码云笔记 » 你值得收藏的66个实用的css开发技巧之组件技巧