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

新增第165个小实例：脉冲波纹催眠动画特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-06-15 16:09:00 +08:00
parent 2715f61b5f
commit 98af4ece0c
3 changed files with 105 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -171,4 +171,5 @@
161. HTML5+CSS3+JS小实例：环形文字动画特效
162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
164. HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
164. HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
165. HTML5+CSS3小实例：脉冲波纹催眠动画特效

80
code/165/165.css Normal file
View File

@ -0,0 +1,80 @@
*{
margin: 0;
padding: 0;
}
body{
/* 100%窗口宽高 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #121212;
}
.container{
display: flex;
justify-content: center;
align-items: center;
}
.circle{
width: 50px;
height: 50px;
background-color: aliceblue;
border-radius: 50%;
position: absolute;
/* 执行动画：动画名 时长 加速后减速 无限播放 */
animation: pulse 3s ease-in-out infinite;
}
/* 分别为每个圆形设置不同的宽高、不透明度、动画延迟时间 */
.circle:nth-child(1){
width: calc(50px * 1);
height: calc(50px * 1);
opacity: 1;
animation-delay: 0.12s;
}
.circle:nth-child(2){
width: calc(50px * 2);
height: calc(50px * 2);
opacity: 0.5;
animation-delay: 0.24s;
}
.circle:nth-child(3){
width: calc(50px * 3);
height: calc(50px * 3);
opacity: 0.33;
animation-delay: 0.36s;
}
.circle:nth-child(4){
width: calc(50px * 4);
height: calc(50px * 4);
opacity: 0.25;
animation-delay: 0.48s;
}
.circle:nth-child(5){
width: calc(50px * 5);
height: calc(50px * 5);
opacity: 0.2;
animation-delay: 0.6s;
}
.circle:nth-child(6){
width: calc(50px * 6);
height: calc(50px * 6);
opacity: 0.16;
animation-delay: 0.72s;
}
/* 定义动画 */
@keyframes pulse {
0%{
transform: scale(1);
}
25%{
transform: scale(1.3);
}
50%{
transform: scale(0.7);
}
75%{
transform: scale(1);
}
}

23
code/165/165.html Normal file
View File

@ -0,0 +1,23 @@
<!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="165.css">
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>