参考原文：https://www.cnblogs.com/zhaoliner/p/6098717.html
实现效果：https://lixianshengchao.github.io/clock/
文章图片
【网站建设|canvas绘画时钟】
时钟 - 锐客网
#bg {
width: 150px;
height: 150px;
margin-top:75px;
background: url(photo.jpg);
border-radius:300px;
background-repeat:no-repeat;
background-size:contain;
position: absolute;
z-index: -1;
animation: myRotate 10s linear infinite;
}
@-webkit-keyframes myRotate {
0% {
-webkit-transform: rotateZ(0deg);
}
70% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）
- quill|Quill编辑器插入自定义HTML记录