純css3 動(dòng)畫-光標(biāo)小下劃線跟隨

圖網(wǎng)在做項(xiàng)目的時(shí)候，為了更好的體驗(yàn)效果，通常我們會(huì)給頁(yè)面加入各種動(dòng)畫，我個(gè)人是非常喜歡css3 動(dòng)畫的，下面演示一下簡(jiǎn)單的css3 動(dòng)畫。

html

<ul>
<li>光標(biāo)小下劃線跟隨</li>
<li>光標(biāo)小下劃線跟隨</li>
<li>光標(biāo)小下劃線跟隨</li>
<li>光標(biāo)小下劃線跟隨</li>
<li>光標(biāo)小下劃線跟隨</li>
</ul>

css

li{ display: inline-block; position: relative; padding: 0 10px;}
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
width: 100%;
left: 0;
}
li:hover ~ li::before { left: 0; }

我們這里借助 ~ 選擇符，對(duì)于當(dāng)前的hover li ，其對(duì)應(yīng)偽元素的下劃線的定位是 left:100%, 而 li:hover~li::before,它的定位是 left:0。

是不是很簡(jiǎn)單，學(xué)習(xí)的最終目的是運(yùn)用，切圖網(wǎng)不一樣的實(shí)戰(zhàn)項(xiàng)目學(xué)習(xí)。

<html>
<head>
<title>文字跟隨鼠標(biāo)</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 絕對(duì)定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠標(biāo)當(dāng)前在頁(yè)面上的位置
var step=10; //字符顯示間距，為了好看，step=0則字符顯示沒(méi)有間距
var flag=0;
var message="Cascading Style Sheet"; //跟隨鼠標(biāo)要顯示的字符串
message=message.split(""); //將字符串分割為字符數(shù)組
var xpos=new Array() //存儲(chǔ)每個(gè)字符的x位置的數(shù)組
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存儲(chǔ)每個(gè)字符的y位置的數(shù)組
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //動(dòng)態(tài)生成顯示每個(gè)字符span標(biāo)記,
//使用span來(lái)標(biāo)記字符，是為了方便使用CSS，并可以自由的絕對(duì)定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //從事件得到鼠標(biāo)光標(biāo)在頁(yè)面上的位置
x=(document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y=(document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() { //重定位每個(gè)字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //從尾向頭確定字符的位置，每個(gè)字符為前一個(gè)字符“歷史”水平坐標(biāo)+step間隔，
//這樣隨著光標(biāo)移動(dòng)事件，就能得到一個(gè)動(dòng)態(tài)的波浪狀的顯示效果
ypos[i]=ypos[i-1]; //垂直坐標(biāo)為前一字符的歷史“垂直”坐標(biāo)，后一個(gè)字符跟蹤前一個(gè)字符運(yùn)動(dòng)
}
xpos[0]=x+step //第一個(gè)字符的坐標(biāo)位置緊跟鼠標(biāo)光標(biāo)
ypos[0]=y
//上面的算法將保證，如果鼠標(biāo)光標(biāo)移動(dòng)到新位置，則連續(xù)調(diào)用makenake將會(huì)使這些字符一個(gè)接一個(gè)的移動(dòng)的新位置
// 該算法顯示字符串就有點(diǎn)象人類的游行隊(duì)伍一樣，

for (i=0; i<=message.length-1; i++) {
var thisspan=eval("span"+(i)+".style"); //妙用eval根據(jù)字符串得到該字符串表示的對(duì)象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan=eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //設(shè)置10毫秒的定時(shí)器來(lái)連續(xù)調(diào)用makesnake(),時(shí)刻刷新顯示字符串的位置。
}
document.onmousemove=handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>

局

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

可在 CodePen 上查看真實(shí)效果和編輯代碼

說(shuō)明

box-sizing：當(dāng)元素設(shè)置為border-box時(shí)，即便設(shè)置了padding或border也不會(huì)改變?cè)氐膶挾群透叨取?/li>
box-sizing：設(shè)置inherit使元素繼承父級(jí)的box-sizing規(guī)則。

瀏覽器支持情況

99.9% 查看本條 caniuse

2. 清除浮動(dòng)更好的方式

無(wú)需借助輔助元素進(jìn)行浮動(dòng)的清除。

注意：這僅在使用float布局時(shí)才有用。實(shí)際場(chǎng)景中請(qǐng)考慮使用Flexbox布局或者網(wǎng)格布局。

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

可在 CodePen 上查看真實(shí)效果和編輯代碼

瀏覽器支持情況

100%

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

3. 不變寬高比

給定寬度可變的元素，它將確保其高度以響應(yīng)方式保持成比例（即，其寬高比保持不變）。

DEMO

可在 CodePen 上查看真實(shí)效果和編輯代碼

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;}

