如何使用css3制作圆形旋转动画（附完整代码）

程序猿 • 2025年12月24日 02:46:54 • 好文分享 • 阅读 0

随着css3的广泛应用，人们浏览的web网页越来越多元化，而前端开发者也越来越注重人机交互和用户体验。从一开始的文字到后来的图片，以至于现在的动画特效，人们对于网页的要求也越来越挑剔，那么今天给大家展示一下如何使用css3制作旋转动画。本文在介绍如何使用css3制作旋转动画的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。

实例如图所示

使用css3制作旋转动画的思路

首先我们需要使用div画出这8个图标，我们通过观察可以发现，8个图标可以分成4组div，并且可以将圆形等分为8份，这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中，令其旋转起来需要使用css3中的旋转属性：第一个div先保持不动，第二个div旋转45°，以此类推，下一个div都要比上一个div多旋转45°就可以实现布局。

立即学习“前端免费学习笔记（深入）”；

使用css3制作旋转动画的步骤

步骤一：画出8个图标设置成4个div

    
                        @@##@@            产品中心        
                    @@##@@            官方网站        
    
                        @@##@@            代理查询        
                    @@##@@            后台登录        
    
                        @@##@@            公司资质        
                    @@##@@            质检报告        
    
                        @@##@@            代理登录        
                    @@##@@            代理授权

步骤二：使用css3布局

 .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:0;            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:1;        }        .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;        }

步骤三：为每个div创建动画

第一个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);             }        }

注意

因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。

以上就是如何使用css3制作圆形旋转动画（附完整代码）的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612135.html

css3 旋转动画

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

408.3K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

图文详解CSS中颜色的四种表示方法

上一篇 2025年12月24日 02:46:48

CSS3中的pointer-events属性介绍

下一篇 2025年12月24日 02:47:02

CSS3中的pointer-events属性介绍

本章给大家介绍一个css3中超实用的属性：css3 pointer-events属性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值…

程序猿
好文分享 2025年12月24日
0000
好文分享

css3如何添加文字阴影效果？text-shadow设置文字阴影效果

阴影效果是一个常见也很实用的效果，相信有些朋友在使用阴影效果来美观网页页面时，有时会有一些疑问，比如：字体文字阴影是怎样设置的等等。那么本章就给大家谈谈css3是如何设置字体文字阴影的。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。其实在css3中有一个很实用的属性可以给字体文字…

程序猿
2025年12月24日
0000
如何使用CSS3实现弹性盒子布局方式

传统的布局方案是依据float，display和position的盒子模型，随着开发语言的完善，弹性盒布局模型成为web开发人员工具箱中的一个很好的工具，因为摈弃了传统盒子复杂的设置并且可以很完美的契合开发者对于页面兼容性的要求，即当页面需要适应不同的屏幕大小以及设备类型时依然可以确保元素拥有恰当的…

程序猿
2025年12月24日 • 好文分享
0000
css3文字怎么描边？css3字体描边的实现方法

在网页中有时会看到文字的轮廓都用边描绘出来，这其实就是字体的描边，以前为文字描边可能都会需要借助ps之类的工具，但是自从css3出现以后，文字的描边就不需要借助其他工具就可以直接实现了，所以，接下来这篇文章就来给大家分享关于css3实现字体描边的方法。推荐手册：CSS在线手册首先我们来看一看cs…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

如何使用css3实现图片的自动轮播特效（附完整代码）

本文在介绍如何使用css3实现图片的轮播特效的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。大家在浏览网页的过程中，会遇见一种名叫图片轮播的特殊效果：在同样的位置不同的图片会根据时间的变化循环播放，达到一种类似于播放幻灯片的效果。那么我们在网页开发的过程中如何实现图片的轮播特效…

程序猿
2025年12月24日
0000
如何使用css3画三角形？css3实现三角形的画法原理介绍

css的出现让网页有了更多的风格，尤其是css3的应用，让网页呈现了更多好看的效果，那么，css3中可以有哪些效果呢？今天的这篇文章就来教大家如何使用css3画出一个三角形？话不多说，让我们来直接看正文。首先看一下css3画三角形的原理我们先来看一段代码：当我们设置一个div其width与he…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

css3的颜色线性渐变属性：几种颜色之间的平稳过渡（附完整代码）

