有不同写法欢迎交流探讨
<style>
/* 设置黑色桌面 */
.desk {
width: 400px;
height: 600px;
background-color: black;
margin: auto;
}
/* 用来放置同心圆 */
.circle {
width: 400px;
height: 400px;
}
.circle,
.out,
.in {
/* 将边框变圆 */
border-radius: 50%;
/* 设置成同心 */
display: flex;
justify-content: center;
align-items: center;
animation-duration: 9s;
/* 循环 */
animation-iteration-count: infinite;
/* 匀速播放 */
animation-timing-function: linear;
}
/* 设置外圈圆 */
.out {
border: 9px solid #999999;
animation-name: out;
}
/* 设置内圈圆 */
.in {
border: 25px solid white;
animation-name: in;
}
/* 设置文字 */
.word {
height: 74px;
font-size: 50px;
text-align: center;
line-height: 74px;
color: white;
font-family: Calibri;
}
/* 外圈圆动画 */
@keyframes out {
/* 前4秒放缩 */
0% {
width: 260px;
height: 260px;
}
22.222% {
width: 280px;
height: 280px;
}
/* 后5秒不动 */
44.444% {
width: 260px;
height: 260px;
}
100% {
width: 260px;
height: 260px;
}
}
/* 内圈圆动画 */
@keyframes in {
/* 前4秒不动 */
0% {
width: 180px;
height: 180px;
}
44.5% {
width: 180px;
height: 180px;
}
/* 后5秒缩放 */
72.222% {
width: 156px;
height: 156px;
}
100% {
width: 180px;
height: 180px;
}
}
</style>
</head>
<body>
<div class="desk">
<div class="circle">
<div class="out">
<div class="in"></div>
</div>
</div>
<div class="word">HI!</div>
</div>
</body>
3932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