說(shuō)明

width:50% 只設(shè)置父級(jí)元素的寬度
::before 為父級(jí)元素定義一個(gè)偽元素
padding-top:100%; 設(shè)置偽元素的內(nèi)上邊距，這里的百分比的值是按照寬度計(jì)算的，所以會(huì)呈現(xiàn)為一個(gè)響應(yīng)式的元素塊。
此方法還允許將內(nèi)容正常放置在元素內(nèi)。

瀏覽器支持情況

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

可在 CodePen 上查看真實(shí)效果和編輯代碼

display：table 使.center元素的行為類似于 HTML元素。
設(shè)置.center的寬高為100%，使其填滿父元素。
display：table-cell, 設(shè)置'.center > span'的table-cell允許元素表現(xiàn)得像HTML元素。
text-align: center 使子元素水平居中。
vertical-align: middle 使子元素垂直居中。
外部父級(jí)必須有固定的寬高。瀏覽器支持情況100%查看本條 caniuse
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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

display: flex :啟動(dòng)flex 布局
justify-content: space-between：
均勻地水平分配子元素。第一個(gè)子元素位于左邊緣，而最后一個(gè)子元素位于右邊緣?；蛘?，使用justify-content：space-around來(lái)分配子節(jié)點(diǎn)周圍的空間，而不是它們之間。

瀏覽器支持情況99.5%

需要前綴才能獲得全面支持。 caniuse

6. 讓圖片在容器中顯示的更舒適設(shè)置圖像在其容器內(nèi)的適合度和位置，同時(shí)保留其寬高比。以前只能使用背景圖像和background-size屬性來(lái)實(shí)現(xiàn)。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

object-fit:contain 容器內(nèi)顯示整個(gè)圖像，并且保持寬高比
object-fit:cover 用圖像填充容器，并保持寬高比
object-position:[x][y] 對(duì)圖像的顯示部位進(jìn)行調(diào)整

瀏覽器支持程度95.5% caniuse7. 使用 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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

display:flex 啟用 flex 局部
justify-content:center 子元素水平居中
align-items:center 子元素垂直居中

瀏覽器支持程度99.5% （需要使用前綴） caniuse8.將元素垂直居中于另一個(gè)元素。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明使用：before偽元素的樣式垂直對(duì)齊內(nèi)聯(lián)元素而不更改其position屬性。瀏覽器支持程度99.9% caniuse9. 使用網(wǎng)格居中使用網(wǎng)格水平垂直居中子元素.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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

display:grid 啟用網(wǎng)格布局
justify-content:center 使子元素水平居中
align-items:center 使子元素垂直居中

瀏覽器支持程度92.3% caniuse10. 使最后一項(xiàng)占滿剩余高度通過(guò)為最后一個(gè)元素提供當(dāng)前視口中剩余的可用空間，即使在調(diào)整窗口大小時(shí)，也可以利用可用的視口空間。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

height:100% 將容器的高度設(shè)為視口的高度
display:flex 啟用 flex
flex-direction:column 將項(xiàng)目的順序設(shè)置成從上到下
flex-grow:1 flexbox會(huì)將容器的剩余可用空間應(yīng)用于最后一個(gè)子元素。父級(jí)必須具有視口高度。flex-grow：1可以應(yīng)用于第一個(gè)或第二個(gè)元素，它將具有所有可用空間。

