寫在前面
一個週五的晚上，閒來無事整理下自己的 github（經常做收藏黨），今天打算都過一遍，發現一個star很高的專案，裡面有大量的 CSS 片段，而且標題很誘人，然後又花了將近1個小時從頭到尾過了一遍，其中一些是我們常用的一些知識點，另外也包含一些比較新的屬性的應用，知識點挺多的，為了讓大家看起來更方便些，然後又花了點（很長很長）時間翻譯成中文。
當然提前需要和作者溝通下得到作者的允許，作者希望建立一個倉庫並且和官方保持同步更新，讓更多的人看到。
中文倉庫 github.com/Bigerfe/30-… ，目前完成了 CSS 精選集合的翻譯。
本文屬於意譯而非直譯，為了方便理解也增加了一些自己的語言，如果存在偏差或錯誤還請留言指正。
精選的有用CSS片段集合，您可以在30秒或更短的時間內理解這些片段。
本 CSS 精選集合共分為5類 - 佈局、視覺、動畫、互動、其他。
更加詳細的內容還請看 原文件。github.com/30-seconds/…。
佈局
1. 盒模型重置
盒模型重置，使盒子的寬度和高度不受其邊框(border)或填充(padding)的影響。
複製程式碼HTML
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
複製程式碼CSS
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
display: inline-block;
width: 150px;
height: 150px;
padding: 10px;
background: tomato;
color: white;
border: 10px solid red;
}
.content-box {
box-sizing: content-box;
}
複製程式碼DEMO
說明
- box-sizing：當元素設定為border-box時，即便設定了padding或border也不會改變元素的寬度和高度。
- box-sizing：設定inherit使元素繼承父級的box-sizing規則。
瀏覽器支援情況
99.9% 檢視本條 caniuse
2. 清除浮動更好的方式
無需藉助輔助元素進行浮動的清除。
注意：這僅在使用float佈局時才有用。實際場景中請考慮使用Flexbox佈局或者網格佈局。
HTML
<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>
複製程式碼CSS
.clearfix{
border:solid 1px red;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.floated {
float: left;
margin-left:20px;
}
複製程式碼DEMO
瀏覽器支援情況
100%
3. 不變寬高比
給定寬度可變的元素，它將確保其高度以響應方式保持成比例（即，其寬高比保持不變）。
DEMO
HTML
<div class="constant-width-to-height-ratio"></div>
複製程式碼CSS
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
複製程式碼說明
width:50%只設定父級元素的寬度::before為父級元素定義一個偽元素padding-top: 100%;設定偽元素的內上邊距，這裡的百分比的值是按照寬度計算的，所以會呈現為一個響應式的元素塊。- 此方法還允許將內容正常放置在元素內。
瀏覽器支援情況
100%
4.使用表格居中
使用display：table（作為flexbox的替代）使子元素在其父元素中水平垂直居。
HTML
<div class="container">
<div class="center"><span>Centered content</span></div>
</div>
複製程式碼CSS
.container {
border: 1px solid #333;
height: 250px;
width: 250px;
}
.center {
display: table;
height: 100%;
width: 100%;
}
.center > span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
複製程式碼DEMO
- display：table 使.center元素的行為類似於
<table>HTML元素; - 設定.center的寬高為100%，使其填滿父元素;
- display：table-cell, 設定'.center > span'的table-cell允許元素表現得像HTML元素;
- text-align: center 使子元素水平居中;
- vertical-align: middle 使子元素垂直居中;
外部父級必須有固定的寬高。
瀏覽器支援情況
100%
5. 使子元素均勻分佈
HTML
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
複製程式碼.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
複製程式碼DEMO
說明
-
display: flex :啟動flex 佈局
-
justify-content: space-between：
-
均勻地水平分配子元素。 第一個子元素位於左邊緣，而最後一個子元素位於右邊緣。 或者，使用justify-content：space-around來分配子節點周圍的空間，而不是它們之間。
瀏覽器支援情況
99.5%
- 需要字首才能獲得全面支援。 caniuse
6. 讓圖片在容器中顯示的更舒適
設定影像在其容器內的適合度和位置，同時保留其寬高比。 以前只能使用背景影像和background-size屬性來實現。
HTML
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
複製程式碼CSS
.image {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.image-contain {
object-fit: contain;
object-position: center;
}
.image-cover {
object-fit: cover;
object-position: right top;
}
複製程式碼DEMO
說明
object-fit: contain容器內顯示整個影像，並且保持寬高比object-fit: cover用影像填充容器，並保持寬高比object-position: [x] [y]對影像的顯示部位進行調整
瀏覽器支援程度
95.5% caniuse
7. 使用 flexbox 居中
使用 flexbox 水平垂直居中其子元素
HTML
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
複製程式碼CSS
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
複製程式碼DEMO
說明
display: flex啟用 flex 區域性justify-content: center子元素水平居中align-items: center子元素垂直居中
瀏覽器支援程度
99.5% （需要使用字首） caniuse
8.將元素垂直居中於另一個元素。
HTML
<div class="ghost-trick">
<div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
複製程式碼CSS
.ghosting {
height: 300px;
background: #0ff;
}
.ghosting:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
}
複製程式碼DEMO
說明 使用 ：before偽元素的樣式垂直對齊內聯元素而不更改其position屬性。
瀏覽器支援程度
99.9% caniuse
9. 使用網格居中
使用網格水平垂直居中子元素.
HTML
<div class="grid-centering"><div class="child">Centered content.</div></div>
複製程式碼CSS
.grid-centering {
display: grid;
justify-content: center;
align-items: center;
height: 100px;
}
複製程式碼DEMO
說明
display: grid啟用網格佈局justify-content: center使子元素水平居中align-items: center使子元素垂直居中
瀏覽器支援程度
92.3% caniuse
10. 使最後一項佔滿剩餘高度
通過為最後一個元素提供當前視口中剩餘的可用空間，即使在調整視窗大小時，也可以利用可用的視口空間。
HTML
<div class="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
複製程式碼CSS
html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.container > div:last-child {
background-color: tomato;
flex: 1;
}
複製程式碼DEMO
說明
height: 100%將容器的高度設為視口的高度display: flex啟用 flexflex-direction: column將專案的順序設定成從上到下flex-grow: 1flexbox會將容器的剩餘可用空間應用於最後一個子元素。 父級必須具有視口高度。 flex-grow：1可以應用於第一個或第二個元素，它將具有所有可用空間。
瀏覽器支援程度
99.5% 需要使用字首 caniuse
11. 屏外隱藏元素
HTML
<a class="button" href="http://pantswebsite.com">
Learn More <span class="offscreen"> about pants</span>
</a>
複製程式碼CSS
.offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
複製程式碼DEMO
說明
- 刪除所有邊框
- 使用
clip隱藏元素 - 設定寬高為1px
- 使用margin：-1px取消元素的高度和寬度
- 隱藏元素的溢位
- 移除所有的padding
- 絕對定位元素，使其不佔用DOM中的空間
瀏覽器支援程度
100% 需要使用字首 caniuse (雖然cilp已被廢棄，但較新的clip-path 目前對瀏覽器的支援非常有限。)
12. 使用transform居中子元素
使用 position: absolute and transform: translate() 進行居中，不需要知道父級和子元素的寬高，因此它非常適合響應式應用程式。
HTML
<div class="parent"><div class="child">Centered content</div></div>
複製程式碼CSS
.parent {
border: 1px solid #333;
height: 250px;
position: relative;
width: 250px;
}
.child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
複製程式碼DEMO
瀏覽器支援程度
97.7% 需要使用字首 caniuse
視覺
13.多行文字截斷顯示
如果文字長於一行，則將截斷n行，並以漸變結束。
HTML
<p class="truncate-text-multiline">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et.
</p>
複製程式碼CSS
.truncate-text-multiline {
overflow: hidden;
display: block;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
width: 400px;
position: relative;
}
.truncate-text-multiline:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 36.4px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
複製程式碼DEMO
說明
overflow: hidden防止內容溢位width: 400px確保元素有尺寸height: 109.2px計算的高度值，它等於font-size * line-height * numberOfLines（在這種情況下為26 * 1.4 * 3 = 109.2）height: 36.4px漸變容器的計算值，它等於font-size * line-height（在這種情況下為26 * 1.4 = 36.4）background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%漸變從透明到漸變從透明到＃f5f6f9
瀏覽器支援程度
97.5% caniuse
14. 畫一個圓
使用純CSS建立圓形。
HTML
<div class="circle"></div>
複製程式碼CSS
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
複製程式碼DEMO
瀏覽器支援程度
97.7% caniuse
15. 列表計數器
計數器本質上是由CSS維護的變數，其值可以通過CSS規則遞增以跟蹤它們被使用的次數。
HTML
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
複製程式碼CSS
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
複製程式碼DEMO
說明 你現在可以使用任何型別的html 標籤建立有序列表。
counter-reset初始化計數器，該值是計數器的名稱。預設情況下，計數器從0開始。此屬性還可用於將其值更改為任何特定數字。counter-increment用於可數的元素。 一旦計數器重置初始化，計數器的值可以增加或減少。counter(name, style)顯示節計數器的值。通常用於內容屬性。此函式可以接收兩個引數，第一個作為計數器的名稱，第二個參數列示佔位內容，例如3.1的小數點。- CSS計數器對於製作輪廓列表特別有用，因為計數器的新例項是在子元素中自動建立的。使用counters（）函式，可以在不同級別的巢狀計數器之間插入分隔文字。
瀏覽器支援程度
99.9% caniuse
16.自定義滾動條
HTML
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
複製程式碼CSS
.custom-scrollbar {
height: 70px;
overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
複製程式碼DEMO
瀏覽器支援程度
90.7% caniuse
17. 自定義文字選擇的樣式
HTML
<p class="custom-text-selection">Select some of this text.</p>
複製程式碼CSS
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
複製程式碼DEMO
瀏覽器支援程度
86.5% caniuse
18. 建立動態陰影
建立類似於box-shadow的陰影，但基於元素本身的顏色。
HTMl
<div class="dynamic-shadow"></div>
複製程式碼CSS
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.dynamic-shadow::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
複製程式碼DEMO
說明
::after定義一個偽元素position: absolute使偽元素脫離文件流並相對於父級定位width: 100% and height: 100%對偽元素進行大小調整以填充其父元素的大小，使其大小相等。background: inherit使偽元素繼承父級的線性漸變top: 0.5rem將偽元素相對於其父元素略微偏移。filter: blur(0.4rem)設定偽元素模糊效果，以建立下方陰影效果。opacity: 0.7設定偽元素透明度z-index: -1將偽元素定位在父元素後面但在背景前面。
瀏覽器支援程度
94.2% 需要使用字首 caniuse
19. 蝕刻文字效果
建立一種效果，其中文字看起來像“蝕刻”或雕刻在背景中。
HTML
<p class="etched-text">I appear etched into the background.</p>
複製程式碼CSS
.etched-text {
text-shadow: 0 2px white;
font-size: 1.5rem;
font-weight: bold;
color: #b8bec5;
}
複製程式碼DEMO
說明
text-shadow: 0 2px white從原點位置建立一個水平偏移0px和垂直偏移2px的白色陰影。- 背景必須比陰影更暗，效果才更明顯。
瀏覽器支援程度
99.5% 需要使用字首 caniuse
20. Focus Within 偽類
如果表單中的任何子項被聚焦，則更改表單的外觀。
HTML
<div class="focus-within">
<form>
<label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br />
<label for="family_name">Family Name:</label> <input id="family_name" type="text" />
</form>
</div>
複製程式碼CSS
form {
border: 3px solid #2d98da;
color: #000000;
padding: 4px;
}
form:focus-within {
background: #f7b731;
color: #000000;
}
複製程式碼DEMO
說明
偽類：：focus-within將對應的樣式應用於父元素（任何子元素被聚焦）。 例如，表單元素內的輸入元素。
瀏覽器支援程度
82.9% IE11或當前版本的Edge不支援。 caniuse
21. 指定元素的全屏
:fullsrcreen 全屏偽類表示瀏覽器處於全屏模式時顯示的元素。
HTML
<div class="container">
<p><em>Click the button below to enter the element into fullscreen mode. </em></p>
<div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
Go Full Screen!
</button>
</div>
複製程式碼CSS
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
複製程式碼DEMO
說明
:fullscreen偽類選擇器用於選擇和設定以全屏模式顯示的元素。
瀏覽器支援程度
85.6%
22.漸變文字
為文字提供漸變顏色。
HTML
<p class="gradient-text">Gradient text</p>
複製程式碼CSS
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
複製程式碼DEMO
瀏覽器支援程度
94.1%
23. 漸變跟蹤
一種懸停效果，其中漸變跟隨滑鼠游標。
HTML
<button class="button">
<span>Hover me I'm awesome</span>
</button>
複製程式碼CSS
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: white;
}
.button {
position: relative;
appearance: none;
background: #f72359;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
span {
position: relative;
pointer-events: none;
}
&::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
&:hover::before {
--size: 400px;
}
}
複製程式碼document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft
const y = e.pageY - e.target.offsetTop
e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
複製程式碼DEMO
瀏覽器支援程度
91.6% 需要使用 js caniuse
24. :not 偽類選擇器
:not 偽選擇器對於設定一組元素的樣式非常有用，同時保留最後一個（指定的）元素的樣式。
HTML
<ul class="css-not-selector-shortcut">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
複製程式碼CSS
.css-not-selector-shortcut {
display: flex;
}
ul {
padding-left: 0;
}
li {
list-style-type: none;
margin: 0;
padding: 0 0.75rem;
}
li:not(:last-child) {
border-right: 2px solid #d2d5e4;
}
複製程式碼DEMO
說明
li:not(:last-child)設定除last：child之外的所有li元素的樣式，所以最後一個元素右側沒有 border.
瀏覽器支援程度
99.9% caniuse
25.溢位滾動漸變
給溢位元素新增漸變，以更好地指示要滾動的內容。
HTLM
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit? <br />
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</div>
</div>
複製程式碼CSS
.overflow-scroll-gradient {
position: relative;
}
.overflow-scroll-gradient::after {
content: '';
position: absolute;
bottom: 0;
width: 240px;
height: 25px;
background: linear-gradient(
rgba(255, 255, 255, 0.001),
white
); /* transparent keyword is broken in Safari */
pointer-events: none;
}
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 240px;
height: 200px;
padding: 15px;
line-height: 1.2;
}
複製程式碼DEMO
說明
::after定義一個偽元素用來展示漸變效果background-image: linear-gradient(...)新增一個從透明變為白色（從上到下）的線性漸變。pointer-events: none指定偽元素不能是滑鼠事件的目標，後面的文字仍然是可選擇/互動的。
瀏覽器支援程度
97.5% caniuse
26.給文字新增漂亮的下劃線
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
複製程式碼CSS
.pretty-text-underline {
display: inline;
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
.pretty-text-underline::selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
複製程式碼DEMO
瀏覽器支援程度
27. 重置所有樣式
使用一個屬性將所有樣式重置為預設值。 這不會影響direction和unicode-bidi屬性。
HTML
<div class="reset-all-styles">
<h5>Title</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
iure, consequatur velit sit?
</p>
</div>
複製程式碼CSS
.reset-all-styles {
all: initial;
}
複製程式碼DEMO
說明
all 屬性允許您將所有樣式（繼承或不繼承）重置為預設值。
瀏覽器支援程度
91.2% caniuse
28. 形狀分隔符
使用SVG形狀分割兩個不同的塊以建立更有趣的視覺外觀。
HTML
<div class="shape-separator"></div>
複製程式碼CSS
.shape-separator {
position: relative;
height: 48px;
background: #333;
}
.shape-separator::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
position: absolute;
width: 100%;
height: 12px;
bottom: 0;
}
複製程式碼DEMO
說明
background-image: url(...)新增SVG形狀（24x12三角形）作為偽元素的背景影像，預設情況下重複。 它必須與要分割的塊顏色相同。對於其他形狀，我們可以使用SVG的URL編碼器。
瀏覽器支援程度
99.7% caniuse
29. 系統字型
HTML
<p class="system-font-stack">This text uses the system font.</p>
複製程式碼CSS
.system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
複製程式碼DEMO
說明 瀏覽器會對字型進行逐個查詢，如果找到的話就是用當前的，如果找不到字型（在系統上或在CSS中定義），則繼續往後查詢。
-apple-system在iOS和macOS上使用（但不是Chrome)BlinkMacSystemFont用於macOS ChromeSegoe UI用於Windows 10Roboto在Android上使用Oxygen-Sans在Linux KDE上使用Ubuntu用於UbuntuCantarell在GNOME Shell的Linux上使用Helvetica Neue and Helvetica用於macOS 10.10及更低版本Arial作業系統廣泛支援的字型sans-serif如果不支援其他任何字型，則降級使用 sans-serif 通用字型
瀏覽器支援程度 100%
30. css 開關
只使用 css 來實現
HTMl
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
複製程式碼CSS
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
background-color: #7983ff;
}
.offscreen {
position: absolute;
left: -9999px;
}
複製程式碼DEMO
瀏覽器支援程度 97.7% 需要使用字首
31. 用 css 畫一個三角形
HTML
<div class="triangle"></div>
複製程式碼CSS
.triangle {
width: 0;
height: 0;
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
複製程式碼DEMO
瀏覽器支援程度 100%；
32. 斑馬條紋列表
建立具有交替背景顏色的列表，這對於區分各行間的內容很有用。
HTML
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>
複製程式碼CSS
li:nth-child(odd) {
background-color: #eee;
}
複製程式碼DEMO
瀏覽器支援程度 99.9% caniuse
動畫
33.彈跳 loading 動畫
HTML
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
複製程式碼CSS
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
複製程式碼DEMO
瀏覽器支援程度97.4% caniuse
34. 按鈕邊框動畫
建立一個滑鼠懸停的邊框動畫
HTML
<div class="button-border"><button class="button">Submit</button></div>
複製程式碼CSS
.button {
background-color: #c47135;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative;
}
.button:before,
.button:after {
border: 0 solid transparent;
transition: all 0.25s;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
.button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px;
}
.button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px;
}
.button:hover {
background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
height: 100%;
width: 100%;
}
複製程式碼DEMO
說明 使用：before和：after偽元素作為在懸停時設定動畫的邊框。
瀏覽器支援程度 100%.
35.甜甜圈旋轉器
建立一個甜甜圈旋轉器，可用於等待內容的載入。
DEMO
HTML
<div class="donut"></div>
複製程式碼CSS
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
複製程式碼說明
對於整個元素使用半透明邊框，然後設定一側的邊框顏色 border-left-color: #7983ff;,最後使用動畫旋轉整個元素。
瀏覽器支援程度** 97.4%** 需要使用字首。
caniuse1 https://caniuse.com/#feat=transforms2d
36.緩動效果
DEMO
HTML
<div class="easing-variables">Hover</div>
複製程式碼CSS
:root {
/* Place variables in here to use globally */
}
.easing-variables {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
display: inline-block;
width: 75px;
height: 75px;
padding: 10px;
color: white;
line-height: 50px;
text-align: center;
background: #333;
transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
transform: rotate(45deg);
}
複製程式碼瀏覽器支援程度** 91.6% ** caniuse css-variables
37.高度過度
當元素的高度未知時，將元素的高度從0轉換為自動。
DEMO
HTML
<div class="trigger">
Hover me to see a height transition.
<div class="el">content</div>
</div>
複製程式碼CSS
.el {
transition: max-height 0.5s;
overflow: hidden;
max-height: 0;
}
.trigger:hover > .el {
max-height: var(--max-height);
}
複製程式碼JAVASCRIPT
var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
複製程式碼說明
瀏覽器支援程度 91.6% caniuse css-variables
- 注意：將會導致所有動畫幀重排，過度中如果元素下方有大量元素，則可能會出現滯後現象。
38.懸停陰影動畫
在文字上懸停時，在文字週圍建立一個陰影框動畫效果。
HTML
<p class="hover-shadow-box-animation">Box it!</p>
複製程式碼CSS
.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
margin: 10px;
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
transform: scale(1.2);
}
複製程式碼瀏覽器支援程度97.3%
39.懸停下滑線動畫
當文字懸停時，建立文字下劃線動畫效果。
DEMO
HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>
複製程式碼CSS
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
複製程式碼說明
display: inline-block使p成為內聯塊，以防止下劃線跨越整行寬度而不僅僅是文字內容。position: relative設定父元素為相對定位::after定義一個偽元素position: absolute將偽元素脫離文件六，並將其相對於父元素定位width: 100%確保偽元素和父元素的寬度一致。transform: scaleX(0)最初將偽元素縮放為0，因此他是看不見的。bottom: 0 and left: 0將偽元素放在父元素的左下角。transition: transform 0.25s ease-out設定動畫效果為ease-out,並且在0.25秒內完成。transform-origin: bottom right變換中心點到父元素的右下角。:hover::after然後使用scaleX（1）將寬度轉換為100％，然後將中心點更改為左下角，允許它在懸停時從另一個方向轉換出來。
瀏覽器支援程度97.5%
互動
40. 禁用選擇
使用 css 讓內容無法選取。
DEMO
HTML
<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
複製程式碼CSS
.unselectable {
user-select: none;
}
複製程式碼說明
user-select: none 指定無法選擇文字
瀏覽器支援程度93.2% （需要使用字首，這並不是防止使用者複製內容的安全方法。）
caniuse - feat=user-select-none
41. 彈出選單
在懸停和焦點上彈出互動式選單。
HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
複製程式碼CSS
.reference {
position: relative;
background: tomato;
width: 100px;
height: 100px;
}
.popout-menu {
position: absolute;
visibility: hidden;
left: 100%;
background: #333;
color: white;
padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
visibility: visible;
}
複製程式碼說明
left: 100%彈出選單從左側偏移其父級寬度的100％。visibility: hidden.reference:hover > .popout-menu滑鼠懸停時，.popout-menu 顯示.reference:focus > .popout-menu聚焦時，.popout-menu 顯示.reference:focus-within > .popout-menu確保在焦點位於參考範圍內時顯示彈出視窗。
瀏覽器支援程度 100%;
42.兄弟元素淡化
懸停時兄弟節點淡化顯示.
DEMO
HTML
<div class="sibling-fade">
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
<span>Item 5</span> <span>Item 6</span>
</div>
複製程式碼CSS
span {
padding: 0 1rem;
transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
複製程式碼說明
transition: opacity 0.2s設定0.2秒的淡化動畫。.sibling-fade:hover span:not(:hover)當父級懸停時，選擇當前未懸停的span子項並將其透明度更改為0.5。
瀏覽器支援程度 97.5%；
其他
43. 計算函式 Calc()
函式calc（）允許使用數學表示式定義CSS值，屬性採用的值是數學表示式的結果。
DEMO
如果你想在右側和底部對齊背景影像，則只能使用直線長度值。 所以現在可以使用calc（）函式.
HTML
<div class="box-example"></div>
複製程式碼CSS
.box-example {
height: 280px;
background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
background-position: calc(100% - 20px) calc(100% - 20px);
}
複製程式碼說明
- 允許加法，減法，乘法和除法。
- 可以為表示式中的每個值使用不同的單位（例如，畫素和百分比）。
- 允許巢狀calc（）函式。
- 它可用於任何允許，，，
瀏覽器支援程度 97.0%
44. css 自定義變數
包含要重用的特定值的CSS變數。
HTML
<p class="custom-variables">CSS is awesome!</p>
複製程式碼CSS
:root {
/* Place variables within here to use the variables globally. */
}
.custom-variables {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
複製程式碼DEMO
說明
--variable-name:用這樣的格式來宣告變數。var(--variable-name)使用此函式在整個文件中重用變數。
瀏覽器支援程度 91.6%
更多精彩好玩有用的前端內容，請關注公眾號《前端技術江湖》