animation旋转-CSDN博客

本文链接：https://blog.csdn.net/weixin_44042792/article/details/124628886

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>旋转</title>

<style>

@keyframes turn {

0% {

-webkit-transform: rotate(0deg);

}

25% {

-webkit-transform: rotate(90deg);

}

50% {

-webkit-transform: rotate(180deg);

}

75% {

-webkit-transform: rotate(270deg);

}

100% {

-webkit-transform: rotate(360deg);

}

}

@keyframes turn3 {

100% {

-webkit-transform: rotate(0deg);

}

75% {

-webkit-transform: rotate(90deg);

}

50% {

-webkit-transform: rotate(180deg);

}

25% {

-webkit-transform: rotate(270deg);

}

0% {

-webkit-transform: rotate(360deg);

}

}

/*

turn : 定义的动画名称

1s : 动画时间

linear : 动画以何种运行轨迹完成一个周期

infinite :规定动画应该无限次播放

*/

.needle {

width: 200px;

height: 200px;

background: #090;

margin: 300px auto;

animation: turn3 2s linear infinite;

}

</style>

</head>

<body>

<div class="needle"></div>

</body>

</html>