[分享]css3动画摆钟小说

　弹簧发出叮铃铃的声音，秒针快速地转动着，指向着每一秒，仿佛时间真的在不停地向前流动。黑色的指针落在了六点钟的位置，钟摆随之摇摆，发出“咚咚”微弱的声音。.clock { : absolute; to...

　弹簧发出叮铃铃的声音，秒针快速地转动着，指向着每一秒，仿佛时间真的在不停地向前流动。黑色的指针落在了六点钟的位置，钟摆随之摇摆，发出“咚咚”微弱的声音。

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid #333;
    border-radius: 50%;
    height: 125px;
    width: 125px;
    animation: rotate 60s linear infinite;
}

.second-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    background-color: red;
    transform-origin: left;
    animation: rotate 60s linear infinite;
}

.hour-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 35px;
    width: 6px;
    background-color: #333;
    transform-origin: bottom;
    animation: rotate 12h linear infinite;
}

.minute-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 25px;
    width: 4px;
    background-color: #333;
    transform-origin: bottom;
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-12h {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

　　钟表的旋转完全由CSS3动画控制，在CSS3中我们可以很方便地通过HTML元素的样式来控制动画细节。本篇小说以CSS3动画为主线，通过描述钟表的运作来展现时间的流动和变幻。钟表时间的转动，秒针随着时间的变换快速运动，指向每一秒。而钟摆的摆动则象征着时间的流逝。小时、分钟的指针在钟表上缓慢地挪动，指向着不同的时间刻度。

　　钟摆不停地摆动，秒针在较慢的速度中转动，指针的位置在时分秒不停地变幻。