我們傳統的前端更多的是用javascript實現各種復雜動畫，自從有了Css3 transition和animation以來,前端開發在動畫這一塊有了更高的自由度和格局,對動畫的開發也越來越容易。這篇文章就讓我們匯總一下使用Css3實現的各種特效。這篇文章參考《css揭秘》這本書，并作出了自己的總結，希望能讓大家更有收獲，也強烈推薦大家看看這本書，你值得擁有。

我們將學到

• Css3
• outline
• radial-gradient
• linear-gradient
• box-shadow

---

程序員必讀

Css3編碼技巧

1.實現內部虛線邊框

知識點：outline

核心代碼

.dash-border{ width: 200px; height: 100px; line-height: 100px; outline: 1px dashed #fff; outline-offset: -10px;}復制代碼

2.邊框內圓角的實現

知識點：box-shadow

核心代碼

.radius-border{ margin-top: 20px; width: 180px; height: 80px; box-shadow: 0 0 0 10px gray;}復制代碼

3.實現條紋背景與進度條

知識點：linear-gradient,repeating-linear-gradient

核心代碼

/* 上 */background: linear-gradient(to right,#fb3 50%,#58a 0);background-size: 40px 100%;box-shadow: inset 0 0 3px #555;/* 中 */background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);background-size: 40px 40px;/* 下 (可以實現任意角度的漸變，45°時顯示效果最好) */background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);復制代碼

4.復雜的背景圖案

知識點：linear-gradient,repeating-linear-gradient,radial-gradient

由于第二個圖會有復雜的隨機動畫，建議大家可以親自嘗試看看效果，核心代碼

紅綠燈以及紅綠燈隨機運動動畫

利用css3多背景和position實現紅綠燈和背景色塊移動

核心代碼

棋盤背景以及棋盤背景隨機動畫

利用背景漸變實現棋盤圖案

核心代碼

偽隨機背景

利用背景漸變，keyframe動畫，實現復雜的偽隨機動畫

核心代碼

5.折角效果

知識點：linear-gradient

核心代碼

折角效果哦折角效果哦復制代碼

2.內陰影圓折角效果

核心代碼

折角效果哦復制代碼

6.自適應文本的條紋背景

知識點：linear-gradient,line-height,background-origin

核心代碼

hello you

hello you

hello you

hello you

hello you

復制代碼

7.自定義的下劃線實現

知識點linear-gridient

小伙伴們注意到了嗎？默認的下劃線會將文字穿過，而上面的不會呦！

核心代碼

i have your big apple.you have a too? hi hi hi.復制代碼

最后

筆者3天后將推出開源的CMS系統，技術架構：

• 后臺Node+Koa+redis+JsonSchema
• 管理后臺界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
• 客戶端前臺 react + antd + react-hooks + axios

后面將推出該系統的設計思想，架構和實現過程，歡迎在《趣談前端》里查看更詳細的介紹。

歡迎大家相互學習交流，一起探索前端的邊界。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css3边框交替动画_用css3实现惊艳面试官的背景即背景动画（高级附源码）的全部內容，希望文章能夠幫你解決所遇到的問題。

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