純css3 動畫-光標小下劃線跟隨

圖網在做項目的時候，為了更好的體驗效果，通常我們會給頁面加入各種動畫，我個人是非常喜歡css3 動畫的，下面演示一下簡單的css3 動畫。

html

<ul>
<li>光標小下劃線跟隨</li>
<li>光標小下劃線跟隨</li>
<li>光標小下劃線跟隨</li>
<li>光標小下劃線跟隨</li>
<li>光標小下劃線跟隨</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; }

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

是不是很簡單，學習的最終目的是運用，切圖網不一樣的實戰項目學習。

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

for (i=0; i<=message.length-1; i++) {
var thisspan=eval("span"+(i)+".style"); //妙用eval根據字符串得到該字符串表示的對象
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) //設置10毫秒的定時器來連續調用makesnake(),時刻刷新顯示字符串的位置。
}
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 上查看真實效果和編輯代碼

說明

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

可在 CodePen 上查看真實效果和編輯代碼

瀏覽器支持情況

100%

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

3. 不變寬高比

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

DEMO

可在 CodePen 上查看真實效果和編輯代碼

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

可在 CodePen 上查看真實效果和編輯代碼

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

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可在 CodePen 上查看真實效果和編輯代碼說明

object-fit:contain 容器內顯示整個圖像，并且保持寬高比
object-fit:cover 用圖像填充容器，并保持寬高比
object-position:[x][y] 對圖像的顯示部位進行調整

瀏覽器支持程度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 上查看真實效果和編輯代碼說明

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

瀏覽器支持程度99.5% （需要使用前綴） caniuse8.將元素垂直居中于另一個元素。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 上查看真實效果和編輯代碼說明使用：before偽元素的樣式垂直對齊內聯元素而不更改其position屬性。瀏覽器支持程度99.9% caniuse9. 使用網格居中使用網格水平垂直居中子元素.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 上查看真實效果和編輯代碼說明

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

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

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

瀏覽器支持程度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 上查看真實效果和編輯代碼說明

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

瀏覽器支持程度100% 需要使用前綴 caniuse(雖然cilp已被廢棄，但較新的clip-path 目前對瀏覽器的支持非常有限。)12. 使用transform居中子元素使用 position:absoluteandtransform: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可在 CodePen 上查看真實效果和編輯代碼瀏覽器支持程度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可在 CodePen 上查看真實效果和編輯代碼說明

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% caniuse14. 畫一個圓使用純CSS創建圓形。HTML
<div class="circle"></div>
CSS
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
DEMO可在 CodePen 上查看真實效果和編輯代碼瀏覽器支持程度97.7% caniuse15. 列表計數器計數器本質上是由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可在 CodePen 上查看真實效果和編輯代碼說明你現在可以使用任何類型的html 標簽創建有序列表。

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

瀏覽器支持程度99.9% caniuse16.自定義滾動條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 上查看真實效果和編輯代碼瀏覽器支持程度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 上查看真實效果和編輯代碼瀏覽器支持程度86.5% caniuse18. 創建動態陰影創建類似于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 上查看真實效果和編輯代碼說明

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

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

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

瀏覽器支持程度99.5% 需要使用前綴 caniuse20. 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可在 CodePen 上查看真實效果和編輯代碼說明

偽類：：focus-within 將對應的樣式應用于父元素（任何子元素被聚焦）。例如，表單元素內的輸入元素。

瀏覽器支持程度82.9% IE11或當前版本的Edge不支持。caniuse21. 指定元素的全屏: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可在 CodePen 上查看真實效果和編輯代碼說明

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

瀏覽器支持程度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 上查看真實效果和編輯代碼瀏覽器支持程度94.1%caniuse23. 漸變跟蹤一種懸停效果，其中漸變跟隨鼠標光標。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 上查看真實效果和編輯代碼瀏覽器支持程度91.6% 需要使用 js caniuse24. :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可在 CodePen 上查看真實效果和編輯代碼說明

li:not(:last-child) 設置除last：child之外的所有li元素的樣式，所以最后一個元素右側沒有 border.