瀏覽器支持程度99.5% 需要使用前綴 caniuse11. 屏外隱藏元素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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

刪除所有邊框
使用 clip 隱藏元素
設(shè)置寬高為1px
使用margin：-1px取消元素的高度和寬度
隱藏元素的溢出
移除所有的padding
絕對(duì)定位元素，使其不占用DOM中的空間
*

瀏覽器支持程度100% 需要使用前綴 caniuse(雖然cilp已被廢棄，但較新的clip-path 目前對(duì)瀏覽器的支持非常有限。)12. 使用transform居中子元素使用 position:absoluteandtransform:translate() 進(jìn)行居中，不需要知道父級(jí)和子元素的寬高，因此它非常適合響應(yīng)式應(yīng)用程序。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可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度97.7% 需要使用前綴 caniuse視覺(jué)13.多行文本截?cái)囡@示如果文本長(zhǎng)于一行，則將截?cái)鄋行，并以漸變結(jié)束。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

overflow:hidden 防止內(nèi)容溢出
width:400px 確保元素有尺寸
height:109.2px 計(jì)算的高度值，它等于font-size * line-height * numberOfLines（在這種情況下為26 * 1.4 * 3=109.2）
height:36.4px 漸變?nèi)萜鞯挠?jì)算值，它等于font-size * line-height（在這種情況下為26 * 1.4=36.4）
background:linear-gradient(to right,rgba(0,0,0,0),#f5f6f9 50% 漸變從透明到漸變從透明到＃f5f6f9

瀏覽器支持程度97.5% caniuse14. 畫一個(gè)圓使用純CSS創(chuàng)建圓形。HTML
<div class="circle"></div>
CSS
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
DEMO可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度97.7% caniuse15. 列表計(jì)數(shù)器計(jì)數(shù)器本質(zhì)上是由CSS維護(hù)的變量，其值可以通過(guò)CSS規(guī)則遞增以跟蹤它們被使用的次數(shù)。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明你現(xiàn)在可以使用任何類型的html 標(biāo)簽創(chuàng)建有序列表。

counter-reset 初始化計(jì)數(shù)器，該值是計(jì)數(shù)器的名稱。默認(rèn)情況下，計(jì)數(shù)器從0開始。此屬性還可用于將其值更改為任何特定數(shù)字。
counter-increment 用于可數(shù)的元素。一旦計(jì)數(shù)器重置初始化，計(jì)數(shù)器的值可以增加或減少。
counter(name,style)顯示節(jié)計(jì)數(shù)器的值。通常用于內(nèi)容屬性。此函數(shù)可以接收兩個(gè)參數(shù)，第一個(gè)作為計(jì)數(shù)器的名稱，第二個(gè)參數(shù)表示占位內(nèi)容，例如 3.1的小數(shù)點(diǎn)。
CSS計(jì)數(shù)器對(duì)于制作輪廓列表特別有用，因?yàn)橛?jì)數(shù)器的新實(shí)例是在子元素中自動(dòng)創(chuàng)建的。使用counters（）函數(shù)，可以在不同級(jí)別的嵌套計(jì)數(shù)器之間插入分隔文本。

瀏覽器支持程度99.9% caniuse16.自定義滾動(dòng)條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可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度90.7% caniuse17. 自定義文本選擇的樣式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可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度86.5% caniuse18. 創(chuàng)建動(dòng)態(tài)陰影創(chuàng)建類似于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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

::after 定義一個(gè)偽元素
position:absolute 使偽元素脫離文檔流并相對(duì)于父級(jí)定位
width:100%andheight:100% 對(duì)偽元素進(jìn)行大小調(diào)整以填充其父元素的大小，使其大小相等。
background:inherit 使偽元素繼承父級(jí)的線性漸變
top:0.5rem 將偽元素相對(duì)于其父元素略微偏移。
filter:blur(0.4rem) 設(shè)置偽元素模糊效果，以創(chuàng)建下方陰影效果。
opacity:0.7 設(shè)置偽元素透明度
z-index:-1 將偽元素定位在父元素后面但在背景前面。

