css3制作旋转动画
现在的css3真是强大，之前很多动画都是用jq来实现，但是css3制作的动画要比jq实现起来简单很多，今天呢，我自己也写了一个css旋转动画和大家分享。效果如下面的图片
思路：1.制作之前呢，我们先来整理一下思路，这个圆轴轨迹上一共有八个圆。
仔细看的话，你会发现一个规律，那就是一个月是360度的，里面放了八个圆，也就是每个圆都是占了45度，然后平均的在圆轴上面分布开来。有了这个发现之后，我们就开始想想该怎么布局好啦。下面是我的布局方式，可以给大家参考一下：
我是每两个垂直对应的圆就放在同一个div中，八个圆的话，那就是四个div，让div展示成上面的效果的话，需要用到css3的旋转属性。让第一个div保持0deg不变，然后第二个div呢就旋转45deg，以此类推，下一个div都要比上一个div多旋转45deg，就出现了上面的这个布局啦。我在这边贴上代码：
html代码：
<div class="out_circle">
<div class="slide"></div>
<div class="nav_circle r1">
<div class="img_top img">
<img src="data:images/menu.png">
<a href="#">产品中心</a>
</div>
<div class="img_bottom img" >
<img src="data:images/menu_01.png">
<a href="#">官方网站</a>
</div>
</div>
<div class="nav_circle r2">
<div class="img_top img">
<img src="data:images/menu_02.png">
<a href="#">代理查询</a>
</div>
<div class="img_bottom img" >
<img src="data:images/menu_03.png">
<a href="#">后台登录</a>
</div>
</div>
<div class="nav_circle r3">
<div class="img_top img">
<img src="data:images/menu_04.png">
<a href="#">公司资质</a>
</div>
<div class="img_bottom img" >
<img src="data:images/menu_05.png">
<a href="#">质检报告</a>
</div>
</div>
<div class="nav_circle r4">
<div class="img_top img">
<img src="data:images/menu_06.png">
<a href="#">代理登录</a>
</div>
<div class="img_bottom img" >
<img src="data:images/menu_07.png">
<a href="#">代理授权</a>
</div>
</div>
</div>
css代码：
.out_circle{
width:440px;
height:440px;
border:1px solid;
border-radius:50%;
margin:30px auto 0 auto;
position: relative;
}
.nav_circle{
width:110px;
height:440px;
float:left;
position:absolute;
top:;
left:169px;
text-align:center;
}
.img_top{
top:-27px;
-webkit-transform: rotate(0deg);
}
.img_bottom{
top:316px;
-webkit-transform: rotate(0deg);
}
.img_top img,.img_bottom img{
width:77px;
height: 77px;
}
.img_top,.img_bottom{
position: relative;
z-index:;
}
.nav_circle .img a{
position: absolute;
top:10px;
left:94px;
width: 52px;
}
.r1{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
animation: rotate 10s linear infinite;
-webkit-animation:rotate 10s linear infinite;
-moz-animation:rotate 10s linear infinite;
-o-animation:rotate 10s linear infinite;
}
.r1 .img{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
animation:rotate_c1 10s linear infinite;
-webkit-animation:rotate_c1 10s linear infinite;
}
.r2{
transform:rotate(45deg) skew(0deg) scale(1);
-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(45deg) skew(0deg) scale(1);
animation: rotatef 10s linear infinite;
-webkit-animation:rotatef 10s linear infinite;
-moz-animation:rotatef 10s linear infinite;
-o-animation:rotatef 10s linear infinite;
}
.r2 .img {
transform:rotate(-45deg) skew(0deg) scale(1);
-ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-45deg) skew(0deg) scale(1);
animation:rotate_c2 10s linear infinite;
-webkit-animation:rotate_c2 10s linear infinite;
}
.r3 {
transform:rotate(90deg) skew(0deg) scale(1);
-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(90deg) skew(0deg) scale(1);
animation: rotates 10s linear infinite;
-webkit-animation:rotates 10s linear infinite;
-moz-animation:rotates 10s linear infinite;
-o-animation:rotates 10s linear infinite;
}
.r3 .img{
transform:rotate(-90deg) skew(0deg) scale(1);
-ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-90deg) skew(0deg) scale(1);
animation:rotate_c3 10s linear infinite;
-webkit-animation:rotate_c3 10s linear infinite;
}
.r4{
transform:rotate(135deg) skew(0deg) scale(1);
-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(135deg) skew(0deg) scale(1);
animation: rotatet 20s linear infinite;
-webkit-animation:rotatet 10s linear infinite;
-moz-animation:rotatet 10s linear infinite;
-o-animation:rotatet 10s linear infinite;
}
.r4 .img{
transform:rotate(-135deg) skew(0deg) scale(1);
-ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-135deg) skew(0deg) scale(1);
animation:rotate_c4 10s linear infinite;
-webkit-animation:rotate_c4 10s linear infinite;
}
布好局之后呢，最大的亮点来了，没错，就是让它动起来。接下来就是要解决旋转的问题了，在创建动画的时候，我们要考虑一下。就是它旋转是按着圆轴来旋转的，就是说它转一圈之后，还是会回到它原来的位置上，这个相信大家都能理解。所以每个圆都要单独创建动画：
css3动画的代码：
第一个div的动画：
@keyframes rotate{
0%{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
}
100%{
transform:rotate(360deg) skew(0deg) scale(1);
-ms-transform:rotate(360deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(360deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(360deg) skew(0deg) scale(1);
}
}
第二个div的动画：
@keyframes rotatef{
0%{
transform:rotate(45deg) skew(0deg) scale(1);
-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(45deg) skew(0deg) scale(1);
}
100%{
transform:rotate(405deg) skew(0deg) scale(1);
-ms-transform:rotate(405deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(405deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(405deg) skew(0deg) scale(1);
}
}
第三个div的动画：
@keyframes rotates{
0%{
transform:rotate(90deg) skew(0deg) scale(1);
-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(90deg) skew(0deg) scale(1);
}
100%{
transform:rotate(450deg) skew(0deg) scale(1);
-ms-transform:rotate(450deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(450deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(450deg) skew(0deg) scale(1);
}
}
第四个div的动画：
@keyframes rotatet{
0%{
transform:rotate(135deg) skew(0deg) scale(1);
-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(135deg) skew(0deg) scale(1);
}
100%{
transform:rotate(495deg) skew(0deg) scale(1);
-ms-transform:rotate(495deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(495deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(495deg) skew(0deg) scale(1);
}
}
兼容各种浏览器内核的写法我这边没写，你们自己添加前缀就可以了。因为加上去代码会太长，所以这边就不加了，望能理解。
这边加上之后，转动是可以转动了，但是会出现一个问题，如图所示：
要解决这个bug的话，就需要div里面的子元素也跟着一起转动也行，怎么转动呢？可能是要和转动的父元素的转动方向相反才能维持正常状态啦。下面呢，我就直接贴上子元素转动的代码吧
@keyframes rotate_c1{
0%{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
}
100%{
transform:rotate(-360deg) skew(0deg) scale(1);
-ms-transform:rotate(-360deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-360deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-360deg) skew(0deg) scale(1);
}
}
@keyframes rotate_c2{
0%{
transform:rotate(-45deg) skew(0deg) scale(1);
-ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-45deg) skew(0deg) scale(1);
}
100%{
transform:rotate(-405deg) skew(0deg) scale(1);
-ms-transform:rotate(-405deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-405deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-405deg) skew(0deg) scale(1);
}
}
@keyframes rotate_c3{
0%{
transform:rotate(-90deg) skew(0deg) scale(1);
-ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-90deg) skew(0deg) scale(1);
}
100%{
transform:rotate(-450deg) skew(0deg) scale(1);
-ms-transform:rotate(-450deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-450deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-450deg) skew(0deg) scale(1);
}
}
@keyframes rotate_c4{
0%{
transform:rotate(-135deg) skew(0deg) scale(1);
-ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-135deg) skew(0deg) scale(1);
}
100%{
transform:rotate(-495deg) skew(0deg) scale(1);
-ms-transform:rotate(-495deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-495deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
-o-transform:rotate(-495deg) skew(0deg) scale(1);
}
}
注意：创建好动画之后，别忘了给相应的类添加动画名，不然是转动不起来的，因为css3不是所有浏览器都完全支持的，所以一定要记得添加内核前缀名
好啦，旋转动画现在就完成了，其实只要思路对了，实现起来那是非常简单的。用其他布局方法也是可以实现的。如果你们有时间的，也可以自己去尝试一下
css3制作旋转动画的更多相关文章
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- CSS3制作旋转的小风车
制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...
- css3制作网页动画
一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...
- css3制作旋转立方体相册
首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种 ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- [css3]圆盘旋转动画
效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来 知识点: [html+css] 1.logo水平垂直居中于圆盘内,用到的样式 position: absolute; left: 0; ...
随机推荐
- ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
- ElasticSearch 5学习(10)——结构化查询（包括新特性）
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- 了不起的 nodejs-TwitterWeb 案例 bug 解决
了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...
- python与c互相调用
虽然python开发效率很高,但作为脚本语言,其性能不高,所以为了兼顾开发效率和性能,通常把性能要求高的模块用c或c++来实现或者在c或c++中运行python脚本来处理逻辑,前者通常是python中 ...
- 创建ABPboilerplate模版项目
本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备 开发环境: Visual Studio 2015 update ...
- Atitit.技术管理者要不要自己做开发？？
Atitit.技术管理者要不要自己做开发?? 1. 为什么很多管理者不能自己亲自做了1 1.1. 沟通成本多了1 1.2. .组织分散. 1 1.3. 会议多 .协调多 1 1.4. 问题的根源在于我 ...
- .NET面试题系列[7] - 委托与事件
委托和事件 委托在C#中具有无比重要的地位. C#中的委托可以说俯拾即是,从LINQ中的lambda表达式到(包括但不限于)winform,wpf中的各种事件都有着委托的身影.C#中如果没有了事件,那 ...
- H5图片压缩与上传
接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了.意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干 ...
- [.NET领域驱动设计实战系列]专题二：结合领域驱动设计的面向服务架构来搭建网上书店
一.前言 在前面专题一中,我已经介绍了我写这系列文章的初衷了.由于dax.net中的DDD框架和Byteart Retail案例并没有对其形成过程做一步步分析,而是把整个DDD的实现案例展现给我们,这 ...
- 虚拟机体验之 VirtualBox 篇 —— 性能强大的经典架构
前两篇体验了 QEMU 和经过 KVM 加速的 QEMU,并体验了第三方虚拟机管理工具 virt-manager,让我们见识了开源社区的强大和开源虚拟机软件的高质量和高性能.这一篇,我来剖析一下 Vi ...