css钟表——变形、旋转

今天学了个小玩意儿，用css写钟表
涉及知识点：css动画（animation）、变形（transform）、定位（position）、布局

一如既往先来看使时钟指针旋转的原理

旋转：顾名思义就使用css里面transform：rotate属性

rotateX（）：以X轴为旋转中心旋转
rotateY（）：以Y轴为旋转中心旋转
rotateZ（）：以Z轴为旋转中心旋转

浏览器默认的坐标系是以水平向右为X轴，竖直向下为Y轴，垂直于屏幕（网页）指向用户为Z轴

使元素绕Z轴旋转，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body{display: flex;justify-content: center;align-items: center;}.needle{width: 3px;height: 100px;background-color: red;animation: change 60s steps(60);}@keyframes change{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}</style>
</head>
<body><div class="needle"></div>
</body>
</html>

效果如下

显而易见，元素将会绕Z轴且以自身中心为轴心旋转，而我们需要元素以自身端点为轴心来旋转，实现方法有以下两种

方法①另建一个元素使其盖住指针的一半，让指针只显示一半（这里可以自行尝试）
方法②将元素放入一个父元素中，指针高度为父元素的一半，并将指针在父元素中设为水平居中，给父元素设置旋转的动画，使子元素（指针）跟着父元素旋转而旋转

方法②效果图如下

对应代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body{display: flex;justify-content: center;align-items: center;}.needle-box{width: 300px;height: 300px;background-color: #bfa;animation: change 30s steps(60);}.needle{width: 3px;height: 50%;margin: auto;background-color: red;}@keyframes change{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}</style>
</head>
<body><div class="needle-box"><div class="needle"></div></div>
</body>
</html>

掌握了指针旋转的原理，接下来写时钟就比较容易了

主要的点有以下三点：

①最外部一个类名为clock的div，以表盘图片为背景图片
②将时针、分针、秒针分别写在一个单独的div下
③装指针的div相对于最外层的clock定位

感觉口述不清楚…还是直接写代码比较直观…

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>钟表</title>
</head>
<style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body{display: flex;justify-content: center;align-items: center;}.clock{width: 300px;height: 300px;background: url(./imgs/clock.jpg) center;background-size: 138%;border-radius: 50%;border: 15px double rgb(92, 34, 34);position: relative;}.clock > div{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.hour{width: 40%;height: 40%;animation: run 43200s linear infinite;}.hour div{width: 5px;height: 50%;background-color: #333;margin: auto;}.minute{width: 50%;height: 50%;animation: run 3600s steps(60) infinite;}.minute div{width: 3px;height: 50%;background-color: #333;margin: auto;}.second{width: 55%;height: 55%;animation: run 60s steps(60) infinite;}.second div{width: 3px;height: 50%;background-color: rgb(211, 24, 24);margin: auto;}@keyframes run{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}
</style>
<body><div class="clock"><div class="hour"><div></div></div><div class="minute"><div></div></div><div class="second"><div></div></div></div>
</body>
</html>

效果如下

时钟的背景图（表盘）可以去网上搜索下载，这里附一张（滑稽）

css动画钟表——transform之rotate相关推荐

css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css动画效果 transform transition @keyframes animation 涉及jquery
1.transform: translateY(100px); 但是transform在单独使用的时候并不会产生动画效果, 页面加载的时候就已经在变化后的状态了,所以需要搭配transition使用, ...
CSS 2D 转换 transform translate() rotate() scale() skew() matrix()
CSS transforms 属性允许移动.旋转.缩放和倾斜元素. translate() rotate() scaleX() scaleY() scale() skewX() skewY() sk ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
css动画（transition，translate，rotate，scale）
序言为什么会用css动画呢通过CSS3过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下, 使元素从一种样式变换为另一种样式时为元素添加效果. css动画可以做很多特效,特 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...

css动画钟表——transform之rotate

css钟表——变形、旋转

css动画钟表——transform之rotate相关推荐

最新文章

热门文章