<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>呼吸灯</title>
<style>
div {
box-sizing: border-box;
}
.content {
background: #444;
width: 300px;
height: 500px;
margin: auto;
}
.outer {
height: 100%;
width: 100%;
border-radius: 50%;
border: 10px solid #f4f4f4;
margin: auto;
padding: 20px;
/* 引用动画 */
animation-name: outer;
animation-duration: 8s;
/* 速度曲线 */
animation-timing-function: linear;
/* 次数 */
animation-iteration-count: infinite;
}
.up {
height: 300px;
width: 300px;
padding: 30px;
border-bottom: 2px solid #f1f1f1;
/* 引用内圆动画 */
animation-name: inner;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.inner {
height: 100%;
width: 100%;
border: 7px solid #f3f3f3;
border-radius: 50%;
text-align: center;
line-height: 150px;
color: blanchedalmond;
font-size: 26px;
}
.down {
color: #f1f1f1;
text-align: center;
line-height: 200px;
font-size: 28px;
}
/* 定义外圆动画 */
@keyframes outer {
25% {
padding: 30px;
}
50% {
padding: 20px;
}
75% {
padding: 20px;
}
100% {
padding: 20px;
}
}
/* 定义内圆动画 */
@keyframes inner {
25% {
padding: 40px;
}
50% {
padding: 30px;
}
75% {
padding: 42px;
}
100% {
padding: 30px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="up">
<div class="outer">
<div class="inner">Hi</div>
</div>
</div>
<div class="down">hello,我是“呼吸灯”</div>
</div>
</body>
</html>
呼吸灯小动画
最新推荐文章于 2023-04-25 11:34:00 发布