当下web网页开发的过程中更多在意的是人机交互和用户体验，最直观的体现在网页色彩的多样化上面。本篇文章给大家带来的内容是关于如何使用css3实现颜色线性渐变属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。手册推荐：css学习手册使用css3实现线性渐变的简介 css3中定义了…

程序猿
2025年12月24日
0000
好文分享

css3如何设置文字阴影？css3用text-shadow设置文字阴影的方法

css3中有很多的属性用起来都是非常的方便简洁，所以，今天的这篇文章就来给大家介绍一个css3中的text-shadow属性，这个属性可以为字体添加阴影, 通过为text-shadow属性设置相关的属性值。下面我们就来看一看css3用text-shadow设置文字阴影的具体内容。首先我们来详细的看…

程序猿
2025年12月24日
0000
CSS3新属性currentColor的使用与兼容性介绍

本章给大家说说css3新属性currentcolor的使用以及currentcolor属性的兼容性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如： .xxx { border: 1px sol…

程序猿
好文分享 2025年12月24日
0000
好文分享

如何使用CSS的Grid布局实现小狗邮票（附源码）

本篇文章给大家带来的内容是关于如何使用css的grid布局实现小狗邮票（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读定义 dom…

程序猿
2025年12月24日
0000
如何使用css3新增属性content？content属性的使用（代码实例）

本章给大家介绍如何使用css3新增属性content？content属性的使用（代码实例），详解css3 content（内容）属性，让大家知道如何利用content属性如何插入清除浮动，插入内容。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。一、详解content属性 1、co…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

如何使用CSS的Grid布局实现小鸡邮票（附代码）

本篇文章给大家带来的内容是关于如何使用css的grid布局实现小鸡邮票（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读定义 dom…

程序猿
2025年12月24日
0000
好文分享

如何使用CSS的Grid布局实现小松鼠邮票的效果（附源码）

本篇文章给大家带来的内容是关于如何使用css的grid布局实现小松鼠邮票的效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-…

程序猿
2025年12月24日
0000
好文分享

如何使用纯CSS实现文本的淡入动画效果（附源码）

本篇文章给大家带来的内容是关于如何使用纯css实现文本的淡入动画效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读定义 dom，…

程序猿
2025年12月24日
0000
好文分享

css3鼠标移入特效：如何实现div颜色渐变和放大缩小的效果

本篇文章给大家带来的内容是关于css3中如何利用transition实现鼠标悬停的时候div的颜色、高度和宽度都改变的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们平时在浏览web网页的时候会见到这样一种情况：当鼠标悬停的某个区域的时候，该区域的形状会在指定时间内进行放大…

程序猿
2025年12月24日
0000
好文分享

使用css3在网页中实现五角星样式（原理解析）

本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们平时在web网页中看到的各种图形包括正方形，长方形，三角形，圆形等，大部分是使用css3或者背景图片来实现的，但是在开发的过程中，使用背景图片的截取有着很多的不足，比…

程序猿
2025年12月24日
0000
好文分享

CSS3实现动态打开大门效果（代码实例）

本章给大家介绍css3实现动态打开大门效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助先看看效果图：动态打开大门效果主要运用到了3D旋转和定位技术。具体步骤如下： 1、首先在页面主体加三个很简单的div标签： 2、给外层盒子（.door）加上基本的属性、背景、视…

程序猿
2025年12月24日
0000
前端开发CSS3技术经验分享

最近对前端的一些知识进行了归纳总结，方便自己以后查看，同时也分享给大家，希望大家少走弯路。这篇文章主要总结了css3中的相关知识，有需要的朋友可以参考一下，希望对你有用。 1、设置字体（兼容所有浏览器） @font-face {font-family: ‘iconfont’;src: url(“fo…

程序猿
好文分享 2025年12月24日
0000
好文分享

css3+js绘制动态时钟（附代码）

本章给大家介绍如何使用css3与js实现动态时钟效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看看效果图：首先,思考了一下页面的布局,大致需要4层div,最底层是一个表盘的背景图,然后其余3层分别是时针,分针,秒针的图层. html代码如下：变量名是随便起的,不要介意;…

程序猿
2025年12月24日
0000
好文分享

如何使用CSS和D3实现光斑粒子交相辉映的效果（附源码）

本篇文章给大家带来的内容是关于如何使用css和d3实现光斑粒子交相辉映的效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-…

程序猿
2025年12月24日
0000

发表回复

登录后才能评论

如何使用css3制作圆形旋转动画（附完整代码）

关于作者

相关推荐

发表回复