效果預覽

在線演示

按下右側的“點擊預覽”按鈕在當前頁面預覽，點擊鏈接全屏預覽。

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

可交互視頻教程

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

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/c/cwrJys7

源代碼下載

本地下載

請從 github 下載。

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

代碼解讀

定義 dom，只有一個元素：

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

居中顯示：

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

畫出中間的實心圓：

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

畫出圓環：

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

用偽元素 ::before 畫出動畫用到的圓環：

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

增加動畫效果：

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

優化動畫——增加漸淡和彈性效果：

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

最后，用偽元素 ::after 再畫出一個動的圓環：

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

大功告成！

知識點

• 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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。