CSS3做齿轮旋转的动画

大致思路：

1、先建立一个大盒子，并设为圆形，然后在其中添加齿轮图片，使用z-index实现齿轮的层次感。

2、为齿轮添加旋转特效，注意旋转角度

布局：

<div class="cricle"><div class="rotate1 gear1"><img src="./img/bg-gear-f_089274a.png" alt=""></div><div class="rotate1 gear2"></div><div class="rotate1 gear3"></div><div class="rotate2 gear4"></div><div class="rotate3 gear5"></div><div class="rotate3 gear6"></div></div>

样式：

.cricle{position: relative;width: 200px;height: 200px;left: 50%;top: 150px;margin-left: -100px;border-radius: 50%;background-color: #000;overflow: hidden;}.gear1{left: 50%;top: 50%;margin-left: -63px;margin-top: -63px;animation: shun 5s linear infinite;}.rotate1{width: 126px;height: 126px;z-index: 3;}.rotate1,.rotate2,.rotate3{position: absolute;transform: rotate(0);/* 旋转的中心点 */transform-origin: center;}.rotate2,.rotate3{width: 160px;height: 160px;z-index: 2;}.rotate3{z-index: 1;}.gear2{left: -60px;}.gear2,.gear3{top: 101px;background: url('./img/bg-gear-f_089274a.png') no-repeat;animation: ni 5s linear infinite;}.gear3{right: -60px;}.gear4,.gear5,.gear6{right: -30px;top: 60px;background: url('./img/bg-gear-br_8d4d4b5.png') no-repeat;animation: shun 5s linear infinite;}.gear5{left: -10px;right: auto;top: 90px;}.gear6{top: -40px;right: -12px;animation: ni 5s linear infinite;}@keyframes shun {0%{transform: rotate(0);}100%{transform: rotate(360deg);}}@keyframes ni{0%{transform: rotate(0);}100%{transform: rotate(-360deg);}}

查看效果：

CSS3做齿轮旋转的动画相关推荐

html头像动画,用CSS3实现头像旋转效动画
这次给大家带来用CSS3实现头像旋转效动画,用CSS3实现头像旋转效动画的注意事项有哪些,下面就是实战案例,一起来看一下. 鼠标未放上效果: 鼠标放上之后旋转效果: transition: all 2 ...
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
用css3做一个求婚小动画
概述本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细代码下载:http://www ...
CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...
前端开发，用 css3 做一个求婚小动画
首先放张效果图然后一步步分析一下首先是刚出现的新郎的动画 .w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: ...
如何用css3做一个旋转的魔方
代码: 效果图
CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

CSS3做齿轮旋转的动画

CSS3做齿轮旋转的动画相关推荐

最新文章

热门文章