简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

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

坏嘻嘻
发布： 2018-09-26 09:59:21
原创
7745 人浏览过

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

实例如图所示

1034530-20161229113220257-1901912558.gif

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

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

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

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

<div class="out_circle">
    <div class="slide"></div>
    <div class="nav_circle r1">
        <div class="img_top img">
            <img src="images/menu.png">
            <a href="#">产品中心</a>
        </div>
        <div class="img_bottom img" >
            <img src="images/menu_01.png">
            <a href="#">官方网站</a>
        </div>
    </div>
    <div class="nav_circle r2">
        <div class="img_top img">
            <img src="images/menu_02.png">
            <a href="#">代理查询</a>
        </div>
        <div class="img_bottom img" >
            <img src="images/menu_03.png">
            <a href="#">后台登录</a>
        </div>
    </div>
    <div class="nav_circle r3">
        <div class="img_top img">
            <img src="images/menu_04.png">
            <a href="#">公司资质</a>
        </div>
        <div class="img_bottom img" >
            <img src="images/menu_05.png">
            <a href="#">质检报告</a>
        </div>
    </div>
    <div class="nav_circle r4">
        <div class="img_top img">
            <img src="images/menu_06.png">
            <a href="#">代理登录</a>
        </div>
        <div class="img_bottom img" >
            <img src="images/menu_07.png">
            <a href="#">代理授权</a>
        </div>
    </div>
</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制作圆形旋转动画（附完整代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css3 旋转动画
来源：php.cn
上一篇：CSS3中的pointer-events属性介绍 下一篇：图文详解CSS中颜色的四种表示方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
PX自动转换为REM错误  <style>html {   字体大小：calc(100vw / 3.75);      }body {    字体大小：0.16rem；      }</s...
来自于 2024-04-16 09:34:16
0
0
4687
为什么省略 0ms sleep 会破坏我的 css 转换？ 我正在尝试实现FLIP动画，看看我是否理解正确。在这个代码笔中（请原谅糟糕的代码，我只是在乱搞），如果我注释掉睡眠，平滑过渡将不再有效。div突然改变位置。这很奇怪，因为睡眠时间为...
来自于 2024-04-06 16:29:50
0
2
490
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
使用 CSS Tailwind 的图像悬停卡动画未按预期运行。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
来自于 2024-04-06 13:43:17
0
1
356
降低滚动背景图像的不透明度，限制最小不透明度 我试图让背景图像减少滚动时的不透明度，一旦离开登陆页面，使用vanillajavascript将其降至最低0.5。我尝试在滚动函数中添加Math.max()使其仅降至0.5，但它会...
来自于 2024-04-04 23:50:53
0
1
1329
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！