如何简单使用纯CSS3模仿时钟的指针转动

开发工具与关键技术：DW html css3
作者：Mr_肖先生
撰写时间：2019年1月16日

首先我们简单的写好html需要用到的div盒子以及嵌套的内容，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3模仿时钟时针转动</title><link rel="stylesheet" href="css/animation.css">
</head>
<body><div class="box1"><div class="box2"><div class="box3"><a href="#" class="gt">&gt;</a></div><div class="box4"><a href="#" class="lt">&lt;</a></div></div></div>
</body>
</html>

然后我们再对这些html布局写一下基本的css样式
1.我们给div设置宽、高、背景颜色等样式，再把它们position定位到想要的位置
2.给想要转动的盒子设置一个transform-origin,这是一句设置原点的代码
3.其中的核心是@keyframes（关键帧） animation这是一句创建一个动画的代码，创建完之后当然还要调用才可以实现动画效果
4.我们在想要转动的盒子里调用这个动画函数的代码，设置animation的子属性
5.关于animation的子属性有：
animation:animation-name;(调用动画)
animation-duration (动画播放时间)
animation-timing-function (动画播放方式)
animation-delay (动画开始播放时间)
animation-iteration-count （动画播放次数）
两个参数值：infinite(无限次)；n(具体次数)

*{margin:50px auto;
}
.box1{width: 300px;height: 300px;background: purple;position: relative;border-radius: 50%;
}
.box2{width: 5px;height: 5px;background: #fff;position: absolute;top: 100px;left: 145px;border-radius: 5px;
}
.box3{width: 100px;position: absolute;top: -48px;right: -98px;border-top: 1px solid #fff;transform-origin: left top;animation: animation 3600s linear infinite;
}
.box4{width: 120px;position: absolute;top: -48px;right: 3px;border-top: 1px solid #fff;transform-origin: right top;animation: animation 60s linear infinite;
}
.lt{position: absolute;top: -62px;left: -5px;text-decoration-line: none;color: #fff;
}
.gt{position: absolute;top: -62px;right: -5px;text-decoration-line: none;color: #fff;
}
@keyframes animation{0%{transform: rotate(0);}100%{transform: rotate(360deg);}
}

这样，一个简单模仿的时针转动就完成了！

如何简单使用纯CSS3模仿时钟的指针转动相关推荐

html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码
进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了. 要解决这些 ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
超可爱纯CSS3实现的小猪、小老鼠、小牛
<span style="font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif; background-color: rgb ...
纯CSS3实现轮播图
前言纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

如何简单使用纯CSS3模仿时钟的指针转动

如何简单使用纯CSS3模仿时钟的指针转动相关推荐

最新文章

热门文章