css animation 动画训练----写一个只有秒针会动的简单时钟

效果

html部分

    <div class="box"><!-- 圆心 --><div class="dot"></div><!-- 表盘刻度线 --><div class="section"><ul><li><span></span></li><li><span></span></li><li><span></span></li><li><span></span></li></ul></div><!-- 时针 分针 秒针--><div class="hours"></div><div class="mins"></div><div class="seconds"></div></div>

CSS部分

.box {position: relative;margin: 100px auto;width: 200px;height: 200px;border: 6px solid black;border-radius: 50%;}/* 表盘中心点 */.box::after {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background-color: black;border-radius: 50%;}/* 表盘刻度线 */.section span {display: inline-block;position: absolute;left: 50%;top: 0;height: 30px;width: 3px;background-color: rgba(0, 0, 0, 0.2);}li {list-style: none;}/* 通过改变旋转原点的方式让刻度线绕着中心旋转 */.section ul li:nth-child(1) span {transform-origin: 50% 100px;/* 先位移再旋转 */transform: translate(-50%) rotate(90deg);}.section ul li:nth-child(2) span {transform-origin: 50% 100px;transform: translate(-50%) rotate(180deg);}.section ul li:nth-child(3) span {transform-origin: 50% 100px;transform: translate(-50%) rotate(270deg);}.section ul li:nth-child(4) span {transform-origin: 50% 100px;transform: translate(-50%) rotate(3600deg);}.hours {position: absolute;left: 50%;bottom: 50%;transform-origin: center bottom;transform: translate(-50%) rotate(45deg);height: 30px;width: 6px;background-color: black;}.mins {position: absolute;left: 50%;bottom: 50%;height: 40px;transform-origin: center bottom;transform: translate(-50%) rotate(90deg);width: 4px;background-color: black;}.seconds {position: absolute;left: 50%;bottom: 50%;width: 2px;height: 55px;background-color: red;transform-origin: center bottom;transform: translate(-50%);animation: rotate 60s steps(60) infinite;}/* 秒针旋转动画 */@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

css animation 动画训练----写一个只有秒针会动的简单时钟相关推荐

CSS animation动画:实现台球运动效果
CSS animation动画:实现台球运动效果在学习animation动画的时候,我就得这个特别有意思,以后还想制作其他的超酷的效果,以前觉得弄特效的特别帅,感觉现在年龄已经老了,要是从小就有那个 ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
[css] 让你手写一个reset的文件，你应该怎么写？要考虑哪些方面呢？
[css] 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢? 肯定首先考虑的是浏览器本身的样式,还有浏览器兼容.margin,padding ==>0ul,ol list styl ...
使用css animation动画做边框闪动效果
使用css animation动画做边框闪动效果在拖拽div节点时,给div节点添加diagramTop-item-click样式,使用css animation动画0.5秒执行一次. css样式 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
用Java写一个年薪计算器，助你简单完成大量税前税后总薪计算量
每个有规模一点的公司都会有会计部门这是毋庸置疑的,但是会计的工作真的如大部分人想的那么简单,只是在每个月的最后几天才忙得不可开交吗 ? 答案当然不是,不然这个岗位早就人满为患了. 目前就我了解到的会计 ...
css animation动画
css 动画: 动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 必要元素: a.通过@keyframes指定动画序列:自动补间动画,确定两 ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...

css animation 动画训练----写一个只有秒针会动的简单时钟

css animation 动画训练----写一个只有秒针会动的简单时钟相关推荐

最新文章

热门文章

css animation 动画训练----写一个只有 秒针会动的简单时钟

css animation 动画训练----写一个只有 秒针会动的简单时钟相关推荐

最新文章

热门文章

css animation 动画训练----写一个只有秒针会动的简单时钟

css animation 动画训练----写一个只有秒针会动的简单时钟相关推荐