要效果图如下：

实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的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. 三十二、http与www服务介绍

    一.用户访问百度(www.baidu.com) 用户访问在url中输入地址后,首先会访问本地的缓存和hosts文件,如果没有,会访问本地DNS,在就是根域和顶级域名等,在前面已经说过了,这里不再赘述. ...

  2. 卸载python3

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

  3. day26-socket(server和client通信)

    # socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口.它把复杂的TCP/IP协议隐藏到socket #接口的后面,让socket去组织数据,以符合指定的协议. # socket ...

  4. String截取字符串的指定字节长度

    /** TODO:截取字符串的指定字节长度 * @Author wenjing * @Date 11:02 2019/5/15 * @Param [str, bengin, end] * @retur ...

  5. 动态添加checkbox

    <!--动态添加 checkbox--> <script type="text/javascript"> var data = new Array(); & ...

  6. as和强制类型转换的区别

    之前一直以为as就是强制类型转换,只是as是AS3中新的语法,之前用在有继承关系的对象之间的转换也无甚区别,但是今天却让我领悟到了它俩之间的区别. 原起:今天要给ColorPicker控件动态赋值,它 ...

  7. mysql中in和exist的区别

    mysql中in和exists的区别 -- in写法select * from A where A.id in (select bid from  B ) and A.name in (select ...

  8. mysql首次使用过程以及彻底卸载过程

    安装过程: 步骤一: 安装mysql服务,使用命令行: yum install mysql-server 步骤二: 启动mysql服务: service mysqld start 确认msyql是否启 ...

  9. wios设置证书登陆

    设置wios为密钥登陆set service ssh 'allow-root' set service ssh 'disable-password-authentication' //禁用密码登陆 s ...

  10. 吴裕雄--天生自然HTML学习笔记：HTML 样式- CSS

    CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. <!DOCTYPE html> <html> <head> <me ...