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

新增第119个小实例：双层波浪动画特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-03-06 17:26:25 +08:00
parent 18d6ce8165
commit 0426c75876
4 changed files with 82 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -122,4 +122,5 @@
115. HTML5+CSS3+JQuery小实例：可爱的熊猫遮眼登录界面
116. HTML5+CSS3小实例：社交卡片悬停特效
117. HTML5+CSS3+JS小实例：3层图像的滑动对比效果
118. HTML5+CSS3小实例：带LOGO的全屏加载动画
118. HTML5+CSS3小实例：带LOGO的全屏加载动画
119. HTML5+CSS3小实例：双层波浪动画特效

60
code/119/119.css Normal file
View File

@ -0,0 +1,60 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 径向渐变背景 ellipse表示椭圆 */
background: radial-gradient(ellipse at center,#fffeea 0%,#fffeea 35%,#b7e8eb 100%);
/* 溢出隐藏 */
overflow: hidden;
}
/* 海平面 */
.sea{
width: 100%;
height: 5%;
background-color: #015871;
/* 绝对定位 底部 */
position: absolute;
left: 0;
bottom: 0;
}
.wave{
/* 这里的背景用的是svg文件，这个文件我事先在PS里做好并导出 */
background: url("svg/wave.svg") repeat-x;
width: 6400px;
height: 198px;
/* 绝对定位 */
position: absolute;
top: -198px;
/* 执行波动动画：动画名 时长 贝塞尔曲线 无限次播放 */
animation: wave 7s cubic-bezier(0.36,0.45,0.63,0.53) infinite;
}
.wave:nth-child(2){
top: -175px;
/* 执行波动+上下浮动动画 */
animation: wave 7s cubic-bezier(0.36,0.45,0.63,0.53) infinite,swell 7s ease infinite;
animation-delay: -0.2s;
}
/* 定义动画 */
/* 波动动画 */
@keyframes wave {
0%{
margin-left: 0;
}
100%{
margin-left: -1600px;
}
}
/* 上下浮动动画 */
@keyframes swell {
0%,100%{
transform: translate(0,-25px);
}
50%{
transform: translate(0,5px);
}
}

19
code/119/119.html Normal file
View File

@ -0,0 +1,19 @@
<!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="119.css">
</head>
<body>
<div class="sea">
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>
</html>

1
code/119/svg/wave.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB