要效果图如下：

实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！
代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS实现的旋转的花朵</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        *,*:before,*:after{

            box-sizing: border-box;

        }

        html body{

          height: 100%;

        }

        .container {

            background: #f39c12;

            height: 300px;

            position: relative;

        }

        .loader{

            position: absolute;

            left: 50%;

            top: 50%;

            -webkit-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

        }

        .loader .spinnerBlock{

            -webkit-animation: rotate 1000ms linear infinite;

                     animation: rotate 1000ms linear infinite;

            -webkit-transform-origin: center;

                     transform-origin: center;

            display: block;

            width: 50px;

            height: 50px;

        }

        .loader span{

            display: block;

            border: 2px solid #fff;

            border-radius: 50%;

            height: 100%;

            width: 100%;

            position: absolute;

            top: 0;

            left: 0;

        }

        .loader soan:nth-child(1){

            border-color: #eee;

        }

        .loader span:nth-child(2){

            left: -18px;

            top: 10px;

        }

        .loader span:nth-child(3){

            left: -18px;

            top: -10px;

        }

        .loader span:nth-child(4){

            left: 0;

            top: -18px;

        }

        .loader span:nth-child(5){

             left: 18px;

            top: -10px;

          }

        .loader span:nth-child(6){

            left: 18px;

            top: 10px;

        }

        .loader span:nth-child(7){

            left: 0;

            top: 18px;

        }

        @-webkit-keyframes rotate {

            from{

                -webkit-transform: rotate(0deg);

                         transform: rotate(0deg);

            }

            to{

                -webkit-transform: rotate(360deg);

                         transform: rotate(360deg);

            }

        }

        @keyframes rotate {

            from{

                -webkit-transform: rotate(0deg);

                         transform: rotate(0deg);

            }

            to{

                -webkit-transform: rotate(360deg);

                         transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="loader">

            <div class="spinnerBlock">

                <span></span>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

            </div>

        </div>

    </div>

</body>

</html>

运行代码便能看到完整的旋转效果！

CSS3实现一个旋转的花朵的更多相关文章

  1. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

  2. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  3. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  4. WPF 3D：简单的Point3D和Vector3D动画创造一个旋转的正方体

    原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...

  5. Directx11学习笔记【十二】 画一个旋转的彩色立方体

    上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...

  6. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  7. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

  8. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  9. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. 每天学点linux命令

    用于创建LVM卷组 补充说明 vgcreate命令 用于创建LVM卷组.卷组(Volume Group)将多个物理卷组织成一个整体,屏蔽了底层物理卷细节.在卷组上创建逻辑卷时不用考虑具体的物理卷信息. ...

  2. spring security记录

    4版本 登录跳转 自定义自己的成功失败handler 生成session后 set-cookie响应头用js取不到? https://github.com/axios/axios/issues/295 ...

  3. 卸载python3

    rpm -qa|grep python3|xargs rpm -ev --allmatches --nodeps 卸载pyhton3 whereis python3 |xargs rm -frv 删除 ...

  4. H5的localStorage使用总结

    一.localstorage 的优缺点 优点: 1.localStorage 的存储大小是5M,而cookie的存储大小只有4K,解决了cookie存储空间不足的问题 2.localStorage 可 ...

  5. C++线程池的实现

    线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...

  6. linux下添加行数和修改tab空格数

    在/etc/vimrc文件中添加: set nu set ts=4 保存即可

  7. file,path,uri互相转换

    uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...

  8. Shell 快速入门（十八）：特殊符号的使用

    在 Shell 语言中,经常会看到中括号和括号组成的特殊标识,例如:[].[[]].(()).$(()).().这些符号经常使我们非常迷惑,弄清楚它们之间的作用和区别非常必要. 在开始之前,我们先来学 ...

  9. 吴裕雄--天生自然python学习笔记：Python3 多线程

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进度条 ...

  10. 古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？（python语言）

    # 古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? # 斐波那契数列:0,1,1,2,3,5,8,13, ...