瀏覽器支持程度94.2% 需要使用前綴 caniuse19. 蝕刻文字效果創(chuàng)建一種效果，其中文本看起來(lái)像“蝕刻”或雕刻在背景中。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

text-shadow:02pxwhite 從原點(diǎn)位置創(chuàng)建一個(gè)水平偏移0px和垂直偏移2px的白色陰影。
背景必須比陰影更暗，效果才更明顯。

瀏覽器支持程度99.5% 需要使用前綴 caniuse20. Focus Within 偽類如果表單中的任何子項(xiàng)被聚焦，則更改表單的外觀。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

偽類：：focus-within 將對(duì)應(yīng)的樣式應(yīng)用于父元素（任何子元素被聚焦）。例如，表單元素內(nèi)的輸入元素。

瀏覽器支持程度82.9% IE11或當(dāng)前版本的Edge不支持。caniuse21. 指定元素的全屏:fullsrcreen 全屏偽類表示瀏覽器處于全屏模式時(shí)顯示的元素。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

:fullscreen 偽類選擇器用于選擇和設(shè)置以全屏模式顯示的元素。

瀏覽器支持程度85.6%屬性詳解caniuse22.漸變文字為文本提供漸變顏色。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可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度94.1%caniuse23. 漸變跟蹤一種懸停效果，其中漸變跟隨鼠標(biāo)光標(biāo)。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可在 CodePen 上查看真實(shí)效果和編輯代碼瀏覽器支持程度91.6% 需要使用 js caniuse24. :not 偽類選擇器:not 偽選擇器對(duì)于設(shè)置一組元素的樣式非常有用，同時(shí)保留最后一個(gè)（指定的）元素的樣式。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可在 CodePen 上查看真實(shí)效果和編輯代碼說(shuō)明

li:not(:last-child) 設(shè)置除last：child之外的所有l(wèi)i元素的樣式，所以最后一個(gè)元素右側(cè)沒(méi)有 border.

瀏覽器支持程度99.9% caniuse25.溢出滾動(dòng)漸變給溢出元素添加漸變，以更好地指示要滾動(dòng)的內(nèi)容。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說(shuō)明

::after 定義一個(gè)偽元素用來(lái)展示漸變效果
background-image:linear-gradient(...) 添加一個(gè)從透明變?yōu)榘咨◤纳系较拢┑木€性漸變。
pointer-events:none 指定偽元素不能是鼠標(biāo)事件的目標(biāo)，后面的文本仍然是可選擇/交互的。

瀏覽器支持程度97.5% caniuse26.給文字添加漂亮的下劃線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;
}
DEMOCodePen上查看和編輯代碼瀏覽器支持程度97.5% caniuse1 caniuse227. 重置所有樣式使用一個(gè)屬性將所有樣式重置為默認(rèn)值。這不會(huì)影響 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;
}
DEMOCodePen上查看和編輯代碼說(shuō)明all 屬性允許您將所有樣式（繼承或不繼承）重置為默認(rèn)值。瀏覽器支持程度91.2% caniuse28. 形狀分隔符使用SVG形狀分割兩個(gè)不同的塊以創(chuàng)建更有趣的視覺(jué)外觀。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;
}
DEMOCodePen上查看和編輯代碼說(shuō)明

background-image:url(...)添加SVG形狀（24x12三角形）作為偽元素的背景圖像，默認(rèn)情況下重復(fù)。它必須與要分割的塊顏色相同。對(duì)于其他形狀，我們可以使用SVG的URL編碼器。

瀏覽器支持程度99.7% caniuse29. 系統(tǒng)字體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;
}
DEMOCodePen上查看和編輯代碼說(shuō)明瀏覽器會(huì)對(duì)字體進(jìn)行逐個(gè)查找，如果找到的話就是用當(dāng)前的，如果找不到字體（在系統(tǒng)上或在CSS中定義），則繼續(xù)往后查找。

