~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: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 |