简易的动画时钟

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW、css3

作者：#33

撰写时间：撰写时间：2019年05月20日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

运用css3知识制作具有动画效果的时钟：秒针（红色点）、分针（黑色点）、时针（蓝色点）。

Animation name ： 定义animation的名称 用于关键帧选择器的绑定（keyframe name），

animation-name属性指定了一个名称@keyframes animation。如下：@keyframes rotate { 100% { transform: rotate(-360deg);}其中的rotate就是使其绑定选择器（秒针的rotate、分针的rotate、时针的rotate）。 让钟表的指针（点）具有从开始到结束（100%）旋转360度（-360deg）的效果。其中秒针旋转一周时间为1秒；分针为3600秒；时针为43200秒。动画过程为匀速（linear）旋转，方向开始为时针旋转（逆时针-360deg）转化为顺时针方向时即使用动画方向：反向属性（animation-direction:reverse;）。循环次数为无限次（）。

                                          

经典代码：源代码

<div class="timepiece"><!—时间数字--><div><span class="s_1">1</span> <span class="s_2">2</span><span class="s_3">3</span><span class="s_4">4</span> <span class="s_5">5</span><span class="s_6">6</span><span class="s_7">7</span> <span class="s_8">8</span><span class="s_9">9</span><span class="s_10">10</span> <span class="s_11">11</span><span class="s_12">12