何爲技巧，意指表現在文學、工藝、體育等方面的巧妙技能。代碼作爲一門現代高級工藝，推動着人類科學技術的發展，同時猶如文字一樣承託着人類文化的進步。
每寫好一篇文章，都會使用大量的寫作技巧。烘托、渲染、懸念、鋪墊、照應、伏筆、聯想、想象、抑揚結合、點面結合、動靜結合、敘議結合、情景交融、首尾呼應、襯托對比、白描細描、比喻象徵、借古諷今、卒章顯志、承上啓下、開門見山、動靜相襯、虛實相生、實寫虛寫、託物寓意、詠物抒情等，這些應該都是我們從小到大寫文章而接觸到的寫作技巧。
作爲程序猿的我們，寫代碼同樣也需要大量的寫作技巧。一份良好的代碼能讓人耳目一新，讓人容易理解，讓人舒服自然，同時也讓自己成就感滿滿(哈哈，這個纔是重點)。因此，我整理下三年來自己使用到的一些CSS開發技巧，希望能讓你寫出耳目一新、容易理解、舒服自然的代碼。
本來只是奔着標題去看一下而已，結果發現這裏面的內容是真的好用，很多都貼近實際用到的，所以還是自己用自己的方式儲存一下，方便後續學習
主要分爲以下幾個部分
1：Layout Skill：佈局技巧
2：Behavior Skill：行爲技巧
3：Color Skill：色彩技巧
4：Figure Skill：圖形技巧
5：Component Skill：組件技巧
Layout Skill：
使用vw定製rem自適應佈局
要點：移動端使用rem佈局需要通過JS設置不同屏幕寬高比的font-size,結合vw單位和calc()可脫離JS的控制
場景：rem頁面佈局（不兼容低版本移動端系統）
兼容：vw、calc()
/*基於UI width=750px DPR=2的頁面*/
html{
font-size: calc(100vw/7.5);
}
使用：nth-child()選擇指定元素
要點：通過:nth-child()篩選置頂的元素設置樣式
場景：表格着色、邊界元素排版（首元素、尾元素、左右兩邊元素）
兼容：:nth-child()
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="specified-scope">
<li>10001</li>
<li>10002</li>
<li>10003</li>
<li>10004</li>
<li>10005</li>
<li>10006</li>
<li>10007</li>
<li>10008</li>
<li>10009</li>
<li>10010</li>
</ul>
</div>
/*css部分*/
.specified-scope {
width: 300px;
li {
padding: 0 20px;
height: 40px;
line-height: 40px;
color: #fff;
&:nth-child(odd) {
background-color: $red;
}
&:nth-child(even) {
background-color: $purple;
}
&:nth-child(n+6):nth-child(-n+10) {
background-color: $green;
}
}
}
效果：
使用writing-mode排版豎文
要點：通過writing-mode調整文本排版方向
場景：豎行文字、文言文、詩詞
兼容：writing-mode
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="vertical-text">
<h3>情</h3>
<p>我見猶憐，<br>愛不釋手。<br>雅俗共賞，<br>君子好逑。</p>
</div>
</div>
/*css部分.vertical-text {
writing-mode: vertical-rl;
h3 {
padding-left: 20px;
font-weight: bold;
font-size: 18px;
color: $red;
}
p {
line-height: 30px;
color: $purple;
}
}*/
效果：
使用text-align-last對齊兩端文本
要點：通過text-align-last:justify設置文本兩端對齊
場景：未知字數中文對齊
兼容：text-align-last
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="justify-text">
<li>賬號</li>
<li>密碼</li>
<li>電子郵件</li>
<li>通訊地址</li>
</ul>
</div>
/*css部分*/
.justify-text {
li {
margin-top: 5px;
padding: 0 20px;
width: 100px;
height: 40px;
background-color: $red;
line-height: 40px;
text-align-last: justify;
color: #fff;
&:first-child {
margin-top: 0;
}
}
}
效果：
使用:not()去除無用屬性
要點：通過:not()排除置頂元素不使用設置樣式
場景：符號分割文字、邊界元素排版
兼容：:nor()
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="cleared-attr">
<li class="first-line">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</li>
<li class="second-line">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</li>
</ul>
</div>
/*css部分*/
.cleared-attr {
li {
height: 40px;
line-height: 40px;
}
span {
display: inline-block;
color: $purple;
}
.first-line span:not(:last-child)::after {
content: ",";
}
.second-line span:not(:nth-child(-n+3)) {
display: none;
}
}
效果：
使用object-fit規定圖像尺寸
要點：通過object-fit使圖像脫離background-size的約束，使用<img>來標記圖像背景尺寸
場景：圖片尺寸自適應
兼容：object-fit
例子：
/*html部分*/
<div class="bruce flex-ct-y">
<h1>我家乖狗狗：AB</h1>
<ul class="image-size">
<li>
<h3>Cover</h3>
<img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="cover">
</li>
<li>
<h3>Contain</h3>
<img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="contain">
</li>
<li>
<h3>Fill</h3>
<img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="fill">
</li>
<li>
<h3>ScaleDown</h3>
<img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="scale-down">
</li>
</ul>
</div>
/*css部分*/
h1 {
line-height: 50px;
font-weight: bold;
font-size: 30px;
color: $red;
}
.image-size {
display: flex;
justify-content: space-between;
width: 1000px;
height: 300px;
li {
width: 200px;
}
h3 {
height: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 16px;
}
img {
width: 100%;
height: 260px;
background-color: $green;
&.cover {
object-fit: cover;
}
&.contain {
object-fit: contain;
}
&.fill {
object-fit: fill;
}
&.scale-down {
object-fit: scale-down;
}
}
}
效果：
使用overflow-x排版橫向列表
要點：通過flexbox或inline-block的形式橫向排列元素，對父元素設置overflow-x:auto橫向滾動查看
場景：橫向滾動列表、元素過多但位置有限的導航欄
兼容：overflow-x
例子：
/*html部分*/
<div class="bruce flex-ct-y">
<div class="horizontal-list flex">
<ul>
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
<li>Meituan</li>
<li>ByteDance</li>
<li>360</li>
<li>Sina</li>
</ul>
</div>
<div class="horizontal-list inline">
<ul>
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
<li>Meituan</li>
<li>ByteDance</li>
<li>360</li>
<li>Sina</li>
</ul>
</div>
</div>
/*css部分*/
.horizontal-list {
overflow: hidden;
width: 300px;
height: 100px;
ul {
overflow-x: scroll;
cursor: pointer;
&::-webkit-scrollbar {
height: 10px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: $red;
}
}
li {
overflow: hidden;
margin-left: 10px;
height: 90px;
background-color: $purple;
line-height: 90px;
text-align: center;
font-size: 16px;
color: #fff;
&:first-child {
margin-left: 0;
}
}
}
.flex {
ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
li {
flex-shrink: 0;
flex-basis: 90px;
}
}
.inline {
margin-top: 10px;
height: 102px;
ul {
overflow-y: hidden;
white-space: nowrap;
}
li {
display: inline-block;
width: 90px;
}
}
效果：
使用text-overflow控制文本溢出
要點：通過text-overflow:ellipsis對溢出的文本在末端添加...
場景：單行文字溢出、多行文字溢出
兼容：text-overflow、line-clamp、box-orient
例子：
/*html部分*/
<div class="bruce flex-ct-y">
<p class="single-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>
<p class="multiple-line ml-ellipsis">層疊樣式表(CSS)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p>
<p class="multiple-line mls-ellipsis">層疊樣式表(CSS)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p>
</div>
/*css部分*/
p[class*=-line] {
line-height: 30px;
font-size: 20px;
}
.single-line {
width: 200px;
}
.multiple-line {
margin-top: 10px;
width: 400px;
text-align: justify;
}
.sl-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ml-ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
.mls-ellipsis {
overflow: hidden;
position: relative;
max-height: 90px;
&::after {
position: absolute;
right: 0;
bottom: 0;
padding-left: 40px;
background: linear-gradient(to right, transparent, #fff 50%);
content: "...";
}
}
效果：
使用transform描繪1px邊框
要點：分辨率比較低的屏幕下顯示1px的邊框會顯得模糊，通過::before或::after和transform模擬細膩的1px邊框
場景：容器1px邊框
兼容：transform
例子：
/*html部分*/
<div class="bruce flex-ct-y">
<div class="onepx-border normal">1px</div>
<div class="onepx-border thin">0.5px</div>
</div>
/*css部分*/
.onepx-border {
margin-top: 10px;
width: 200px;
height: 80px;
cursor: pointer;
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 50px;
color: $red;
&:first-child {
margin-top: 0;
}
}
.normal {
border: 1px solid $red;
}
.thin {
position: relative;
&::after {
position: absolute;
left: 0;
top: 0;
border: 1px solid $red;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;
}
}
效果：
使用transform翻轉內容
要點：通過transform:scale3d()對內容進行翻轉（水平翻轉、垂直翻轉、倒序翻轉）
場景：內容翻轉
兼容：transform
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="horizontal-flip">
<li>正常文本</li>
<li class="x-axis">水平翻轉</li>
<li class="y-axis">垂直翻轉</li>
<li class="reverse">倒序翻轉</li>
</ul>
</div>
/*css部分*/
.horizontal-flip {
li {
position: relative;
margin-top: 10px;
width: 121px;
height: 51px;
line-height: 51px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: $red;
&::before,
&::after {
position: absolute;
background-color: $purple;
content: "";
}
&:first-child {
margin-top: 0;
}
}
}
.x-axis {
transform: scale3d(1, -1, 1);
&::after {
left: 0;
top: 25px;
width: 100%;
height: 1px;
}
}
.y-axis {
transform: scale3d(-1, 1, 1);
&::after {
left: 60px;
top: 0;
width: 1px;
height: 100%;
}
}
.reverse {
transform: scale3d(-1, -1, 1);
&::before {
left: 0;
top: 25px;
width: 100%;
height: 1px;
}
&::after {
left: 60px;
top: 0;
width: 1px;
height: 100%;
}
}
效果：
使用letter-spacing排版倒序文本
要點：通過letter-spacing設置負值字體間距將文本倒序
場景：文言文、詩詞
兼容：letter-spacing
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="reverse-text">恭喜發財</div>
</div>
/*css部分*/
.reverse-text {
font-weight: bold;
font-size: 50px;
color: $red;
letter-spacing: -100px; // letter-spacing最少是font-size的2倍
}
效果：
使用margin-left排版左重右輕列表
要點：使用flexbox橫向佈局時，最後一個元素通過margin-left:auto實現向右對齊
場景：右側帶圖標的導航欄
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="left-list">
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
</ul>
</div>
/*css部分*/
.left-list {
display: flex;
align-items: center;
padding: 0 10px;
width: 600px;
height: 60px;
background-color: $green;
li {
padding: 0 10px;
height: 40px;
background-color: $orange;
line-height: 40px;
font-size: 16px;
color: #fff;
& + li {
margin-left: 10px;
}
&:last-child {
margin-left: auto;
}
}
}
效果：
Behavior Skill
使用overflow-scrolling支持彈性滾動
要點：ios頁面非body元素的滾動操作會非常卡（Android不會出現此情況），通過overflow-scrolling:touch調用Safari原生滾動來支持彈性滾動，增加頁面滾動的流暢度
場景：IOS頁面滾動
兼容：IOS自帶-webkit-overflow-scrolling
例子：
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
使用transform啓動GPU硬件加速
要點：有時執行動畫可能會導致頁面卡頓，可在特定元素中使用硬件加速來避免這個問題
場景：動畫元素（絕對定位、同級中超過6個以上使用動畫）
例子：
.elem {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
使用attr()抓取data-*
要點：在標籤上自定義屬性data-*，通過attr()獲取其內容賦值到content上
場景：提示框
兼容：data-*、attr()
例子：
/*html部分*/
<div class="bruce flex-ct-y">
<a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
<a class="tooltips" href="https://www.baidu.com"></a>
</div>
/*css部分*/
.tooltips {
position: relative;
margin-top: 10px;
padding: 0 20px;
border-radius: 10px;
height: 40px;
background-color: $purple;
line-height: 40px;
color: #fff;
&::after {
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
width: 100%;
height: 100%;
background-color: rgba(#000, .5);
opacity: 0;
text-align: center;
font-size: 12px;
content: attr(data-msg);
transition: all 300ms;
}
&:first-child {
margin-top: 0;
}
&:hover::after {
left: calc(100% + 20px);
opacity: 1;
}
&[href]:empty::before {
content: attr(href);
}
&[href]:empty:hover::after {
display: none;
}
}
效果：
使用:valid和:invalid校驗表單
要點：<input>使用僞類:valid和:invalid配合pattern校驗表單輸入的內容
場景：表單校驗
兼容：pattern、:valid、:invalid
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<form class="form-validation">
<div>
<label>名字</label>
<input type="text" placeholder="請輸入你的名字(1到10箇中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
</div>
<div>
<label>手機</label>
<input type="text" placeholder="請輸入你的手機" pattern="^1[3456789]\d{9}$" required>
</div>
<div>
<label>簡介</label>
<textarea required></textarea>
</div>
</form>
</div>
/*css部分*/
.form-validation {
width: 500px;
div {
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
label {
display: block;
padding-bottom: 5px;
font-weight: bold;
font-size: 16px;
}
input,
textarea {
display: block;
padding: 0 20px;
outline: none;
border: 1px solid #ccc;
width: 100%;
height: 40px;
caret-color: $blue;
transition: all 300ms;
&:valid {
border-color: $green;
box-shadow: inset 5px 0 0 $green;
}
&:invalid {
border-color: $red;
box-shadow: inset 5px 0 0 $red;
}
}
textarea {
height: 122px;
resize: none;
line-height: 30px;
font-size: 16px;
}
}
效果：
使用pointer-events禁用事件觸發
要點：通過pointer-events:none禁用事件觸發（默認事件、冒泡事件、鼠標事件、鍵盤事件等），相當於<button>的disabled
場景：限時點擊按鈕（發送驗證碼倒計時）、事件冒泡禁用（多個元素重疊且自帶事件、a標籤跳轉）
兼容：pointer-events
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<a class="disabled-trigger" href="https://www.baidu.com">點我</a>
</div>
/*css部分*/
.disabled-trigger {
padding: 0 20px;
border-radius: 10px;
height: 40px;
background-color: $purple;
pointer-events: none;
line-height: 40px;
color: #fff;
}
效果：
使用+或~美化選項框
要點：<label>使用+或~配合for綁定radio或checkbox的選擇行爲
場景：選項框美化、選中項增加選中樣式
兼容：+、~
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="beauty-selection">
<li>
<input type="radio" name="radioName" id="fed-engineer" hidden>
<label for="fed-engineer"></label>
<span>前端工程師</span>
</li>
<li>
<input type="radio" name="radioName" id="bed-engineer" hidden>
<label for="bed-engineer"></label>
<span>後端工程師</span>
</li>
<li>
<input type="radio" name="radioName" id="fsd-engineer" hidden>
<label for="fsd-engineer"></label>
<span>全棧工程師</span>
</li>
</ul>
</div>
/*css部分*/
.beauty-selection {
display: flex;
li {
display: flex;
align-items: center;
margin-left: 20px;
&:first-child {
margin-left: 0;
}
}
input:checked + label {
background-color: $orange;
}
label {
margin-right: 5px;
padding: 2px;
border: 1px solid $orange;
border-radius: 100%;
width: 18px;
height: 18px;
background-clip: content-box;
cursor: pointer;
transition: all 300ms;
&:hover {
border-color: $blue;
background-color: $blue;
box-shadow: 0 0 7px $blue;
}
}
span {
font-size: 16px;
}
}
效果：
使用:focus-within分發冒泡響應
要點：表單控件觸發focus和blur事件後往父元素進行冒泡，在父元素上通過:focus-within分發冒泡捕獲該冒泡事件來設置樣式
場景：登錄註冊彈框、表單校驗、離屏導航、導航切換
兼容：:focus-within、:placeholder-shown
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<form class="bubble-distribution">
<h3>註冊</h3>
<div class="accout">
<input type="text" placeholder="請輸入手機或郵箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
<img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
</div>
<div class="password">
<input type="password" placeholder="請輸入密碼(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
<img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png">
</div>
<div class="code">
<input type="text" placeholder="請輸入邀請碼(6位數字)" pattern="^[\d]{6}$" maxLength="6" required>
<button type="button">查詢</button>
<img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
</div>
<img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png">
<ul>
<li>
<input type="radio" name="sex" id="male">
<label for="male">Boy</label>
</li>
<li>
<input type="radio" name="sex" id="female">
<label for="female">Girl</label>
</li>
</ul>
<button type="button">註冊</button>
</form>
</div>
/*css部分*/
.bruce {
background-color: #999;
}
.bubble-distribution {
position: relative;
margin-top: 50px;
padding: 25px;
border-radius: 2px;
width: 320px;
background-color: #fff;
h3 {
font-weight: bold;
font-size: 16px;
color: #333;
}
div {
margin-top: 10px;
}
img {
position: absolute;
left: 50%;
bottom: 100%;
margin: 0 0 -20px -60px;
width: 120px;
}
ul {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
height: 30px;
line-height: 30px;
}
li {
position: relative;
width: 45%;
transition: all 300ms;
&:focus-within {
background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,
linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
animation: move 500ms infinite linear;
}
}
input[type=text],
input[type=password] {
padding: 10px;
outline: none;
border: 1px solid #e9e9e9;
border-radius: 2px;
width: 100%;
height: 40px;
transition: all 300ms;
&:focus:valid {
border-color: $blue;
}
&:focus:invalid {
border-color: $red;
}
}
input[type=radio] {
position: absolute;
width: 0;
height: 0;
&:checked + label {
border: 3px solid transparent;
background-color: $blue;
color: #fff;
}
}
label {
display: block;
border-bottom: 1px solid #ccc;
width: 100%;
background-clip: padding-box;
cursor: pointer;
text-align: center;
transition: all 300ms;
}
button {
overflow: hidden;
margin-top: 10px;
outline: none;
border: none;
border-radius: 2px;
width: 100%;
height: 40px;
background-color: $blue;
cursor: pointer;
color: #fff;
transition: all 300ms;
}
}
.accout,
.password,
.code {
img {
display: none;
margin-bottom: -27px;
}
&:focus-within {
img {
display: block;
}
& ~ img {
display: none;
}
}
}
.code {
display: flex;
justify-content: space-between;
button {
margin-top: 0;
}
input {
&:not(:placeholder-shown) {
width: 70%;
& + button {
width: 25%;
}
}
&:placeholder-shown {
width: 100%;
& + button {
width: 0;
opacity: 0;
}
}
}
}
@keyframes move {
to {
background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
}
}
效果：
使用:hover描繪鼠標跟隨
要點：將整個頁面等比劃分成小的單元格，每個單元格監聽:hover，通過:hover觸發單元格的樣式變化來描繪鼠標運動軌跡
場景：鼠標跟隨軌跡、水波紋、怪圈
兼容：:hover
例子：
/*html部分*/
.bruce
.mouse-following
- for (var i = 0; i < 500; i++)
li
/*css部分*/
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
.mouse-following {
display: flex;
overflow: hidden;
flex-wrap: wrap;
height: 100%;
cursor: pointer;
li {
position: relative;
width: 30px;
height: 30px;
&::before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 100%;
background-color: transparent;
content: "";
transform: scale3d(.1, .1, 1);
transition: all 500ms ease-in;
}
&:hover {
&::before {
transform: scale3d(1.8, 1.8, 1.8);
transition: transform 0s;
}
}
@for $i from 1 through 500 {
&:nth-child(#{$i}):hover {
&::before {
background-color: rgba(randomNum(255), randomNum(255), randomNum(255), .8);
}
}
}
}
}
效果：
使用max-height切換自動高度
要點：通過max-height定義收起的最小高度和展開的最大高度，設置兩者間的切換過渡
場景：隱藏式子導航欄、懸浮式摺疊面板
兼容：max-height
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="auto-height">
<li>
<h3>列表1</h3>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</li>
<li>
<h3>列表2</h3>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</li>
<li>
<h3>列表3</h3>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</li>
</ul>
</div>
/*css部分*/
.auto-height {
width: 300px;
li {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
&:hover p {
border-bottom-width: 1px;
max-height: 600px;
}
}
h3 {
padding: 0 20px;
height: 40px;
background-color: $red;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
border: 1px solid $red;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
使用transform模擬視差滾動
要點：通過background-attachment:fixed或transform讓多層背景以不同的速度移動，形成立體的運動效果
場景：頁面滾動、視差滾動文字陰影、視差滾動文字虛影
兼容：background-attachment、transform
例子：
/*html部分*/
<div class="bruce">
<ul class="parallax-scrolling">
<li>translateZ(-1px)</li>
<li>translateZ(-2px)</li>
<li>translateZ(-3px)</li>
</ul>
<p>內容</p>
<ul class="parallax-scrolling">
<li>translateZ(-1px)</li>
<li>translateZ(-2px)</li>
<li>translateZ(-3px)</li>
</ul>
</div>
/*css部分*/
$bg: "https://yangzw.vip/static/codepen/bg.jpg";
.bruce {
overflow: auto;
perspective: 1px;
transform-style: preserve-3d;
p {
height: 300px;
line-height: 300px;
text-align: center;
font-size: 20px;
color: $red;
}
}
.parallax-scrolling {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
background: url($bg) no-repeat center fixed;
li {
width: 500px;
text-align: center;
font-weight: bold;
font-size: 60px;
&:nth-child(1) {
color: $red;
transform: translateZ(-1px);
}
&:nth-child(2) {
color: $blue;
transform: translateZ(-2px);
}
&:nth-child(3) {
color: $green;
transform: translateZ(-3px);
}
}
}
效果：
使用animation-delay保留動畫起始幀
要點：通過transform-delay或animation-delay設置負值時延保留動畫起始幀，讓動畫進入頁面不用等待即可運行
場景：開場動畫
兼容：transform、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="initial-keyframe">
<li></li>
<li></li>
<li></li>
</ul>
</div>
/*css部分*/
.initial-keyframe {
position: relative;
width: 100px;
height: 100px;
li {
position: absolute;
border-radius: 100%;
width: 100%;
height: 100%;
background-color: $green;
transform: rotate(0) translate(-80px, 0);
animation: rotate 3s linear infinite;
&:nth-child(2) {
animation-delay: -1s;
}
&:nth-child(3) {
animation-delay: -2s;
}
}
}
@keyframes rotate {
to {
transform: rotate(1turn) translate(-80px, 0);
}
}
效果：
使用resize拉伸分欄
要點：通過resize設置橫向自由拉伸來調整目標元素的寬度
場景：富文本編輯器、分欄閱讀
兼容：resize
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="stretching-column">
<div class="left">
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
<div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</div>
/*css部分*/
.stretching-column {
overflow: hidden;
border: 1px solid $blue;
width: 600px;
height: 300px;
line-height: 20px;
font-size: 16px;
color: $orange;
.left {
overflow: hidden;
float: left;
position: relative;
height: 100%;
}
.right {
overflow: hidden;
padding: 10px;
height: 100%;
background-color: #f0f0f0;
word-break: break-all;
}
}
.resize-bar {
overflow: scroll;
width: 200px;
height: 100%;
opacity: 0;
resize: horizontal;
&::-webkit-scrollbar {
width: 200px;
height: 100%;
}
&:hover,
&:active {
& ~ .resize-line {
border-left: 1px dashed $blue;
}
}
}
.resize-line {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-left: 1px solid #ccc;
border-right: 2px solid #f0f0f0;
pointer-events: none;
}
.resize-text {
overflow-x: hidden;
position: absolute;
left: 0;
right: 5px;
top: 0;
bottom: 0;
padding: 10px;
word-break: break-all;
}
效果：
Color Skill
使用color改變邊框顏色
要點：border沒有定義border-color時，設置color後，border-color會被定義成color
場景：邊框顏色與文字顏色相同
兼容：color
例子：
.elem {
border: 1px solid;
color: #f66;
}
效果：
使用filter開啓悼念模式
要點：通過filter:grayscale()設置灰度模式來悼念某位去世的仁兄或悼念因災難而去世的人們
場景：網站悼念
兼容：filter
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="mourning-mode">
<img src="https://yangzw.vip/static/codepen/car.jpg">
</div>
</div>
/*css部分*/
html {
filter: grayscale(100%);
}
.mourning-mode {
img {
width: 400px;
}
}
效果：
使用::selection改變文本選擇顏色
要點：通過::selection根據主題顏色自定義文本選擇顏色
場景：主題化
兼容：::selection
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="select-color">
<p>全局選擇文字顏色</p>
<p>全局選擇文字顏色</p>
<p class="special">局部選擇文字顏色</p>
</div>
</div>
/*css部分*/
::selection {
background-color: $purple;
color: #fff;
}
.select-color {
line-height: 50px;
font-weight: bold;
font-size: 30px;
color: $red;
}
.special::selection {
background-color: $green;
}
效果：
使用linear-gradient控制背景漸變
要點：通過linear-gradient設置背景漸變色並放大背景尺寸，添加背景移動效果
背景：主題化、彩虹背景牆
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce">
<div class="gradient-bg">iCSS</div>
</div>
/*css部分*/
.gradient-bg {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;
font-weight: bold;
font-size: 100px;
color: #fff;
animation: move 10s infinite;
}
@keyframes move {
0%,
100% {
background-position-x: left;
}
50% {
background-position-x: right;
}
}
效果：
使用linear-gradient控制文本漸變
要點：通過linear-gradient設置背景漸變色，配合background-clip:text對背景進行文本裁剪，添加濾鏡動畫
場景：主題化、特色標題
兼容：gradient、background-clip、filter、animation、text-fill-color
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<h1 class="gradient-text">Full Stack Developer</h1>
</div>
/*css部分*/
.gradient-text {
background-image: linear-gradient(90deg, $red, $orange);
background-clip: text;
line-height: 60px;
font-size: 60px;
animation: hue 5s linear infinite;
-webkit-text-fill-color: transparent;
}
@keyframes hue {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(-1turn);
}
}
效果：
使用caret-color改變光標顏色
要點：通過caret-color根據主題顏色自定義光標顏色
場景：主題化
兼容：caret-color
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<form class="form-validation">
<div>
<label>名字</label>
<input type="text" placeholder="請輸入你的名字(1到10箇中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
</div>
<div>
<label>手機</label>
<input type="text" placeholder="請輸入你的手機" pattern="^1[3456789]\d{9}$" required>
</div>
<div>
<label>簡介</label>
<textarea required></textarea>
</div>
</form>
</div>
/*css部分*/
.form-validation {
width: 500px;
div {
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
label {
display: block;
padding-bottom: 5px;
font-weight: bold;
font-size: 16px;
}
input,
textarea {
display: block;
padding: 0 20px;
outline: none;
border: 1px solid #ccc;
width: 100%;
height: 40px;
caret-color: $blue;
transition: all 300ms;
&:valid {
border-color: $green;
box-shadow: inset 5px 0 0 $green;
}
&:invalid {
border-color: $red;
box-shadow: inset 5px 0 0 $red;
}
}
textarea {
height: 122px;
resize: none;
line-height: 30px;
font-size: 16px;
}
}
效果：
使用:scrollbar改變滾動條樣式
要點：通過scrollbar的scrollbar-track和scrollbar-thumb等屬性來自定義滾動條樣式
場景：主題化、頁面滾動
兼容：:scrollbar
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="scroll-indicator">
<div class="article">
<article>
<h1>2019中國互聯網企業100強榜單</h1>
<p>8月14日，中國互聯網協會、工業和信息化部網絡安全產業發展中心（工業和信息化部信息中心）在2019年中國互聯網企業100強發佈會暨百強企業高峯論壇上聯合發佈了2019年中國互聯網企業100強榜單、互聯網成長型企業20強榜單和《2019年中國互聯網企業100強發展報告》。阿里巴巴（中國）有限公司、深圳市騰訊計算機系統有限責任公司、百度公司、京東集團、浙江螞蟻小微金融服務集團股份有限公司、網易集團、美團點評、北京字節跳動科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜單前十名。</p>
<p>今年互聯網百強企業聚焦創新引領、產業融合、工業互聯網等方面，主要呈現出六大特點：</p>
<p>一是整體規模跨越式提升，成爲數字經濟新引擎。2019年互聯網百強企業互聯網業務收入高達2.75萬億元，比2018年互聯網百強企業互聯網業務收入增長超過1萬億元，佔我國數字經濟的比重達8.8%，對數字經濟的貢獻率達14%，帶動數字經濟增長近2個百分點成爲帶動我國互聯網產業發展的重要支撐。從互聯網業務收入增長率分佈看，有86家企業互聯網業務收入實現增長。</p>
<p>二是研發投入強度突破10%，打造中國核心技術。2019年互聯網百強企業的研發投入達到1538.7億元，同比增長45.1%，平均研發強度突破10%，比我國R&D經費投入強度高出近8個百分點。從研發強度分佈看，有40家企業研發強度在10%以上，4家企業研發強度在30%-35%之間。互聯網百強企業不斷突破核心技術，互聯網百強企業不斷提升原始創新能力，加快推進5G、人工智能、雲計算、大數據等關鍵核心技術突破，部分技術處於國際領先水平。2019年互聯網百強企業已經擁有專利近8萬項，其中發明專利數近6萬項。2019年互聯網百強企業中應用大數據企業29家，雲計算28家，人工智能相關企業24家，運用物聯網技術相關的企業3家。</p>
<p>三是應用場景多元化，智能+打造生活消費新模式。互聯網百強企業深化消費互聯網發展，已對衣、食、住、行等各方面進行了全場景覆蓋，業務涵蓋互聯網公共服務、網絡媒體、音樂與視頻、社交網絡、科技創新與知識產權等17個領域，全方位提升了人民羣衆的生活、工作、文化、娛樂、教育等方面的生活質量。2019年互聯網百強企業中從事電子商務的共18家；涉及互聯網公共服務的共41家，主要提供信息查詢、教育醫療、政務辦理、公共出行等便民服務，讓普通人民享受到“互聯網+”帶來的便利生活；21家企業涉及音樂與視頻業務。同時，互聯網百強企業積極發展智能產業，不斷拓展“智能+”，創造了智慧門店、VR/AR試衣試妝、無感支付等豐富的新消費業態和場景，打造未來智能生活消費新模式。</p>
<p>四是工業互聯網入實踐深耕，賦能傳統產業高質量發展。互聯網百強企業通過不斷向各行各業“滲透”和“賦能”，推動雲計算、大數據、物聯網等信息通信技術與實體經濟深入融合，培育新產業、新業態、新模式，支撐實體經濟高質量發展。2019年互聯網百強企業產業互聯網數量再創新高，以服務實體經濟客戶爲主的產業互聯網領域企業數量達到60家，累計服務近4000萬家企業。其中，涉及互聯網數據服務41家，生產製造服務13家，科技創新和知識產權24家，B2B電商11家，互聯網基礎服務10家。</p>
<p>五是“獨角獸” 企業快速增長，國際行業地位再創新高。2019年互聯網百強企業及下屬企業涌現出螞蟻金服、字節跳動、京東數科、滿幫集團、優刻得、找鋼網等25家獨角獸企業，同比增長38.9%，業務涉及金融科技、智慧物流、電子商務、新文娛等領域。從全球公司市值排名情況看，2018年，全球互聯網公司市值前三十強中互聯網百強企業佔10家，其中，騰訊集團和阿里巴巴穩居全球互聯網公司市值前十強。</p>
<p>六是覆蓋地域實現新擴展，網絡扶貧取得新成效。2019年擁有互聯網百強企業的省份達到18個，在2018年基礎上新增江西和山東兩個省份，地域覆蓋不斷增加。在區域分佈上，東部地區互聯網百強企業數量共86家，中西部地區互聯網百強企業共12家，東北地區互聯網百強企業數量保持2家。其中，安徽、貴州、河南、湖北、湖南、江西、重慶、四川8箇中西部地區互聯網百強企業數量不斷增加，較去年增長1家。互聯網百強企業積極踐行企業社會責任，發揮互聯網在助推脫貧攻堅中的作用，探索“直播+電商”等扶貧新模式，推進精準扶貧、精準脫貧。據統計，超過一半以上互聯網百強企業參與網絡扶貧。</p>
</article>
</div>
</div>
</div>
/*css部分*/
.scroll-indicator {
position: relative;
overflow: hidden;
border: 1px solid $purple;
width: 500px;
height: 300px;
&::after {
position: absolute;
left: 0;
right: 5px;
top: 2px;
bottom: 0;
background-color: #fff;
content: "";
}
}
.article {
overflow: auto;
height: 100%;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: $purple;
}
article {
padding: 0 20px;
background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;
background-size: 100% calc(100% - 298px + 5px);
> * {
position: relative;
z-index: 9;
}
}
h1 {
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
p {
margin-top: 20px;
line-height: 20px;
text-indent: 2em;
}
}
效果：
使用filter模擬Instagram濾鏡
要點：通過filter的濾鏡組合起來模擬Instagram濾鏡
場景：圖片濾鏡
兼容：filter
例子：（css-gram）
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="instagram-filter">
<li>
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Default</p>
</li>
<li class="_1977">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>1977</p>
</li>
<li class="aden">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Aden</p>
</li>
<li class="brannan">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Brannan</p>
</li>
<li class="brooklyn">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Brooklyn</p>
</li>
<li class="clarendon">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Clarendon</p>
</li>
<li class="earlybird">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Earlybird</p>
</li>
<li class="gingham">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Gingham</p>
</li>
<li class="hudson">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Hudson</p>
</li>
<li class="inkwell">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Inkwell</p>
</li>
<li class="kelvin">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Kelvin</p>
</li>
<li class="lark">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Lark</p>
</li>
<li class="lofi">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>LoFi</p>
</li>
<li class="maven">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Maven</p>
</li>
<li class="mayfair">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Mayfair</p>
</li>
<li class="moon">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Moon</p>
</li>
<li class="nashville">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Nashville</p>
</li>
<li class="perpetua">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Perpetua</p>
</li>
<li class="reyes">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Reyes</p>
</li>
<li class="rise">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Rise</p>
</li>
<li class="slumber">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Slumber</p>
</li>
<li class="stinson">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Stinson</p>
</li>
<li class="toaster">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Toaster</p>
</li>
<li class="valencia">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Valencia</p>
</li>
<li class="walden">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Walden</p>
</li>
<li class="willow">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Willow</p>
</li>
<li class="xpro2">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>X-pro II</p>
</li>
<li class="obscure">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>自定義：Obscure</p>
</li>
</ul>
</div>
/*css部分*/
.instagram-filter {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 1635px;
height: 630px;
li {
overflow: hidden;
position: relative;
width: 225px;
height: 150px;
}
img {
width: 100%;
height: 100%;
}
p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 10px;
width: fit-content;
height: 30px;
background-color: #000;
filter: none;
line-height: 30px;
color: #fff;
}
}
.obscure {
filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
}
效果：
Figure Skill
使用div描繪各種圖形
要點：<div>配合其僞元素（::before、::after）通過clip、transform等方式繪製各種圖形
場景：各種圖形容器
兼容：clip、transform
例子：https://css-tricks.com/the-shapes-of-css/
使用mask雕刻鏤空背景
要點：通過mask未圖片背景生成蒙層提供遮罩效果
場景：遮罩動畫、蒙層
兼容：mask、perspective、transform-style、animation
例子：
/*html部分*/
<div class="bruce pr flex-ct-x">
<div class="mask-layer"></div>
</div>
/*css部分*/
$mask-bg: "https://yangzw.vip/static/codepen/mask-bg.jpg";
$mask-text: "https://yangzw.vip/static/codepen/mask-text.jpg";
$logo: "https://yangzw.vip/static/codepen/logo-netease.svg";
.bruce {
overflow: hidden;
&::after {
position: absolute;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
background: url($mask-bg) no-repeat center/cover;
filter: blur(10px);
content: "";
}
}
.mask-layer {
position: relative;
z-index: 9;
width: 600px;
height: 300px;
background: url($mask-text) left center/150% auto;
mask: url($logo) center/cover;
animation: move 10s infinite;
}
@keyframes move {
0% {
background-position-x: 0;
}
50% {
background-position-x: 100%;
}
}
效果：
使用linesr-gradient描繪波浪線
要點：通過linear-gradient繪製波浪線
場景：文字強化顯示、文字下劃線、內容分割線
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<p class="waveline-text">波浪線文字</p>
</div>
/*css部分*/
@mixin waveline($h, $color: $red) {
position: relative;
&::after {
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: $h;
background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
background-size: $h * 2 $h * 2;
content: "";
}
}
.waveline-text {
height: 20px;
line-height: 20px;
letter-spacing: 10px;
@include waveline(10px);
}
效果：
使用linear-gradient描繪綵帶
要點：通過linear-gradient繪製間斷顏色的綵帶
場景：主題化
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="colour-bar"></div>
</div>
/*css部分*/
.colour-bar {
width: 500px;
height: 50px;
background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
}
效果：
使用conic-gradient描繪餅圖
要點：通過conic-gradient繪製多種色彩的餅圖
場景：項佔比餅圖
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="pie-chart"></div>
</div>
/*css部分*/
.pie-chart {
border-radius: 100%;
width: 300px;
height: 300px;
background-image: conic-gradient($red 0 25%, $purple 25% 30%, $orange 30% 55%, $blue 55% 70%, $green 70% 100%);
}
效果：
使用linear-gradient描繪方格背景
要點：使用Linear-gradient繪製間斷顏色的綵帶進行交互生成方格
場景：格子背景、佔位圖
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="square-bg"></div>
</div>
/*css部分*/
.square-bg {
width: 500px;
height: 300px;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
}
效果：
使用box-shadow描繪單測投影
要點：通過box-shadow生成投影，且模糊半徑和負的擴張半徑一致，使投影偏向一側
場景：容器投影、長投影、霓虹燈、燈光陰影等
兼容：box-shadow、filter、text-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="aside-shadow">投影</div>
</div>
/*css部分*/
.aside-shadow {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 100px;
height: 100px;
box-shadow: -7px 0 5px -5px $orange;
font-weight: bold;
font-size: 30px;
color: $orange;
}
效果：
使用filter描繪頭像彩色陰影
要點：通過filter:blur() brightness() opacity()模擬陰影效果
場景：頭像陰影
兼容：filter
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="avatar-shadow"></div>
</div>
/*css部分*/
$avatar: "https://yangzw.vip/static/codepen/thor.jpg";
.avatar-shadow {
position: relative;
border-radius: 100%;
width: 200px;
height: 200px;
background: url($avatar) no-repeat center/cover;
&::after {
position: absolute;
left: 0;
top: 10%;
z-index: -1;
border-radius: 100%;
width: 100%;
height: 100%;
background: inherit;
filter: blur(10px) brightness(80%) opacity(.8);
content: "";
transform: scale(.95);
}
}
效果：
使用box-shadow裁剪圖像
要點：通過box-shadow模擬蒙層實現中間鏤空
場景：圖片裁剪、忻州引導、背景鏤空、投射定位
兼容：box-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="img-cliper">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<div class="mask">
<i></i>
</div>
</div>
</div>
/*css部分*/
.img-cliper {
overflow: hidden;
position: relative;
img {
width: 400px;
}
i {
position: absolute;
left: 50px;
top: 30px;
border-radius: 100%;
width: 100px;
height: 50px;
box-shadow: 0 0 0 9999px rgba(#000, .5);
}
.mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
效果：
使用outline描繪內邊框
要點：通過outline設置輪廓進行描邊，可設置outline-offset設置內描邊
場景：內描邊、外描邊
兼容：outline
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="outside-border"></div>
</div>
/*css部分*/
.outside-border {
outline: 10px dashed $blue;
outline-offset: -50px;
border: 10px dashed $orange;
width: 300px;
height: 300px;
background-color: $green;
}
效果：
Component Skill
迭代計數器
要點：累加選項單位的計數器
場景：章節目錄、選項計數器、加法計算器
兼容：counters
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="iterative-counter">
<ul>
<li>
<input type="checkbox" id="angular">
<label for="angular">Angular</label>
</li>
<li>
<input type="checkbox" id="react">
<label for="react">React</label>
</li>
<li>
<input type="checkbox" id="vue">
<label for="vue">Vue</label>
</li>
</ul>
<p class="count" data-unit="個">框架：</p>
<p class="weight" data-unit="%">權重：</p>
</div>
</div>
/*css部分*/
.iterative-counter {
ul {
counter-reset: index 0 count 0 weight 0;
}
li {
display: flex;
position: relative;
align-items: center;
margin-top: 10px;
counter-increment: index 1;
&::before {
content: counter(index)"、";
}
&:first-child {
margin-top: 0;
}
}
input {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
&:checked + label::before {
color: $green;
content: "\2713";
}
}
label {
display: flex;
align-items: center;
height: 20px;
&::before {
box-sizing: border-box;
margin-right: 5px;
border: 1px solid $green;
width: 20px;
height: 20px;
cursor: pointer;
line-height: 20px;
text-align: center;
color: transparent;
content: "";
transition: all 300ms;
}
}
p {
margin-top: 10px;
&.count::after {
content: counter(count) attr(data-unit);
}
&.weight::after {
content: counter(weight) attr(data-unit);
}
}
}
#angular:checked {
counter-increment: count 1 weight 20;
}
#react:checked {
counter-increment: count 1 weight 50;
}
#vue:checked {
counter-increment: count 1 weight 30;
}
效果：
下劃線跟隨導航欄
要點：下劃線跟隨鼠標移動的導航欄
場景：動態導航欄
兼容：+
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="underline-navbar">
<li>Alibaba阿里巴巴</li>
<li>Tencent騰訊</li>
<li>Baidu百度</li>
<li>Jingdong京東</li>
<li>Ant螞蟻金服</li>
<li>Netease網易</li>
</ul>
</div>
/*css部分*/
.underline-navbar {
display: flex;
li {
position: relative;
padding: 10px;
cursor: pointer;
font-size: 20px;
color: $blue;
transition: all 300ms;
&::before {
position: absolute;
left: 100%;
top: 0;
border-bottom: 2px solid transparent;
width: 0;
height: 100%;
content: "";
transition: all 300ms;
}
&:active {
background-color: $blue;
color: #fff;
}
&:hover {
&::before {
left: 0;
top: 0;
z-index: -1;
border-bottom-color: $blue;
width: 100%;
transition-delay: 100ms;
}
& + li::before {
left: 0;
}
}
}
}
效果：
氣泡背景牆
要點：不間斷冒出氣泡的背景牆
場景：動態背景
兼容：animation
例子：
/*html部分*/
<div class="bruce">
<ul class="bubble-bgwall">
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
</ul>
</div>
/*css部分*/
.bruce {
background-image: linear-gradient(270deg, #8146b4, #6990f6);
}
.bubble-bgwall {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 1200px;
height: 100%;
li {
display: flex;
position: absolute;
bottom: -200px;
justify-content: center;
align-items: center;
border-radius: 10px;
width: 50px;
height: 50px;
background-color: rgba(#fff, .15);
color: #ccc;
animation: bubble 15s infinite;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 90px;
height: 90px;
animation-duration: 7s;
animation-delay: 2s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
background-color: rgba(#fff, .3);
animation-duration: 8s;
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
background-color: rgba(#fff, .2);
animation-delay: 3s;
}
&:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
width: 40px;
height: 40px;
font-size: 12px;
animation-duration: 15s;
animation-delay: 4s;
}
&:nth-child(9) {
left: 25%;
width: 40px;
height: 40px;
background-color: rgba(#fff, .3);
font-size: 12px;
animation-duration: 12s;
animation-delay: 2s;
}
&:nth-child(10) {
left: 85%;
width: 160px;
height: 160px;
animation-delay: 5s;
}
}
}
@keyframes bubble {
0% {
opacity: .5;
transform: translateY(0) rotate(45deg);
}
25% {
opacity: .75;
transform: translateY(-400px) rotate(90deg);
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
效果：
滾動指示器
要點：提示滾動進度的指示器
場景：閱讀進度
兼容：calc()、gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="scroll-indicator">
<div class="article">
<article>
<h1>2019中國互聯網企業100強榜單</h1>
<p>8月14日，中國互聯網協會、工業和信息化部網絡安全產業發展中心（工業和信息化部信息中心）在2019年中國互聯網企業100強發佈會暨百強企業高峯論壇上聯合發佈了2019年中國互聯網企業100強榜單、互聯網成長型企業20強榜單和《2019年中國互聯網企業100強發展報告》。阿里巴巴（中國）有限公司、深圳市騰訊計算機系統有限責任公司、百度公司、京東集團、浙江螞蟻小微金融服務集團股份有限公司、網易集團、美團點評、北京字節跳動科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜單前十名。</p>
<p>今年互聯網百強企業聚焦創新引領、產業融合、工業互聯網等方面，主要呈現出六大特點：</p>
<p>一是整體規模跨越式提升，成爲數字經濟新引擎。2019年互聯網百強企業互聯網業務收入高達2.75萬億元，比2018年互聯網百強企業互聯網業務收入增長超過1萬億元，佔我國數字經濟的比重達8.8%，對數字經濟的貢獻率達14%，帶動數字經濟增長近2個百分點成爲帶動我國互聯網產業發展的重要支撐。從互聯網業務收入增長率分佈看，有86家企業互聯網業務收入實現增長。</p>
<p>二是研發投入強度突破10%，打造中國核心技術。2019年互聯網百強企業的研發投入達到1538.7億元，同比增長45.1%，平均研發強度突破10%，比我國R&D經費投入強度高出近8個百分點。從研發強度分佈看，有40家企業研發強度在10%以上，4家企業研發強度在30%-35%之間。互聯網百強企業不斷突破核心技術，互聯網百強企業不斷提升原始創新能力，加快推進5G、人工智能、雲計算、大數據等關鍵核心技術突破，部分技術處於國際領先水平。2019年互聯網百強企業已經擁有專利近8萬項，其中發明專利數近6萬項。2019年互聯網百強企業中應用大數據企業29家，雲計算28家，人工智能相關企業24家，運用物聯網技術相關的企業3家。</p>
<p>三是應用場景多元化，智能+打造生活消費新模式。互聯網百強企業深化消費互聯網發展，已對衣、食、住、行等各方面進行了全場景覆蓋，業務涵蓋互聯網公共服務、網絡媒體、音樂與視頻、社交網絡、科技創新與知識產權等17個領域，全方位提升了人民羣衆的生活、工作、文化、娛樂、教育等方面的生活質量。2019年互聯網百強企業中從事電子商務的共18家；涉及互聯網公共服務的共41家，主要提供信息查詢、教育醫療、政務辦理、公共出行等便民服務，讓普通人民享受到“互聯網+”帶來的便利生活；21家企業涉及音樂與視頻業務。同時，互聯網百強企業積極發展智能產業，不斷拓展“智能+”，創造了智慧門店、VR/AR試衣試妝、無感支付等豐富的新消費業態和場景，打造未來智能生活消費新模式。</p>
<p>四是工業互聯網入實踐深耕，賦能傳統產業高質量發展。互聯網百強企業通過不斷向各行各業“滲透”和“賦能”，推動雲計算、大數據、物聯網等信息通信技術與實體經濟深入融合，培育新產業、新業態、新模式，支撐實體經濟高質量發展。2019年互聯網百強企業產業互聯網數量再創新高，以服務實體經濟客戶爲主的產業互聯網領域企業數量達到60家，累計服務近4000萬家企業。其中，涉及互聯網數據服務41家，生產製造服務13家，科技創新和知識產權24家，B2B電商11家，互聯網基礎服務10家。</p>
<p>五是“獨角獸” 企業快速增長，國際行業地位再創新高。2019年互聯網百強企業及下屬企業涌現出螞蟻金服、字節跳動、京東數科、滿幫集團、優刻得、找鋼網等25家獨角獸企業，同比增長38.9%，業務涉及金融科技、智慧物流、電子商務、新文娛等領域。從全球公司市值排名情況看，2018年，全球互聯網公司市值前三十強中互聯網百強企業佔10家，其中，騰訊集團和阿里巴巴穩居全球互聯網公司市值前十強。</p>
<p>六是覆蓋地域實現新擴展，網絡扶貧取得新成效。2019年擁有互聯網百強企業的省份達到18個，在2018年基礎上新增江西和山東兩個省份，地域覆蓋不斷增加。在區域分佈上，東部地區互聯網百強企業數量共86家，中西部地區互聯網百強企業共12家，東北地區互聯網百強企業數量保持2家。其中，安徽、貴州、河南、湖北、湖南、江西、重慶、四川8箇中西部地區互聯網百強企業數量不斷增加，較去年增長1家。互聯網百強企業積極踐行企業社會責任，發揮互聯網在助推脫貧攻堅中的作用，探索“直播+電商”等扶貧新模式，推進精準扶貧、精準脫貧。據統計，超過一半以上互聯網百強企業參與網絡扶貧。</p>
</article>
</div>
</div>
</div>
/*css部分*/
.scroll-indicator {
position: relative;
overflow: hidden;
border: 1px solid $purple;
width: 500px;
height: 300px;
&::after {
position: absolute;
left: 0;
right: 5px;
top: 2px;
bottom: 0;
background-color: #fff;
content: "";
}
}
.article {
overflow: auto;
height: 100%;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: $purple;
}
article {
padding: 0 20px;
background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;
background-size: 100% calc(100% - 298px + 5px);
> * {
position: relative;
z-index: 9;
}
}
h1 {
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
p {
margin-top: 20px;
line-height: 20px;
text-indent: 2em;
}
}
效果：
故障文本
要點：顯示器故障形式的文本
場景：錯誤提示
兼容：data-*、attr()、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="fault-text" data-text="ERROR">ERROR</div>
</div>
/*css部分*/
.bruce {
background-color: #000;
}
.fault-text {
position: relative;
font-weight: bold;
font-size: 100px;
color: #fff;
&::before,
&::after {
overflow: hidden;
position: absolute;
top: 0;
background-color: #000;
clip: rect(0, 900px, 0, 0);
color: #fff;
content: attr(data-text);
animation: shake 3s linear infinite alternate-reverse;
}
&::before {
left: -2px;
text-shadow: 1px 0 $blue;
}
&::after {
left: 2px;
text-shadow: -1px 0 $red;
animation-duration: 2s;
}
}
@keyframes shake {
$steps: 20;
@for $i from 0 through $steps {
#{percentage($i * (1 / $steps))} {
clip: rect(random(100) + px, 9999px, random(100) + px, 0);
}
}
}
效果：
換色器
要點：通過拾色器改變圖像色相的換色器
場景：圖片色彩變換
兼容：mix-blend-mode
例子：
/*html部分*/
<div class="bruce">
<div class="color-changer">
<input type="color" value="#ff6666">
<img src="https://yangzw.vip/static/codepen/car.jpg">
</div>
</div>
/*css部分*/
.color-changer {
overflow: hidden;
position: relative;
height: 100%;
input {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
mix-blend-mode: hue;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
效果：
狀態懸浮球
要點：展示當前狀態的懸浮球
場景：狀態動態顯示、波浪動畫
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="state-ball warning">
<div class="wave"></div>
</div>
</div>
/*css部分*/
.state-ball {
overflow: hidden;
position: relative;
padding: 5px;
border: 3px solid $green;
border-radius: 100%;
width: 150px;
height: 150px;
background-color: #fff;
&::before,
&::after {
position: absolute;
left: 50%;
top: 0;
z-index: 20;
margin-left: -100px;
width: 200px;
height: 200px;
content: "";
}
&::before {
margin-top: -150px;
border-radius: 45%;
background-color: rgba(#fff, .5);
animation: rotate 10s linear -5s infinite;
}
&::after {
margin-top: -160px;
border-radius: 40%;
background-color: rgba(#fff, .8);
animation: rotate 15s infinite;
}
&.warning {
border-color: $orange;
.wave {
background-image: linear-gradient(-180deg, #f0c78a 13%, $orange 91%);
}
}
&.danger {
border-color: $red;
.wave {
background-image: linear-gradient(-180deg, #f78989 13%, $red 91%);
}
}
}
.wave {
position: relative;
border-radius: 100%;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, #af8 13%, $green 91%);
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
效果：
粘粘球
要點：香蕉粘粘效果的雙球回彈運動
場景：粘粘動畫
兼容：filter、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="sticky-ball">
<div class="ball-1"></div>
<div class="ball-2"></div>
</div>
</div>
/*css部分*/
.bruce {
filter: contrast(10);
}
.sticky-ball {
position: relative;
width: 320px;
height: 80px;
filter: contrast(10);
}
div[class*=ball-] {
position: absolute;
top: 0;
padding: 10px;
border-radius: 100%;
width: 80px;
height: 80px;
background-color: $red;
filter: blur(5px);
animation: 6s infinite;
}
.ball-1 {
left: 0;
animation-name: move-1 !important;
}
.ball-2 {
left: 240px;
animation-name: move-2 !important;
}
@keyframes move-1 {
0%,
20%,
100% {
width: 80px;
height: 80px;
}
50% {
left: 110px;
top: -15px;
width: 110px;
height: 110px;
}
85% {
left: 75px;
width: 90px;
height: 70px;
}
90% {
top: -2px;
width: 75px;
height: 85px;
}
}
@keyframes move-2 {
0%,
20%,
100% {
width: 80px;
height: 80px;
}
50% {
left: 110px;
top: -15px;
width: 110px;
height: 110px;
}
85% {
left: 165px;
width: 90px;
height: 70px;
}
90% {
top: -2px;
width: 75px;
height: 85px;
}
}
效果：
商城票劵
要點：邊緣帶孔和中間摺痕的票劵
場景：電影票、代金卷、消費卡
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="mall-ticket">
<h3>100元</h3>
<p>網易考拉代金券</p>
</div>
</div>
/*css部分*/
.mall-ticket {
display: flex;
position: relative;
width: 300px;
height: 100px;
background: radial-gradient(circle at right top, transparent 10px, $red 0) top left/100px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, $red 0) bottom left/100px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;
filter: drop-shadow(2px 2px 2px rgba(#fff, .2));
line-height: 100px;
text-align: center;
color: #fff;
&::before {
position: absolute;
left: 100px;
top: 0;
bottom: 0;
margin: auto;
border: 1px dashed $purple;
height: 80px;
content: "";
}
&::after {
position: absolute;
left: 100%;
top: 0;
width: 5px;
height: 100%;
background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),
radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);
background-size: 5px 15px;
content: "";
}
h3 {
width: 100px;
font-size: 30px;
}
p {
flex: 1;
font-weight: bold;
font-size: 18px;
}
}
效果：
倒影加載條
要點：帶有漸變倒影的加載條
場景：加載提示
兼容：box-reflect、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="reflect-loading">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
/*css部分*/
$count: 10;
$color: $purple $blue;
.reflect-loading {
display: flex;
height: 100px;
-webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
li {
width: 20px;
@for $i from 0 to $count {
$args: append($color, $i * 100% / ($count - 1));
&:nth-child(#{$i + 1}) {
background-color: mix($args...);
animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
animation-delay: $i * 50ms;
}
}
}
}
@keyframes rotate {
0% {
transform: rotate(-.5turn) rotateX(-1turn);
}
75%,
100% {
transform: none;
}
}
效果：
三維立方體
要點：三維建模的立方體
場景：三維建模
兼容：transform、perspective、transform-style、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="td-cube">
<ul>
<li class="front">1</li>
<li class="back">2</li>
<li class="top">3</li>
<li class="bottom">4</li>
<li class="left">5</li>
<li class="right">6</li>
</ul>
</div>
</div>
/*css部分*/
$width: 150px;
$height: 150px;
$length: 150px;
.td-cube {
width: $width;
height: $height;
perspective: 1000px;
ul {
position: relative;
width: 100%;
height: 100%;
transform: rotateX(-15deg) rotateY(15deg);
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
li {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: $width;
height: $height;
opacity: .8;
font-size: 50px;
color: #fff;
}
}
.front {
background-color: $red;
transform: translateZ($length / 2);
}
.back {
background-color: $purple;
transform: rotateY(180deg) translateZ($length / 2);
}
.top {
background-color: $orange;
transform: rotateX(90deg) translateZ($height / 2);
}
.bottom {
background-color: $blue;
transform: rotateX(-90deg) translateZ($height / 2);
}
.left {
background-color: $cyan;
transform: rotateY(-90deg) translateZ($width / 2);
}
.right {
background-color: $green;
transform: rotateY(90deg) translateZ($width / 2);
}
@keyframes rotate {
from {
transform: rotateY(0) rotateX(0);
}
to {
transform: rotateY(-1turn) rotateX(-1turn);
}
}
效果：
動態邊框
要點：鼠標懸浮時動態漸變顯示的邊框
場景：懸浮按鈕、邊框動畫
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="dynamic-border">iCSS</div>
</div>
/*css部分*/
.dynamic-border {
width: 200px;
height: 80px;
background: linear-gradient(0, $red 2px, $red 2px) no-repeat left top/0 2px,
linear-gradient(-90deg, $red 2px, $red 2px) no-repeat right top/2px 0,
linear-gradient(-180deg, $red 2px, $red 2px) no-repeat right bottom/0 2px,
linear-gradient(-270deg, $red 2px, $red 2px) no-repeat left bottom/2px 0;
cursor: pointer;
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 50px;
color: $red;
transition: all 300ms;
&:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
}
效果：
標籤頁
要點：可切換內容的標籤頁
場景：內容切換
兼容：scroll-behavior
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="tab-page">
<nav>
<h3>
<input type="radio" name="tab">
<label for="tab1">標題1</label>
</h3>
<h3>
<input type="radio" name="tab">
<label for="tab2">標題2</label>
</h3>
<h3>
<input type="radio" name="tab">
<label for="tab3">標題3</label>
</h3>
</nav>
<ul>
<li>
<input id="tab1">
<p>內容1</p>
</li>
<li>
<input id="tab2">
<p>內容2</p>
</li>
<li>
<input id="tab3">
<p>內容3</p>
</li>
</ul>
</div>
</div>
/*css部分*/
.tab-page {
width: 300px;
nav {
display: flex;
border: 1px solid $green;
height: 40px;
line-height: 40px;
text-align: center;
h3 {
position: relative;
flex: 1;
background-color: $green;
color: #fff;
& + h3 {
border-left: 1px solid #fff;
}
}
input {
display: none;
}
label {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
ul {
overflow: hidden;
scroll-behavior: smooth;
border: 1px solid $green;
border-top: none;
height: 100px;
li {
display: flex;
position: relative;
justify-content: center;
align-items: center;
height: 100%;
font-size: 20px;
color: $blue;
}
input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
}
}
效果：
標籤導航欄
要點：可切換內容的導航欄
場景：也買你切換
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="tab-navbar">
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<input type="radio" name="tab" id="tab4">
<nav>
<label for="tab1">標題1</label>
<label for="tab2">標題2</label>
<label for="tab3">標題3</label>
<label for="tab4">標題4</label>
</nav>
<main>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
</ul>
</main>
</div>
</div>
/*css部分*/
.tab-navbar {
display: flex;
overflow: hidden;
flex-direction: column-reverse;
border-radius: 10px;
width: 300px;
height: 400px;
input {
display: none;
&:nth-child(1):checked {
& ~ nav label:nth-child(1) {
@extend .active;
}
& ~ main ul {
background-color: $red;
transform: translate3d(0, 0, 0);
}
}
&:nth-child(2):checked {
& ~ nav label:nth-child(2) {
@extend .active;
}
& ~ main ul {
background-color: $purple;
transform: translate3d(-25%, 0, 0);
}
}
&:nth-child(3):checked {
& ~ nav label:nth-child(3) {
@extend .active;
}
& ~ main ul {
background-color: $orange;
transform: translate3d(-50%, 0, 0);
}
}
&:nth-child(4):checked {
& ~ nav label:nth-child(4) {
@extend .active;
}
& ~ main ul {
background-color: $blue;
transform: translate3d(-75%, 0, 0);
}
}
}
nav {
display: flex;
height: 40px;
background-color: #f0f0f0;
line-height: 40px;
text-align: center;
label {
flex: 1;
cursor: pointer;
transition: all 300ms;
}
}
main {
flex: 1;
ul {
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: all 300ms;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: bold;
font-size: 20px;
color: #fff;
}
}
}
.active {
background-color: $green;
color: #fff;
}
效果：
摺疊面板
要點：可摺疊內容的面板
場景：隱藏式子導航欄
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="accordion">
<input type="checkbox" id="collapse1">
<input type="checkbox" id="collapse2">
<input type="checkbox" id="collapse3">
<article>
<label for="collapse1">列表1</label>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>內容1<br>內容2<br>內容3<br>內容4</p>
</article>
</div>
</div>
/*css部分*/
.accordion {
width: 300px;
article {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
}
input {
display: none;
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 600px;
}
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: $red;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
border: 1px solid $red;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
效果：
星級評分
要點：點擊星星進行評分的按鈕
場景：評分
兼容：~
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="star-rating">
<input type="radio" name="rate">
<input type="radio" name="rate">
<input type="radio" name="rate">
<input type="radio" name="rate">
<input type="radio" name="rate">
</div>
</div>
/*css部分*/
.star-rating {
display: flex;
flex-direction: row-reverse;
input {
width: 30px;
height: 30px;
appearance: none;
cursor: pointer;
line-height: 30px;
text-align: center;
font-size: 30px;
transition: all 300ms;
&::after {
color: $purple;
content: "☆";
transition: all 300ms;
}
&:hover {
transform: scale(1.2);
}
&:checked,
&:hover {
&::after,
& ~ input::after {
color: $red;
content: "★";
}
}
}
}
效果：
加載指示器
要點：變換...長度的加載提示
場景：加載提示
兼容：animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="load-indicator">加載中<dot></dot></div>
</div>
/*css部分*/
.load-indicator {
font-size: 16px;
color: $blue;
dot {
display: inline-block;
overflow: hidden;
height: 1em;
line-height: 1;
vertical-align: -.25em;
&::after {
display: block;
white-space: pre-wrap;
content: "...\A..\A.";
animation: loading 3s infinite step-start both;
}
}
}
@keyframes loading {
33% {
transform: translate3d(0, -2em, 0);
}
66% {
transform: translate3d(0, -1em, 0);
}
}
效果：
自適應相冊
要點：自適應照片數量的相冊
場景：九宮格相冊、微信相冊、圖集
兼容：:only-child、:first-child、:nth-child()、:nth-lash-child()、~
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="response-album">
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
</ul>
</div>
/*css部分*/
@mixin square($count: 2) {
$length: calc((100% - #{$count} * 10px) / #{$count});
width: $length;
height: $length;
}
.response-album {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 400px;
height: 400px;
li {
display: flex;
overflow: hidden;
justify-content: center;
margin: 5px;
background-color: #f0f0f0;
@include square(3);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
// 一個元素
.item:only-child {
border-radius: 10px;
width: auto;
max-width: 80%;
height: auto;
max-height: 80%;
}
// 兩個元素
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
@include square(2);
}
.item:first-child:nth-last-child(2) {
border-radius: 10px 0 0 10px;
}
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
border-radius: 0 10px 10px 0;
}
// 三個元素
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item:nth-child(2),
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
@include square(2);
}
.item:first-child:nth-last-child(3) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(2) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
border-bottom-left-radius: 10px;
}
// 四個元素
.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item:nth-child(2),
.item:first-child:nth-last-child(4) ~ .item:nth-child(3),
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
@include square(2);
}
.item:first-child:nth-last-child(4) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(2) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(3) {
border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
border-bottom-right-radius: 10px;
}
// 五個元素
.item:first-child:nth-last-child(5) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(3) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(4) {
border-bottom-left-radius: 10px;
}
// 六個元素
.item:first-child:nth-last-child(6) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(3) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(4) {
border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(6) {
border-bottom-right-radius: 10px;
}
// 七個元素
.item:first-child:nth-last-child(7) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(3) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(7) {
border-bottom-left-radius: 10px;
}
// 八個元素
.item:first-child:nth-last-child(8) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(3) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(7) {
border-bottom-left-radius: 10px;
}
// 九個元素
.item:first-child:nth-last-child(9) {
border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(3) {
border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(7) {
border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(9) {
border-bottom-right-radius: 10px;
}
效果：
圓角進度條
要點：單一顏色的圓角進度條
場景：進度條
兼容：gradient
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="fillet-progressbar"></div>
</div>
/*css部分*/
@mixin progress-bar($width: 100px, $height: 10px, $color: $red, $percent: 0) {
border-radius: $height / 2;
width: $width;
height: $height;
background-color: #ccc;
background-image: radial-gradient(closest-side circle at $percent, $color, $color 100%, transparent),
linear-gradient($color, $color);
background-repeat: no-repeat;
background-size: 100%, $percent;
}
.fillet-progressbar {
@include progress-bar(500px, 10px, $purple, 50%);
}
效果：
螺紋進度條
要點：漸變螺紋的進度條
場景：進度條、加載動畫
兼容：gradient、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="thread-progressbar"></div>
</div>
/*css部分*/
.thread-progressbar {
position: relative;
padding-right: 200px;
width: 500px;
height: calc(1.4142 * 20px);
background: repeating-linear-gradient(45deg, $green, $green 10px, transparent 11px, transparent 19px, $green 20px) 0 0 content-box;
animation: twill 1s linear infinite;
&::after {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
content: "";
}
}
@keyframes twill {
from {
background-position-y: 0;
}
to {
background-position-y: calc(-1 * 1.4142 * 40px);
}
}
效果：
立體按鈕
要點：點擊呈現按下狀態的按鈕
場景：按鈕點擊
兼容：box-shadow
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<button class="stereo-btn">iCSS</button>
</div>
/*css部分*/
.stereo-btn {
padding: 10px 20px;
outline: none;
border: none;
border-radius: 10px;
background-image: linear-gradient($blue, $green);
box-shadow: 0 10px 0 $blue;
cursor: pointer;
text-shadow: 0 5px 5px #ccc;
font-size: 50px;
color: #fff;
transition: all 300ms;
&:active {
box-shadow: 0 5px 0 $blue;
transform: translate3d(0, 5px, 0);
}
}
混沌加載圈
要點：帶混沌虛影的加載圈
場景：加載提示
兼容：filter、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<ul class="chaos-loading">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
/*css部分*/
.chaos-loading {
overflow: hidden;
position: relative;
border-radius: 100%;
width: 200px;
height: 200px;
&::after {
display: block;
filter: drop-shadow(2px 4px 6px #000);
line-height: 200px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
content: "Loading...";
}
li {
position: absolute;
left: 0;
top: 0;
border-radius: 100%;
width: 100px;
height: 100px;
filter: blur(25px);
animation: move 2s linear infinite;
&:nth-child(1) {
background-color: $red;
}
&:nth-child(2) {
background-color: $purple;
animation-delay: -500ms;
}
&:nth-child(3) {
background-color: $orange;
animation-delay: -1s;
}
&:nth-child(4) {
background-color: $blue;
animation-delay: -1.5s;
}
}
}
@keyframes move {
0%,
100% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(100%, 0, 0);
}
50% {
transform: translate3d(100%, 100%, 0);
}
75% {
transform: translate3d(0, 100%, 0);
}
}
效果：
蛇形邊框
要點：蛇形運動的邊框
場景：蛇形動畫
兼容：clip、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="snakelike-border"></div>
</div>
/*css部分*/
.snakelike-border {
position: relative;
width: 190px;
height: 190px;
background-color: $green;
&::before,
&::after {
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
border: 5px solid;
content: "";
animation: move 5s linear infinite;
}
&::before {
border-color: $red;
}
&::after {
border-color: $purple;
animation-delay: -2.5s;
}
}
@keyframes move {
0%,
100% {
clip: rect(0 200px 5px 0);
}
25% {
clip: rect(0 200px 200px 195px);
}
50% {
clip: rect(195px 200px 200px 0);
}
75% {
clip: rect(0 5px 200px 0);
}
}
效果：
自動打字
要點：逐個字符自動打印出來的文字
場景：代碼演示、文字輸入動畫
兼容：ch、animation
例子：
/*html部分*/
<div class="bruce flex-ct-x">
<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
/*css部分*/
@mixin typing($count: 0, $duration: 0, $delay: 0) {
overflow: hidden;
border-right: 1px solid transparent;
width: #{$count + 1}ch;
font-family: Consolas, Monaco, Monospace;
white-space: nowrap;
animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards, caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
.auto-typing {
font-weight: bold;
font-size: 30px;
color: $blue;
@include typing(52, 5);
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-right-color: currentColor;
}
}
效果：
