效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eba4f2de544d9ce33653f4cf28cab4fe.gif)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #181831;
}
.border{
width: 130px;
height: 130px;
background-image: url(./border.png);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
animation: border1 10s linear infinite;
}
.center{
width: 85px;
height: 85px;
background-image: url(./center.png);
background-size: cover;
animation: center1 10s linear infinite;
}
.center:hover, .border:hover{
animation-play-state: paused;
}
@keyframes center1{
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(120deg);
}
20% {
transform: rotate(60deg);
}
40% {
transform: rotate(240deg);
}
60% {
transform: rotate(120deg);
}
80% {
transform: rotate(360deg);
}
90% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes border1{
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(108deg) scale(0.9);
}
60% {
transform: rotate(216deg) scale(1.1);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="border">
<div class="center"></div>
</div>
</body>
</html>
animation和trancation区别
- animation默认触发
- trancation交互触发,不能默认触发