使用纯CSS3属性来实现转动时钟
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
border: 10px solid #ccc;
border-radius: 110px;
margin: 100px auto;
position: relative;
}
.line {
width: 4px;
height: 200px;
background: #ccc;
position: absolute;
left: 50%;
margin-left: -2px;
}
/*时钟刻度线*/
.line1 {
transform: rotate(30deg);
}
.line2 {
transform: rotate(60deg);
}
.line3 {
transform: rotate(90deg);
}
.line4 {
transform: rotate(120deg);
}
.line5 {
transform: rotate(150deg);
}
.line6 {