【动画消消乐 】HTML+CSS 吃豆豆动画 073
前言
Hello！小伙伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
?
自我介紹 ?(?ˊ?ˋ)?
昵稱：海轟
標簽：程序猿｜C++選手｜學生
簡介：因C語言結識編程，隨后轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！
?
【動畫消消樂】 平時學習生活比較枯燥，無意之間對一些網頁、應用程序的過渡/加載動畫產生了濃厚的興趣，想知道具體是如何實現的？ 便在空閑的時候學習下如何使用css實現一些簡單的動畫效果，文章僅供作為自己的學習筆記，記錄學習生活，爭取理解動畫的原理，多多“消滅”動畫！
效果展示
Demo代碼
HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title> </head> <body><section><span></span></section> </body> </html>CSS
html,body{margin: 0;height: 100%; } body{display: flex;justify-content: center;align-items: center;background: #263238; } section {width: 650px;height: 300px;padding: 10px;position: relative;display: flex;align-items: center;justify-content: center;/* 紅色邊框僅作提示 */border: 2px solid red; }span{display: inline-block;position: relative;border-radius: 50%;border-top: 48px white solid;border-bottom: 48px white solid;border-left: 48px white solid;border-right: 48px transparent solid;color: white;animation: c .5s linear infinite ; } @keyframes c {0%{box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5),100px 0px 0 -40px rgba(255, 255, 255, .75),80px 0px 0 -40px rgba(255, 255, 255, 1);}100%{box-shadow: 100px 0px 0 -40px rgba(255, 255, 255, .5),80px 0px 0 -40px rgba(255, 255, 255, .75),60px 0px 0 -40px rgba(255, 255, 255, 1);}} span::before{position: absolute;content: '';display: inline-block;top: -48px;left: -48px;border-top: 48px white solid;border-bottom: 48px transparent solid;border-left: 48px transparent solid;border-right: 48px transparent solid;border-radius: 50%;animation: a .25s linear infinite alternate; }span::after{position: absolute;content: '';top: -48px;left: -48px;border-top: 48px transparent solid;border-bottom: 48px white solid;border-left: 48px transparent solid;border-right: 48px transparent solid;border-radius: 50%;animation: b .25s linear infinite alternate; }@keyframes a {0% { transform: rotate(45deg) }100% { transform: rotate(0deg)} }@keyframes b {0% { transform: rotate(-45deg) }100% { transform: rotate(0deg)} }原理詳解
步驟1
使用span標簽，設置為
- 相對定位
- 上、下、左邊框為48px 白色 實線solid
- 右邊框為48px 透明 實線solid
效果如下圖
步驟2
span圓角化
span {border-radius: 50%; }效果如下圖
步驟3
為span添加三個陰影
box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), /*陰影1*/100px 0px 0 -40px rgba(255, 255, 255, .75), /*陰影2*/80px 0px 0 -40px rgba(255, 255, 255, 1);/*陰影3*/效果如下圖
步驟4
為span的三個陰影添加動畫
動畫效果很簡單，就是三個小球從右水平移動至左方
只需要修改box-shadow中的水平偏移量即可完成
span {animation: c 1s linear infinite; } @keyframes c {0% {box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), 100px 0px 0 -40px rgba(255, 255, 255, .75), 80px 0px 0 -40px rgba(255, 255, 255, 1);}100% {box-shadow: 100px 0px 0 -40px rgba(255, 255, 255, .5), 80px 0px 0 -40px rgba(255, 255, 255, .75), 60px 0px 0 -40px rgba(255, 255, 255, 1);} }
效果如下圖
步驟5
使用span::before和span::after充當嘴閉合的兩部分
首先設置span::before
設置為
- 絕對定位（top: -48px left: -48px）
- 上邊框為：48px red solid
- 下、左、右邊框：48px transparent solid;
效果如下圖
再圓角化
效果如下圖
為span::before添加動畫
動畫效果描述為：一直繞圓心旋轉 0-45度
span::before {animation: a .5s linear infinite alternate; } @keyframes a {0% {transform: rotate(45deg)}100% {transform: rotate(0deg)} }效果如下圖
同理 使用span::after
設置為
- 絕對定位（ top: -48px left: -48px）
- 下邊框：48px red solid;
- 上、左、右邊框：48px transparent solid;
- 圓角化：border-radius: 50%;
效果如下圖
再為span::after添加和before一樣效果的動畫
效果如下圖
步驟6
span::after、span::before邊框中顏色紅色修改為白色
最后span、span::after、span::before三個動畫一起顯示
得到最終效果
結語
學習來源：
https://codepen.io/bhadupranjal/pen/vYLZYqQ
文章僅作為學習筆記，記錄從0到1的一個過程。希望對您有所幫助，如有錯誤歡迎小伙伴指正～
我是海轟?(?ˊ?ˋ)?，如果您覺得寫得可以的話，請點個贊吧
寫作不易，「點贊」+「收藏」+「轉發」
謝謝支持??
總結
以上是生活随笔為你收集整理的【动画消消乐 】HTML+CSS 吃豆豆动画 073的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Java 8系列】Java开发者的判空
- 下一篇： 2017年html5行业报告,云适配发布