纯CSS绘制手表动画代码

html代码
<div class="wrapper">
<div class="watch-strap">
<div class="strap-circle"></div>
<div class="strap"></div>
<div class="watch-strap-holder left-up"></div>
<div class="watch-strap-holder left-bottom"></div>
<div class="watch-strap-holder right-up"></div>
<div class="watch-strap-holder right-bottom"></div>
<div class="watch-lace">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span class="top"></span>
<span class="bottom"></span>
</div>
</div>
<div class="watch-case">
<div class="reflection"></div>
<div class="reflection bottom"></div>
<div class="watch-center">
<div class="watch-points"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="watch-tips">
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
<div class="watch-date">17 SEP</div>
<div class="watch-alert">Your meeting <br>in <strong>15</strong> min</div>
<div class="watch-week">
<span class="week-arrow"></span>
<ul>
<div>S</div>
<div>M</div>
<div>T</div>
<div>W</div>
<div>T</div>
<div>F</div>
<div>S</div>
</ul>
</div>
<div class="watch-day">
<div class="sun">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="watch-week days">
<span class="week-arrow"></span>
<ul>
<div>3</div>
<div>6</div>
<div>9</div>
</ul>
</div>
</div>
</div>
</div>
© 版权声明
本站网络名称:
青鹿云
本站永久网址:
www.milubk.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
- 最新
- 最热
只看作者