用js实现时钟特效,可以直接复制看效果哟，快来试试吧！
<!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>
*{margin:0;
padding:0;}
ul{
list-style: none;
}
.watch{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:400px;
height: 400px;
background-color: rgb(171, 172, 173);
border: 30px solid rgb(117, 110, 110);
border-radius: 50%;
}
/* 这段代码是核心 */
.num{
position: absolute;
top:50%;
left:50%;
margin-top: -13px;
/* border:1px solid red; */
width:48%;
/* 文字在右边 */
text-align: right;
/* 旋转轴 */
transform-origin: left center;
}
.num1{
transform: rotate(-60deg);
}
.num1 span{
display:inline-block;
transform:rotate(60deg);
}
.num2{
transform: rotate(-30deg);
}
.num2 span{
display:inline-block;
transform:rotate(30deg);
}
.num3{
transform: rotate(0deg);
}
.num4{
transform: rotate(30deg);
}
.num4 span{
display:inline-block;
transform:rotate(-30deg);
}
.num5{
transform: rotate(60deg);
}
.num5 span{
display:inline-block;
transform:rotate(-60deg);
}
.num6{
transform: rotate(90deg);
}
.num6 span{
display:inline-block;
transform:rotate(-90deg);
}
.num7{
transform: rotate(120deg);
}
.num7 span{
display:inline-block;
transform:rotate(-120deg);
}
.num8{
transform: rotate(150deg);
}
.num8 span{
display:inline-block;
transform:rotate(-150deg);
}
.num9{
transform: rotate(180deg);
}
.num9 span{
display:inline-block;
transform:rotate(180deg);
}
.num9 span{
display:inline-block;
transform:rotate(-180deg);
}
.num10{
transform: rotate(210deg);
}
.num10 span{
display:inline-block;
transform:rotate(-210deg);
}
.num11{
transform: rotate(240deg);
}
.num11 span{
display:inline-block;
transform:rotate(-240deg);
}
.num12{
transform: rotate(270deg);
}
.num12 span{
display:inline-block;
transform:rotate(-270deg);
}
/*尾类元素，就是可以不用在文档中定义，但一定要content */
.pointer::after{
content:'';
width:30px;
height:30px;
background-color: rgb(66, 71, 66);
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.pointer>div{
transform-origin: left center;
/* background-color: rgb(20, 7, 197); */
position:absolute;
top:50%;
left:50%;
/* transform: translate(-50%,-50%); */
margin-top: -5px;
width:40px;
height:9px;
}
.sec_pointer{
animation: aa 60s linear infinite;
width:30%;
/* background-color: rgb(231, 10, 10); */
transform:rotate(-90deg);
}
.sec_pointer::after{
/* 她的尾元素和它一起转动 */
content:'';
position:absolute;
top:0;
width:0;
height: 0;
border:10px solid transparent;
border-width:5px 0px 9px 150px;
border-left-color:red;
}
.hour_pointer{
animation: aa 3600s linear infinite;
width:30%;
/* background-color: rgb(231, 10, 10); */
transform:rotate(-60deg);
}
.hour_pointer::after{
/* 她的尾元素和它一起转动 */
content:'';
position:absolute;
top:0;
width:0;
height: 0;
border:10px solid transparent;
border-width:5px 0px 9px 130px;
border-left-color:rgb(225, 240, 14);
mix-blend-mode: screen;
}
.min_pointer{
animation: aa 42300s linear infinite;
width:30%;
/* background-color: rgb(231, 10, 10); */
transform:rotate(-30deg);
}
.min_pointer::after{
/* 她的尾元素和它一起转动 */
content:'';
position:absolute;
top:0;
width:0;
height: 0;
border:10px solid transparent;
border-width:5px 0px 9px 70px;
border-left-color:rgb(245, 16, 188);
}
@keyframes aa{
/* 初始位置时就已经变换好了 */
from{transform:rotate(-90deg)}
to{transform:rotate(360deg)}
}
</style>
</head>
<body>
<div class="watch">
<ul>
<li class="num num1"><span>1</span></li>
<li class="num num2"><span>2</span></li>
<li class="num num3"><span>3</span></li>
<li class="num num4"><span>4</span></li>
<li class="num num5"><span>5</span></li>
<li class="num num6"><span>6</span></li>
<li class="num num7"><span>7</span></li>
<li class="num num8"><span>8</span></li>
<li class="num num9"><span>9</span></li>
<li class="num num10"><span>10</span></li>
<li class="num num11"><span>11</span></li>
<li class="num num12"><span>12</span></li>
</ul>
<div class="pointer">
<div class="hour_pointer"></div>
<div class="min_pointer"></div>
<div class="sec_pointer"></div>
</div>
</div>
</body>
</html>
网友评论