-apple-system在iOS和macOS上使用（但不是Chrome)
BlinkMacSystemFont 用于macOS Chrome
SegoeUI 用于Windows 10
Roboto 在Android上使用
Oxygen-Sans 在Linux KDE上使用
Ubuntu 用于Ubuntu
Cantarell 在GNOME Shell的Linux上使用
HelveticaNeueandHelvetica 用于macOS 10.10及更低版本
Arial 操作系統(tǒng)廣泛支持的字體
sans-serif 如果不支持其他任何字體，則降級(jí)使用 sans-serif 通用字體

瀏覽器支持程度 100%30. css 開關(guān)只使用 css 來(lái)實(shí)現(xiàn)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;
}
DEMOCodePen上預(yù)覽和編輯代碼瀏覽器支持程度 97.7% 需要使用前綴caniuse31. 用 css 畫一個(gè)三角形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;
}
DEMOCodePen上預(yù)覽和編輯代碼瀏覽器支持程度 100%；32. 斑馬條紋列表創(chuàng)建具有交替背景顏色的列表，這對(duì)于區(qū)分各行間的內(nèi)容很有用。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;
}
DEMOCodePen上預(yù)覽和編輯代碼瀏覽器支持程度 99.9% caniuse動(dòng)畫33.彈跳 loading 動(dòng)畫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;
}
DEMOCodePen上預(yù)覽和編輯代碼瀏覽器支持程度97.4% caniuse34. 按鈕邊框動(dòng)畫創(chuàng)建一個(gè)鼠標(biāo)懸停的邊框動(dòng)畫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%;
}
DEMOCodePen上預(yù)覽和編輯代碼說(shuō)明使用：before和：after偽元素作為在懸停時(shí)設(shè)置動(dòng)畫的邊框。瀏覽器支持程度 100%.35.甜甜圈旋轉(zhuǎn)器創(chuàng)建一個(gè)甜甜圈旋轉(zhuǎn)器，可用于等待內(nèi)容的加載。DEMOHTML
<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;
}
CodePen上預(yù)覽和編輯代碼說(shuō)明對(duì)于整個(gè)元素使用半透明邊框，然后設(shè)置一側(cè)的邊框顏色 border-left-color:#7983ff;,最后使用動(dòng)畫旋轉(zhuǎn)整個(gè)元素。瀏覽器支持程度* 97.4%* 需要使用前綴。caniuse1 https://caniuse.com/#feat=transforms2dcaniuse2 feat=transforms2d36.緩動(dòng)效果DEMOHTML
<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);
}
CodePen上預(yù)覽和編輯代碼瀏覽器支持程度* 91.6% * caniuse css-variables37.高度過(guò)度當(dāng)元素的高度未知時(shí)，將元素的高度從0轉(zhuǎn)換為自動(dòng)。DEMOCodePen上預(yù)覽和編輯代碼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')
說(shuō)明瀏覽器支持程度 91.6% caniuse css-variables

注意：將會(huì)導(dǎo)致所有動(dòng)畫幀重排，過(guò)度中如果元素下方有大量元素，則可能會(huì)出現(xiàn)滯后現(xiàn)象。

caninuse - css-variablescaninuse - css-transitions38.懸停陰影動(dòng)畫在文本上懸停時(shí)，在文本周圍創(chuàng)建一個(gè)陰影框動(dòng)畫效果。動(dòng)畫效果可在CodePen上預(yù)覽和編輯代碼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%caniuse - feat-transforms3dcaniuse - css-transitions39.懸停下滑線動(dòng)畫當(dāng)文本懸停時(shí)，創(chuàng)建文本下劃線動(dòng)畫效果。DEMO動(dòng)畫效果可在CodePen上預(yù)覽和編輯代碼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;
}
說(shuō)明

