请选择 进入手机版 | 继续访问电脑版

纯CSS3实现时钟效果

发表于 09-26 17:31 显示全部楼层 13 125

        继上次css画了一只猫猫之后,这次尝试用纯css画了一只时钟,当然用css制作的时钟是获取不了服务器时间的,但是相关指针转动效果能用animation动画做出来。


        制作时钟的关键要用到animation里面的帧动画,steps(帧数),帧动画这个属性在于替代传统的缓动曲线ease,ease-in,ease-in-out,linear 这些都会在动画的每一帧插入补间动画,时钟效果秒针的转动如果不想要补间,只需要画面在关键帧之间跳跃,就可以用steps()取代。


        制作要点:时钟刻度用定位以及旋转位移调到相对于的位置,制作指针动画时,秒针60S转一圈,但是不需要补间,分针3600S转一圈,时针216000S转一圈即可。


效果如图:


clock.gif


这是源码,有兴趣的朋友可以试试~~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css时钟效果</title>
<style>
*{padding: 0; margin: 0; border: 0; list-style: none;}

body{background:#ffd740;}
/* 轮廓 */
.clock{width: 300px; height:300px; background:#000; border-radius:40px; margin:200px auto; overflow: hidden; animation:show 1s forwards; box-shadow:0 0 10px rgba(0,0,0,0.7);}
@keyframes show{
0%{ opacity:0; margin-top:0;}
100%{ opacity:1; margin-top:200px;}
}
.clock_in{width: 260px; height: 260px; background:#fff; border-radius:50%; margin:20px auto; position:relative; animation:zhuan 1s 0.6s forwards;}
@keyframes zhuan{
0%{ transform:skew(0deg,0deg);}
100%{ transform:skew(180deg,180deg);}
}
/* 刻度位置调整 */
.clock_in ul{width: 100%; height: 100%; /*background:tan;*/ border-radius:50%; }
.clock_in li{ position:absolute; width:4px; height:12px; background:#000; left: 50%; top: 50%; margin-left: -2px; margin-top: -6px;}
.clock_in li:nth-of-type(1){ transform:rotateZ(0deg) translateY(-120px);}
.clock_in li:nth-of-type(2){ transform:rotateZ(30deg) translateY(-120px);}
.clock_in li:nth-of-type(3){ transform:rotateZ(60deg) translateY(-120px);}
.clock_in li:nth-of-type(4){ transform:rotateZ(90deg) translateY(-120px);}
.clock_in li:nth-of-type(5){ transform:rotateZ(120deg) translateY(-120px);}
.clock_in li:nth-of-type(6){ transform:rotateZ(150deg) translateY(-120px);}
.clock_in li:nth-of-type(7){ transform:rotateZ(180deg) translateY(-120px);}
.clock_in li:nth-of-type(8){ transform:rotateZ(210deg) translateY(-120px);}
.clock_in li:nth-of-type(9){ transform:rotateZ(240deg) translateY(-120px);}
.clock_in li:nth-of-type(10){ transform:rotateZ(270deg) translateY(-120px);}
.clock_in li:nth-of-type(11){ transform:rotateZ(300deg) translateY(-120px);}
.clock_in li:nth-of-type(12){ transform:rotateZ(330deg) translateY(-120px);}

.circle{width: 24px; height:24px; background:#303030; position:absolute; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; border-radius:50%;}
.circle_in{width: 12px; height:12px; background:#dd3e1b; position:absolute; left: 50%; top: 50%; margin-left: -6px; margin-top: -6px; border-radius:50%;}

/* 指针样式及动画 */
.hours,.minites,.seconds{ position:absolute; left: 50%; top: 50%; transform-origin:center top;}
.hours{width: 10px; height:70px; background:#303030; border-radius:5px; margin-left: -5px; transform:rotateZ(120deg); animation:shi 216000s linear infinite;}
.minites{width:6px; height:90px; background:#303030; border-radius:3px; margin-left: -3px; transform:rotateZ(180deg);animation:fen 3600s linear infinite;}
.seconds{width:4px; height:110px; background:#dd3e1b; border-radius:2px; margin-left: -2px; transform:rotateZ(270deg); animation:miao 60s steps(60) infinite;}
@keyframes miao{
0%{transform:rotateZ(270deg);}
100%{transform:rotateZ(630deg);}
}
@keyframes fen{
0%{transform:rotateZ(180deg);}
100%{transform:rotateZ(540deg);}
}
@keyframes shi{
0%{transform:rotateZ(120deg);}
100%{transform:rotateZ(180deg);}
}


</style>
</head>

<body>


<div class="clock">
<div class="clock_in">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
        <div class="circle">
            <div class="hours"></div>
            <div class="minites"></div>
        <div class="circle_in">
            <div class="seconds"></div>
            </div>
        </div>
    </div>
</div>



</body>
</html>


        

回复 使用道具
举报
谁和我同名

发表于 11-11 09:24 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
wengongling

发表于 11-02 08:12 显示全部楼层

回复 支持 反对 使用道具
举报
张比亚

发表于 10-27 11:01 显示全部楼层

回复 支持 反对 使用道具
举报
任天翔

发表于 10-24 18:59 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
卖水果的阿甘

发表于 10-06 21:32 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
今夜来微微

发表于 09-29 13:27 显示全部楼层

回复 支持 反对 使用道具
举报
百变小辉辉

发表于 09-28 08:24 显示全部楼层

回复 支持 反对 使用道具
举报
森之树

发表于 09-27 22:20 显示全部楼层

回复 支持 反对 使用道具
举报
仰光的阳光

发表于 09-26 22:39 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1599

学币

1759

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1759
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育