css 利用animation和transform 设置鸭子表
CSS 设置 利用 animation transform
2023-09-11 14:20:09 时间
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表</title> 6 <style> 7 8 9 /* 设置关键帧 */ 10 @keyframes clock{ 11 from{ 12 transform: rotateZ(0); 13 } 14 to{ 15 transform: rotateZ(1turn); 16 } 17 } 18 19 /* 设置表盘的样式 */ 20 .outer{ 21 width: 500px; 22 height: 500px; 23 /* border: 10px solid black; */ 24 border-radius: 50%; 25 margin: 0 auto; 26 27 /* 设置背景图片 */ 28 background: url(img/bg3.jpg) 0 0/cover; 29 30 /* 开启相对定位 */ 31 position: relative; 32 } 33 34 /* 设置秒针的样式 */ 35 .sec, 36 .min, 37 .hour{ 38 /* 开启绝对定位 */ 39 position: absolute; 40 width: 2px; 41 height: 46%; 42 background-color: #f00; 43 44 left: 0; 45 right: 0; 46 bottom: 50%; 47 margin: 0 auto; 48 49 /* 设置变形的原点 */ 50 transform-origin: bottom; 51 52 /* animation: clock 60s steps(60); */ 53 } 54 55 /* 秒针 */ 56 .sec{ 57 animation: clock 10s steps(60) infinite; 58 } 59 60 61 /* 分针 */ 62 .min{ 63 width: 4px; 64 height: 42%; 65 background-color: #000; 66 67 animation: clock 600s steps(60) infinite; 68 } 69 70 /* 时针 */ 71 .hour{ 72 width: 6px; 73 height: 38%; 74 background-color: #000; 75 76 animation: clock 7200s linear infinite; 77 } 78 79 80 81 </style> 82 </head> 83 <body> 84 85 <!-- 创建表的外部容器 --> 86 <div class="outer"> 87 88 <!-- 创建创建时针 --> 89 <div class="hour"></div> 90 91 <!-- 创建创建分针 --> 92 <div class="min"></div> 93 94 <!-- 创建秒针 --> 95 <div class="sec"></div> 96 97 </div> 98 99 100 101 </body> 102 </html>
相关文章
- CSS动画基础:常用动画效果的设置
- CSS动画实例:旋转的圆角正方形
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题
- 【Css】通过计算公式(加、减、乘、除)实现width和height的动态设置
- css 文本省略号设置
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?
- CSS 设置背景图片
- CSS(字体相关知识以及css三种样式表使用方法)
- js 修改css属性值
- 通过!important设置css样式优先级
- 浏览器工作原理:浅析浏览器渲染进程 - HTML、CSS和JavaScript是如何变成页面的?(上)
- CSS默认样式表
- CSS魔法堂:你真的懂text-align吗?
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(二)Css 背景
- vue-解决Vue打包上线之后部分CSS不生效的问题
- CSS 加粗(css font-weight)