瀏覽器支持程度99.9% caniuse25.溢出滾動漸變給溢出元素添加漸變，以更好地指示要滾動的內容。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% 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. 重置所有樣式使用一個屬性將所有樣式重置為默認值。這不會影響 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上查看和編輯代碼說明all 屬性允許您將所有樣式（繼承或不繼承）重置為默認值。瀏覽器支持程度91.2% caniuse28. 形狀分隔符使用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;
}
DEMOCodePen上查看和編輯代碼說明

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

瀏覽器支持程度99.7% caniuse29. 系統字體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上查看和編輯代碼說明瀏覽器會對字體進行逐個查找，如果找到的話就是用當前的，如果找不到字體（在系統上或在CSS中定義），則繼續往后查找。

-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 操作系統廣泛支持的字體
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;
}
DEMOCodePen上預覽和編輯代碼瀏覽器支持程度 97.7% 需要使用前綴caniuse31. 用 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;
}
DEMOCodePen上預覽和編輯代碼瀏覽器支持程度 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;
}
DEMOCodePen上預覽和編輯代碼瀏覽器支持程度 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;
}
DEMOCodePen上預覽和編輯代碼瀏覽器支持程度97.4% caniuse34. 按鈕邊框動畫創建一個鼠標懸停的邊框動畫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上預覽和編輯代碼說明使用：before和：after偽元素作為在懸停時設置動畫的邊框。瀏覽器支持程度 100%.35.甜甜圈旋轉器創建一個甜甜圈旋轉器，可用于等待內容的加載。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上預覽和編輯代碼說明對于整個元素使用半透明邊框，然后設置一側的邊框顏色 border-left-color:#7983ff;,最后使用動畫旋轉整個元素。瀏覽器支持程度* 97.4%* 需要使用前綴。caniuse1 https://caniuse.com/#feat=transforms2dcaniuse2 feat=transforms2d36.緩動效果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上預覽和編輯代碼瀏覽器支持程度* 91.6% * caniuse css-variables37.高度過度當元素的高度未知時，將元素的高度從0轉換為自動。DEMOCodePen上預覽和編輯代碼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

注意：將會導致所有動畫幀重排，過度中如果元素下方有大量元素，則可能會出現滯后現象。

caninuse - css-variablescaninuse - css-transitions38.懸停陰影動畫在文本上懸停時，在文本周圍創建一個陰影框動畫效果。動畫效果可在CodePen上預覽和編輯代碼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.懸停下滑線動畫當文本懸停時，創建文本下劃線動畫效果。DEMO動畫效果可在CodePen上預覽和編輯代碼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:0andleft:0 將偽元素放在父元素的左下角。
transition:transform0.25sease-out 設置動畫效果為 ease-out,并且在0.25秒內完成。
transform-origin:bottom right 變換中心點到父元素的右下角。
:hover::after 然后使用scaleX（1）將寬度轉換為100％，然后將中心點更改為左下角，允許它在懸停時從另一個方向轉換出來。

瀏覽器支持程度97.5%caniuse - feat=transforms2dcaniuse - css-transitions交互40. 禁用選擇使用 css 讓內容無法選取。DEMO可在CodePen上預覽效果和編輯代碼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-none41. 彈出菜單在懸停和焦點上彈出交互式菜單。可在CodePen上預覽效果和編輯代碼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可在CodePen上預覽效果和編輯代碼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:opacity0.2s 設置0.2秒的淡化動畫。
.sibling-fade:hover span:not(:hover)當父級懸停時，選擇當前未懸停的span子項并將其透明度更改為0.5。

瀏覽器支持程度 97.5%；caniuse-feat=css-sel3caniuse-feat=css-transitions其他43. 計算函數 Calc()函數calc（）允許使用數學表達式定義CSS值，屬性采用的值是數學表達式的結果。DEMO可在CodePen上預覽效果和編輯代碼如果你想在右側和底部對齊背景圖像，則只能使用直線長度值。所以現在可以使用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（）函數。
它可用于任何允許，，，，，或的屬性，如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上預覽效果和編輯代碼說明

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

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

純css3 動畫-光標小下劃線跟隨

局

1. 盒模型重置

2. 清除浮動更好的方式

3. 不變寬高比

4.使用表格居中

您的項目需求