HTML5+CSS3练习小实例：发光果冻泡泡动画
练习来自资源
链接: 小红书.
效果图:
代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="txd" />
<meta name="generator" content="idea 2022.2" />
<meta name="keywords" content="藏升" />
<title>发光果冻小泡泡</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 泡泡 -->
<div class="bubble"></div>
<!-- 泡泡投影 -->
<div class="shadow"></div>
</div>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
}
body{
/*100%窗口高度*/
height: 100vh;
/*弹性布局 居中显示*/
display: flex;
justify-content: center;
align-items: center;
/*渐变背景*/
background: linear-gradient(150deg,#d299c2,#fef9d7);
/*溢出隐藏*/
overflow: hidden;
}
/*泡泡*/
.container{
width: 200px;
height: 200px;
/*径向渐变*/
background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,
#5b5b5b 60%,#ff21c0 100%);
border-radius: 50%;
/*阴影*/
box-shadow: inset 0 0 20px #fff,
inset 10px 0 46px #eaf5fc,
inset 80px 0 60px #efcde6,
inset -20px -60px 100px #f9f6de,
inset 0px 50px 140px #f9f6de,
0 0 90px #fff;
/*执行动画 动画名 时长 加速后减速 无限次数播放*/
animation: bubble 4s ease-in-out infinite;
}
/*阴影*/
.shadow{
background-color: rgba(0,0,0,0.15);
width: 150px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -75px;
bottom: -120px;
/*一点点模糊效果*/
filter: blur(1px);
/*执行动画 动画名 时长 加速后减速 无限次数播放*/
animation: shadow 4s ease-in-out infinite;
}
/*定义动画 泡泡投影动画*/
@keyframes shadow{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
/*定义动画 泡泡浮动动画*/
@keyframes bubble{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}