如何使用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

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

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

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

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

CSS3中的pointer-events属性介绍

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

好文分享

如何使用CSS制作旋转动画的实现步骤

如何使用CSS制作旋转动画的实现步骤在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步骤一：创建HTML结构首先，在HTML中创建一个元素来展示旋转动画效果。可以是一个图像、文…

程序猿
2025年12月24日
0000
带你吃透CSS3属性：transition 与 transform

本篇文章带大家了解下css 中的 transition (过渡) 和 transform (动画) 属性，这两个属性的参数确实比较复杂，它们可以做出 css 的一些基础动画效果，平移，旋转，倾角……等等，这些也是我早期学习 css 的难记易忘之处，今天给大家详细总结出来。一…

程序猿
2025年12月24日 • 好文分享
0000
一文详解CSS3中的Flex布局

本篇文章带大家了解一下css3中的flex布局，希望对大家有所帮助！简介什么是Flex布局 Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成： flex容器（flex container）flex项（flex items）主轴（main axis）交叉轴（cro…

程序猿
2025年12月24日 • 好文分享
0000
【整理总结】这些高级CSS技巧，你会几种？

本篇文章带你玩转css，分享一些高级css技巧，快来看看你是否都会呀！学习目标能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式能够说出常见的布局技巧精灵图 1. 为什么需要精灵图？客户端要访问一个网页时，浏览器会向服务器发送请求，服务器接收到请求后，会…

程序猿
2025年12月24日 • 好文分享
0000
手把手教你使用CSS实现酷炫六边形网格背景图

本篇文章给大家分享不规则图形背景排版高阶技巧，介绍一下如何使用css实现酷炫六边形网格背景图，希望对大家有所帮助！今天，收到一个很有意思的提问，如何实现类似如下的背景效果图：嗯？核心主体是由多个六边形网格叠加形成。立即学习“前端免费学习笔记（深入）”；那么我们该如何实现它呢？使用纯 CSS …

程序猿
2025年12月24日 • 好文分享
0000
CSS新特性学习：方向裁切overflow:clip

本篇文章将介绍一个新特性，从 chrome 90 开始，overflow 新增的一个新特性 — overflow: clip，使用它，轻松的对溢出方向进行控制。 overflow: clip 为何首先，简单介绍下 overflow: clip 的用法。 overflow: clip: …

程序猿
2025年12月24日 • 好文分享
0000
看看CSS如何利用计数器来实现长按点赞累积动画

本篇文章给大家分享一个css自定义计数器的使用小技巧，聊聊如何利用它实现长按点赞累积动画，希望对大家有所帮助！【推荐学习：css视频教程】在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下立即学习“前端免费学习笔记（深入）”；这个动画有两部分组成，其中这个随机表情的实现可以参考…

程序猿
2025年12月24日 • 好文分享
0000
详解用SVG给 favicon 添加标识

怎么使用svg给 favicon 添加标识？下面本篇文章给大家介绍一下使用 svg 生成带标识的 favicon的方法，希望对大家有所帮助！之前做了一个 Chrome 插件，可以根据地址的不同生成不同的图标，这样可以很方便的区分不同的开发环境，效果如下主要实现过程其实不复杂，首先获取网站 fav…

程序猿
2025年12月24日 • 好文分享
0000
巧用CSS实现各种奇形怪状按钮（附代码）

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？本文基于一些高频出现在设计稿中的，使用 css 实现稍微有点难度和技巧性的按钮，讲解使用 css 如何尽可能的实现它们。【推荐学习：…

程序猿
2025年12月24日 • 好文分享
0000
巧用CSS3滤镜制作文字快闪切换动画效果！

本篇文章带大家看看怎么利用css3滤镜实现高级感拉满的文字快闪切换动画效果，希望对大家有所帮助！今天偶然看到这样一类很有意思的文字快闪动画：这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。【推荐学习：css视频教程】立即学习“前端免费学习笔记（深入）”；当然，今天并非是想用 CS…

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

css3怎么改首字母颜色

在css3中，可用“:first-letter”选择器和color属性来修改首字母颜色，语法“元素:first-letter{color:颜色值;}”；“:first-letter”可选中元素的首字母，color可给选中的字母设置文本颜色。本教程操作环境：windows7系统、CSS3&&…

程序猿
2025年12月24日
0000
快看！10个不错的CSS实用小技巧（分享）

本篇文章给大家分享10个不错的css实用小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！ CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。【推荐学习：css视频教程】 1、打字效果立即学…

程序猿
2025年12月24日 • 好文分享
0000
原来利用纯CSS也能实现文字轮播与图片轮播！

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯css也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！今天，分享一个实际业务中能够用得上的动画技巧。【推荐学习：css视频教程】巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：立即学习“前端…

程序猿
2025年12月24日 • 好文分享
0000
一文了解CSS3中的新属性object-view-box

本篇文章带大家一起深入了解一下css3中的新特性object-view-box属性，聊聊新属性的作用和使用方法，希望对大家有所帮助！在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。在这篇文章…

程序猿
2025年12月24日 • 好文分享
0000
CSS变量是怎么工作的？如何使用内联CSS变量进行布局？

本篇文章带大家了解一下css变量，聊聊css变量是怎么工作的，并介绍一下如何使用内联css变量，以提高灵巧布局效率，希望对大家有所帮助！有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实…

程序猿
2025年12月24日 • 好文分享
0000
深入探究CSS鼠标指针交互效果

今天，来实现这样一个有意思的交互效果，通过这个交换效果来聊聊前端鼠标指针交互，希望对大家有所帮助！将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。【推荐学习：css视频教程】修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：立即学…

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

纯CSS3怎么实现波浪效果？（代码示例）

纯css3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 svg 和 css 动画制作波浪效果的方法，希望对大家有所帮助！随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效…

程序猿
2025年12月24日
0000
CSS3动画实战之：超酷炫的粘性气泡效果

本篇文章带大家聊聊css3动画，看看怎么使用纯 css 实现超酷炫的粘性气泡效果，希望对大家有所帮助！最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。【推荐学习：css视频教程】立即学习“前端免费学习笔记（深入）”；其源代码在：Code…

程序猿
2025年12月24日 • 好文分享
0000
聊聊CSS3中的4个逻辑选择器（快速入手）

本篇文章给大家介绍一下css3中的逻辑选择器，聊聊里面的 4 名成员，希望对大家有所帮助！在 CSS 选择器家族中，新增这样一类比较新的选择器 — 逻辑选择器，目前共有 4 名成员： :is:where:not:has 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。…

程序猿
2025年12月24日 • 好文分享
0000
一文了解CSS3中的新特性 ::target-text 选择器

本篇文章带大家一起深入了解一下css3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！最近在 MDN 官网看到了一个从未见过的选择器，::target-text。简单研究了一下，觉得还有点意思，也有点实际用处，现在分享一下。【推荐学习：css视频教…

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

发表回复

登录后才能评论

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

关于作者

相关推荐

发表回复