效果
代码
<!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交互触发，不能默认触发
