css时钟特效

最新推荐文章于 2023-06-04 23:19:55 发布

m0_52434369

最新推荐文章于 2023-06-04 23:19:55 发布

阅读量130

点赞数

文章标签： css3 css html animation

本文链接：https://blog.csdn.net/m0_52434369/article/details/118422596

版权

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

m0_52434369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>*{m
复制链接

扫一扫

css时钟特效

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