display:inline-block 使p成為內(nèi)聯(lián)塊，以防止下劃線跨越整行寬度而不僅僅是文本內(nèi)容。
position:relative 設(shè)置父元素為相對(duì)定位
::after 定義一個(gè)偽元素
position:absolute 將偽元素脫離文檔六，并將其相對(duì)于父元素定位
width:100% 確保偽元素和父元素的寬度一致。
transform:scaleX(0) 最初將偽元素縮放為0，因此他是看不見的。
bottom:0andleft:0 將偽元素放在父元素的左下角。
transition:transform0.25sease-out 設(shè)置動(dòng)畫效果為 ease-out,并且在0.25秒內(nèi)完成。
transform-origin:bottom right 變換中心點(diǎn)到父元素的右下角。
:hover::after 然后使用scaleX（1）將寬度轉(zhuǎn)換為100％，然后將中心點(diǎn)更改為左下角，允許它在懸停時(shí)從另一個(gè)方向轉(zhuǎn)換出來(lái)。

瀏覽器支持程度97.5%caniuse - feat=transforms2dcaniuse - css-transitions交互40. 禁用選擇使用 css 讓內(nèi)容無(wú)法選取。DEMO可在CodePen上預(yù)覽效果和編輯代碼HTML
<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
CSS
.unselectable {
user-select: none;
}
說(shuō)明user-select:none 指定無(wú)法選擇文本瀏覽器支持程度93.2% （需要使用前綴，這并不是防止用戶復(fù)制內(nèi)容的安全方法。）caniuse - feat=user-select-none41. 彈出菜單在懸停和焦點(diǎn)上彈出交互式菜單。可在CodePen上預(yù)覽效果和編輯代碼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;
}
說(shuō)明

left:100% 彈出菜單從左側(cè)偏移其父級(jí)寬度的100％。
visibility:hidden
.reference:hover>.popout-menu 鼠標(biāo)懸停時(shí)，.popout-menu 顯示
.reference:focus>.popout-menu 聚焦時(shí)，.popout-menu 顯示
.reference:focus-within>.popout-menu 確保在焦點(diǎn)位于參考范圍內(nèi)時(shí)顯示彈出窗口。
*

瀏覽器支持程度 100%;42.兄弟元素淡化懸停時(shí)兄弟節(jié)點(diǎn)淡化顯示.DEMO可在CodePen上預(yù)覽效果和編輯代碼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;
}
說(shuō)明

transition:opacity0.2s 設(shè)置0.2秒的淡化動(dòng)畫。
.sibling-fade:hover span:not(:hover)當(dāng)父級(jí)懸停時(shí)，選擇當(dāng)前未懸停的span子項(xiàng)并將其透明度更改為0.5。

瀏覽器支持程度 97.5%；caniuse-feat=css-sel3caniuse-feat=css-transitions其他43. 計(jì)算函數(shù) Calc()函數(shù)calc（）允許使用數(shù)學(xué)表達(dá)式定義CSS值，屬性采用的值是數(shù)學(xué)表達(dá)式的結(jié)果。DEMO可在CodePen上預(yù)覽效果和編輯代碼如果你想在右側(cè)和底部對(duì)齊背景圖像，則只能使用直線長(zhǎng)度值。所以現(xiàn)在可以使用calc（）函數(shù).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);
}
說(shuō)明

允許加法，減法，乘法和除法。
可以為表達(dá)式中的每個(gè)值使用不同的單位（例如，像素和百分比）。
允許嵌套calc（）函數(shù)。
它可用于任何允許，，，，，或的屬性，如width，height，font-size，top等。
*

瀏覽器支持程度 97.0%caniuse - feat=calc44. 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可在CodePen上預(yù)覽效果和編輯代碼說(shuō)明

--variable-name: 用這樣的格式來(lái)聲明變量。
var(--variable-name) 使用此函數(shù)在整個(gè)文檔中重用變量。

瀏覽器支持程度 91.6%caniuse - feat=css-variables

原文鏈接：https://mp.weixin.qq.com/s/Pw3VgFpijTYRkJyYPvlJgA
作者：前端技術(shù)江湖

在線咨詢

上一篇：陜西漢唐：以公證的名義圍獵民營(yíng)資產(chǎn)
下一篇：雞肋般的HTML5拯救不了電視游戲

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

純css3 動(dòng)畫-光標(biāo)小下劃線跟隨

局

1. 盒模型重置

2. 清除浮動(dòng)更好的方式

3. 不變寬高比

4.使用表格居中

您的項(xiàng)目需求