skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第169个小实例：网页底部间隔波浪动画特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-06-30 21:46:00 +08:00
parent 6b937df09e
commit e9eb598cb4
3 changed files with 109 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -175,4 +175,5 @@
165. HTML5+CSS3小实例：脉冲波纹催眠动画特效
166. HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
167. HTML5+CSS3+JS小实例：鼠标滚轮水平滚动
168. HTML5+CSS3+JS小实例：仿优酷视频轮播图
168. HTML5+CSS3+JS小实例：仿优酷视频轮播图
169. HTML5+CSS3小实例：网页底部间隔波浪动画特效

56
code/169/169.css Normal file
View File

@ -0,0 +1,56 @@
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background-color: #1b2735;
overflow: hidden;
}
.wave{
/* 弹性布局 */
display: flex;
/* 设置投影 */
filter: drop-shadow(120px 0 0 rgba(149,191,218,0.5));
position: absolute;
bottom: 0;
}
.wave div{
position: relative;
width: 40px;
height: 200px;
margin: 10px;
border-radius: 3px;
overflow: hidden;
}
.wave div::before{
content: "";
width: 300%;
height: 100%;
background-color: rgba(149,191,218,1);
position: absolute;
left: -100%;
top: 50%;
/* 执行动画：动画名 时长 贝塞尔曲线 无限播放 来回轮流播放 */
animation: upDown 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate, wave 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
/* 通过var函数调用自定义属性--d1、--d2，设置动画延迟 */
animation-delay: var(--d1), var(--d2);
}
/* 定义动画 */
@keyframes upDown {
0%{
top: 70%;
}
100%{
top: 30%;
}
}
@keyframes wave {
0%{
transform: rotateZ(-20deg);
}
100%{
transform: rotateZ(20deg);
}
}

51
code/169/169.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>网页底部间隔波浪动画特效</title>
<link rel="stylesheet" href="169.css">
</head>
<body>
<div class="wave">
<!-- --d1、--d2是CSS的自定义属性，这里用来设置动画延迟 -->
<div style="--d1:-0.5s; --d2:-3.5s;"></div>
<div style="--d1:-1s; --d2:-4s;"></div>
<div style="--d1:-1.5s; --d2:-4.5s;"></div>
<div style="--d1:-2s; --d2:-5s;"></div>
<div style="--d1:-2.5s; --d2:-5.5s;"></div>
<div style="--d1:-3s; --d2:-6s;"></div>
<div style="--d1:-3.5s; --d2:-6.5s;"></div>
<div style="--d1:-4s; --d2:-7s;"></div>
<div style="--d1:-4.5s; --d2:-7.5s;"></div>
<div style="--d1:-5s; --d2:-8s;"></div>
<div style="--d1:-5.5s; --d2:-8.5s;"></div>
<div style="--d1:-6s; --d2:-9s;"></div>
<div style="--d1:-6.5s; --d2:-9.5s;"></div>
<div style="--d1:-7s; --d2:-10s;"></div>
<div style="--d1:-7.5s; --d2:-10.5s;"></div>
<div style="--d1:-8s; --d2:-11s;"></div>
<div style="--d1:-8.5s; --d2:-11.5s;"></div>
<div style="--d1:-9s; --d2:-12s;"></div>
<div style="--d1:-9.5s; --d2:-12.5s;"></div>
<div style="--d1:-10s; --d2:-13s;"></div>
<div style="--d1:-10.5s; --d2:-13.5s;"></div>
<div style="--d1:-11s; --d2:-14s;"></div>
<div style="--d1:-11.5s; --d2:-14.5s;"></div>
<div style="--d1:-12s; --d2:-15s;"></div>
<div style="--d1:-12.5s; --d2:-15.5s;"></div>
<div style="--d1:-13s; --d2:-16s;"></div>
<div style="--d1:-13.5s; --d2:-16.5s;"></div>
<div style="--d1:-14s; --d2:-17s;"></div>
<div style="--d1:-14.5s; --d2:-17.5s;"></div>
<div style="--d1:-15s; --d2:-18s;"></div>
<div style="--d1:-15.5s; --d2:-18.5s;"></div>
<div style="--d1:-16s; --d2:-19s;"></div>
<!-- 这里我是32个div -->
</div>
</body>
</html>