效果預(yù)覽

在線演示

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。

https://codepen.io/zhang-ou/pen/erRzzR

可交互視頻教程

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

https://scrimba.com/c/cwrJys7

源代碼下載

本地下載

請(qǐng)從 github 下載。

https://github.com/comehope/front-end-daily-challenges/tree/master/011-ripple-pulse-loader-animation

代碼解讀

定義 dom，只有一個(gè)元素：

<div class="circle"></div>

居中顯示：

html, body, .circle {height: 100%;display: flex;align-items: center;justify-content: center;background-color: black; }

畫(huà)出中間的實(shí)心圓：

:root {--innerRadius: 2em; }.circle {width: calc(var(--innerRadius) * 2);height: calc(var(--innerRadius) * 2);background-color: lime;border-radius: 50%; }

畫(huà)出圓環(huán)：

.circle {box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) black,0 0 0 var(--innerRadius) lime; }

用偽元素 ::before 畫(huà)出動(dòng)畫(huà)用到的圓環(huán)：

.circle::before {content: '';position: absolute;width: calc(var(--innerRadius) * 2 * 2);height: calc(var(--innerRadius) * 2 * 2);border: 2px solid lime;border-radius: 50%; }

增加動(dòng)畫(huà)效果：

.circle::beforeanimation: pulse 2s linear infinite; }@keyframes pulse {from {transform: scale(1);}to {transform: scale(2);} }

優(yōu)化動(dòng)畫(huà)——增加漸淡和彈性效果：

.circle::beforeanimation: pulse 2s ease-out infinite; }@keyframes pulse {from {filter: opacity(0.9);}to {filter: opacity(0);} }

最后，用偽元素 ::after 再畫(huà)出一個(gè)動(dòng)的圓環(huán)：

.circle::after {content: '';position: absolute;width: calc(var(--innerRadius) * 2 * 2);height: calc(var(--innerRadius) * 2 * 2);border: 2px solid lime;border-radius: 50%;animation: pulse 2s ease-out infinite; }.circle::after {animation-delay: 1s; }

大功告成！

知識(shí)點(diǎn)

• variables https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables
• calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
• animation-timing-function https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
• filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functions
• box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

原文地址：https://segmentfault.com/a/1190000014700727

總結(jié)

以上是生活随笔為你收集整理的如何用纯 CSS 创作一个荧光脉冲 loader 特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。