案例1:实现加载动画效果。
<!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">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
justify-content: space-around;
align-items: center;
background-color: black;
height: 100vh;
/* 添加动画 :旋转360deg 10s 状态 */
animation: ma 10s linear infinite;
}
/* hue-rotate:给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。 */
@keyframes ma{
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
.load{
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
}
.load span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(20deg * var(--i)));
}
.load span::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
box-shadow: 0 0 10px red,
0 0 20px red,
0 0 30px red,
0 0 40px red,
0 0 50px red,
0 0 60px red;
animation: la 2s linear infinite;
animation-delay: calc(0.1s*var(--i));
}
@keyframes la{
0%{
transform: scale(1);
}
70%,80%{
transform: scale(0);
}
}
</style>
</head>
<body>
<section>
<div class="load">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
</section>
</body>
</html>
案例2:实现泡泡弹跳效果。
1.创建泡泡和阴影。
<div class="papa"></div>
<div class="shadow"></div>
2.泡泡颜色和动画。
.papa{
width: 100%;
height: 100%;
border-radius: 50%;
/* 阴影 */
box-shadow: inset 0 0 20px #fff,
inset 20px 0 46px #e9f0f5,
inset 100px 0 60px #f5c7e8,
inset -10px -60px 100px #e8e6d2,
inset 0 40px 140px #f4f2df,
0 0 90px #fff;
/* 执行动画:动画名 时长 加速后减速 无限次播放 */
animation: paopao 4s ease-in-out infinite;
}
@keyframes paopao {
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
3.阴影颜色和动画
.shadow{
background-color: rgba(248, 242, 242, 0.15);
width: 150px;
height: 40px;
border-radius: 50%;
/* 绝对定位 */
position: absolute;
left: 50%;
bottom: -100px;
/* 一点点模糊效果 */
filter: blur(1px);
/* 执行动画:动画名 时长 加速后减速 无限次播放 */
animation: shadow 4s ease-in-out infinite;
}
@keyframes shadow {
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}