css时钟特效

用css实现的炫酷时钟特效,赶快试试吧!

<!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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值