图片自取:
transition-timing-function: steps(,start); 动画过渡
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock {
width: 284px;
height: 284px;
background: url(../img/clock.png) no-repeat;
position: relative;
}
.clock::before {
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clock::after {
content: '';
width: 2px;
height: 30%;
background-color: #000;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
transform-origin: bottom;
transition-duration: 60s;
transition-timing-function: steps(60, start);
}
.clock:hover::after {
transform: translateX(-50%) rotate(360deg);
}
</style>
</head>
<body>
<div class="clock">
</div>
</body>
</html>
效果如下: