html5基于svg绘制多个圆形的圈圈旋...
创意方块时钟
2020-07-23 10:20:40 日期时间
创意方块时钟
每秒会自动填充一个其他颜色的小格子,满格后自动增加一分钟。
引入css
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
调用html
<div class="clock">
<div class="clock__number hours">
<div class="digit digit__0">
<div class="pixel pixel_1"></div>
<div class="pixel pixel_2"></div>
<div class="pixel pixel_3"></div>
<div class="pixel pixel_4"></div>
<div class="pixel pixel_5"></div>
<div class="pixel pixel_6"></div>
<div class="pixel pixel_7"></div>
<div class="pixel pixel_8"></div>
<div class="pixel pixel_9"></div>
<div class="pixel pixel_10"></div>
<div class="pixel pixel_11"></div>
<div class="pixel pixel_12"></div>
<div class="pixel pixel_13"></div>
<div class="pixel pixel_14"></div>
<div class="pixel pixel_15"></div>
</div>
<div class="digit digit__0">
<div class="pixel pixel_1"></div>
<div class="pixel pixel_2"></div>
<div class="pixel pixel_3"></div>
<div class="pixel pixel_4"></div>
<div class="pixel pixel_5"></div>
<div class="pixel pixel_6"></div>
<div class="pixel pixel_7"></div>
<div class="pixel pixel_8"></div>
<div class="pixel pixel_9"></div>
<div class="pixel pixel_10"></div>
<div class="pixel pixel_11"></div>
<div class="pixel pixel_12"></div>
<div class="pixel pixel_13"></div>
<div class="pixel pixel_14"></div>
<div class="pixel pixel_15"></div>
</div>
</div>
<div class="points">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="clock__number minutes">
<div class="digit digit__0">
<div class="pixel pixel_1"></div>
<div class="pixel pixel_2"></div>
<div class="pixel pixel_3"></div>
<div class="pixel pixel_4"></div>
<div class="pixel pixel_5"></div>
<div class="pixel pixel_6"></div>
<div class="pixel pixel_7"></div>
<div class="pixel pixel_8"></div>
<div class="pixel pixel_9"></div>
<div class="pixel pixel_10"></div>
<div class="pixel pixel_11"></div>
<div class="pixel pixel_12"></div>
<div class="pixel pixel_13"></div>
<div class="pixel pixel_14"></div>
<div class="pixel pixel_15"></div>
</div>
<div class="digit digit__0">
<div class="pixel pixel_1"></div>
<div class="pixel pixel_2"></div>
<div class="pixel pixel_3"></div>
<div class="pixel pixel_4"></div>
<div class="pixel pixel_5"></div>
<div class="pixel pixel_6"></div>
<div class="pixel pixel_7"></div>
<div class="pixel pixel_8"></div>
<div class="pixel pixel_9"></div>
<div class="pixel pixel_10"></div>
<div class="pixel pixel_11"></div>
<div class="pixel pixel_12"></div>
<div class="pixel pixel_13"></div>
<div class="pixel pixel_14"></div>
<div class="pixel pixel_15"></div>
</div>
</div>
</div>
底部引入js
<script src="js/script.js"></script>
jQuery+css3制作的仿抖音网红时钟罗...
纯css3+jQuery实现抖音网红时钟动画...
一个炫酷的js时钟,变化颜色会在...