要效果图如下：

实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的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. Estimating Gene Frequencies| method of maximum likelihood|point estimate

    I.11 Estimating Gene Frequencies 在小样本上计算基因A的概率PA,举例如下: 通过加大样本会将通过观察值得到的数趋近于真实数据,所以该问题转化为了统计学上利用大量观察值 ...

  2. Relative-Frequency|frequency|pie chart |bar chart

    2.2Organizing Qualitative Data The number of times a particular distinct value occurs is called its ...

  3. hibernate反向工程

  4. 四、RabbitMQ Exchange类型

    RabbitMQ整体上是一个生产者与消费者模型,主要负责接收.存储和转发消息.可以把消息传递的过程想象成:当你将一个包裹送到邮局,邮局会暂存并最终将邮件通过邮递员送到收件人的手上,RabbitMQ就好 ...

  5. Mysql分区，分库和分表

    作者说的非常清楚了,感谢.地址为:http://haitian299.github.io/2016/05/26/mysql-partitioning/. 本人项目实践,使用sharding-jdbc进 ...

  6. mysql挖掘与探索------第2章 索引1-1

    1索引作用 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,只要执行个正确的’create index’,查询速度就可能提高百倍千倍,这可真有诱惑力.可是天下没有免 ...

  7. [LC] 70. Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-xlrd操作excel（11）

    xlrd操作excel # -*- coding: utf-8 -*- # @Time : 2020/2/12 9:14 # @File : do_excel_xlrd_11.py # @Author ...

  9. 3DSMAX卸载/完美解决安装失败/如何彻底卸载清除干净3DSMAX各种残留注册表和文件的方法

    在卸载3dsmax重装3dsmax时发现安装失败,提示是已安装3dsmax或安装失败.这是因为上一次卸载3dsmax没有清理干净,系统会误认为已经安装3dsmax了.有的同学是新装的系统也会出现3ds ...

  10. python实现经典冒泡算法

    利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面