简易的动画时钟
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：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</span></div> <!--表盘--><div class='dial'> <!—钟心--><div class='xin'></div></div> <!--秒针周期圈--><div class='second_trajectory '></div> <!--秒针--> <div class='second'></div> <!--分针周期圈--> <div class='minute_trajectory'></div> <!--分针--><div class='minute'></div> <!--时针周期圈--><div class='hour_trajectory'></div> <!--时针--><div class='hour'></div></div> |
css代码：
|
.timepiece{width:800px;height: 800px;position: relative;margin:0 auto;background-color: #fff;padding:0;transform: scale(1);} /*钟盘*/ .dial{left:357px;top:357px;height:90px;width:90px;background-color:rgb(248,107,35);border-radius: 50%;box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35); position: absolute;margin: 0;} /*钟心*/ .xin{left:43%;top:43%;height: 10px;width: 10px;background-color:#fff;border-radius: 50%;position: absolute;} /*钟时数字1~12*/ span{position: absolute;width: 20px;height: 20px;color: #000;} .s_1{left: 56%;top: 38%;}.s_2{left: 60%;top: 42%;}.s_3{left: 62%;top:49%;} .s_4{left: 60%;top: 56%;}.s_5{left: 56%;top: 60%;}.s_6{left: 49%;top:62%;} .s_7{left:43%;top:60%;}.s_8{left:39%;top:56%;}.s_9{left:295px;top:49%;} .s_10{left:301px;top:343px;}.s_11{left: 336px;top: 305px;}.s_12{left: 49%;top: 36%} /*秒针*/ .second {left:337px;top:395px;height: 10px;width: 10px;background-color:red;border-radius: 50%;position: absolute;transform-origin: 62.5px 5px;animation: rotate 1s infinite linear;animation-direction:reverse;} /*秒针周期圈*/ .second_trajectory {left:342px;top:342px;height: 115px;width: 115px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;} /*分针*/ .minute {left:309px;top:389px;height: 22px;width: 22px;background-color: #000;border-radius: 50%;position: absolute;transform-origin: 91px 11px;animation: rotate 60s infinite linear;animation-direction:reverse;} /*分针周期圈*/ .minute_trajectory {left:320px; top:320px;height: 160px;width: 160px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px; margin: 0px; padding: 0px;} /*时针*/ .hour { left:266px; top:391px; height: 18px; width: 18px;background-color: blue; border-radius: 50%;position: absolute;transform-origin: 134px 9px;animation: rotate 43200s infinite linear;animation-direction:reverse;} /*时针周期圈*/ .hour_trajectory {left:275px;top:275px; height: 250px;width: 250px;background-color: transparent; border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;} @keyframes rotate {100% {transform: rotate(-360deg);}} |