前言
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: #222f3e;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 8px;
height: 48px;
display: inline-block;
position: relative;
border-radius: 4px;
color: white;
/* background: black; */
left: -60px;
animation: loading 2s 0s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0)
}
20% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 0)
}
40% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 1)
}
60% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 0)
}
80% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0)
}
100% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1)
}
}
原理詳解
步驟1
使用span標簽，設定為
- 寬度為8px 高度為48px
- 相對定位
- 背景色：紅色
- border-radius: 4px;
span {
width: 8px;
height: 48px;
position: relative;
border-radius: 4px;
background: red;
}
效果圖如下：
步驟2
將span標簽左移60px
span {
left: -60px;
}
效果圖如下：
步驟3
使用span的5個陰影，顏色設定為白色
其位置關系為：
box-shadow:
20px 0 rgba(255, 255, 255, 1), /*陰影1*/
40px 0 rgba(255, 255, 255, 1),/*陰影2*/
60px 0 rgba(255, 255, 255, 1), /*陰影3*/
80px 0 rgba(255, 255, 255, 1), /*陰影4*/
100px 0 rgba(255, 255, 255, 1);/*陰影5*/
效果圖如下：
步驟4
通過影片控制5個陰影的顯示與否
顯示與否則是通過控制顏色的透明級別
- (255,255,255,0)：255，255，255本是白色，但是透明級別為0，不顯示白色，透明了
- (255,255,255,1)：純白色
設定6個關鍵幀（包含初始狀態、末尾狀態）
假設使用0表示白色不表示，也就是透明；1表示白色顯示
6幀中5個陰影的狀態為：
- 第一幀：00100，意思是陰影3為白色，其他陰影為透明
- 第二幀：01010，陰影2、4為白色，其他為透明
- 第三幀：10001，陰影1、5為白色，其他為透明
- 第四幀：01010，陰影2、4為白色，其他為透明
- 第五幀：00100，陰影3為白色，其他陰影為透明
- 第六幀：11111，都為白色
第一幀效果圖：
第二幀效果圖：
第三幀效果圖：
第四幀效果圖：
第五幀效果圖：
第六幀效果圖：
根據上述描述書寫代碼得
span {
animation: loading 2s 0s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(104, 22, 22, 0);
}
20% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 0);
}
40% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 1);
}
60% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 0);
}
80% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
}
100% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1), 80px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
}
}
效果如下：
步驟5
注釋掉span的紅色背景
span {
/* background: red; */
}
得到最終的效果
結語
文章僅作為學習筆記，記錄從0到1的一個程序
希望對您有所幫助，如有錯誤歡迎小伙伴指正～
我是 海轟?(?ˊ?ˋ)?
如果您覺得寫得可以的話，請點個贊吧
謝謝支持??
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/289340.html
標籤：其他
上一篇：類和物件三部曲（上）