要效果图如下：

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

    9.虚拟主机:部署多个站点,每个站点希望用不同的站点域名和站点目录,或者是不同的端口和不同的IP,则需要虚拟主机,简单理解就是一个http服务要配置多个站点,就要虚拟主机. apache虚拟主机分为三 ...

  2. 2019-2020-1 20199324《Linux内核原理与分析》第一周作业

    1.问题:使用banner输出图形字符为什么都是大写? 2.实验二:基本概念及操作 作业:命令toilet和figlet的使用 使用如下命令安装 $ sudo apt-get update $ sud ...

  3. git命令简单使用

    git config --global user.name 'sss' git config --global user.email 'huahua@163.com' cd d:/mywork git ...

  4. spring boot GlobalExceptionHandler @RestControllerAdvice @ExceptionHandler

    package me.zhengjie.common.exception.handler; import lombok.extern.slf4j.Slf4j; import me.zhengjie.c ...

  5. Servlet&JSP复习笔记 04

    1.状态管理 因为HTTP协议是无状态协议,但很多时候需要将客户端和服务端的多次请求当做一个来对待.将多次交互中设计的数据进行保存. 状态:数据 管理:对数据的维护 2.Cookie 客户端向服务器发 ...

  6. 80）PHP，扩展工具类

    啥是扩展工具类:这个问题很深奥,自己慢慢理解吧. 首先  对于session的处理函数是扩展工具类. ②图片处理类 ③验证码生成类 ④算是项目中的一个功能模块. 扩展工具类   放在我们的framew ...

  7. django框架进阶-admin-长期维护

    ###############    django--admin的使用    ################ # django后台管理: # 第一步: # 在settings文件中修改语言和时区 L ...

  8. yield解析

    1.yield可以用来为一个函数返回值塞数据 代码: def addlist(alist): for i in alist: alist = [, , , ] for x in addlist(ali ...

  9. Mysql分区，分库和分表

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

  10. C语言学习笔记之动态分配数组空间

    本文为原创文章,转载请标明出处 高级语言写多了,再拿起C语言的时候,自己已经傻了... C语言中数组大小不能为变量,即使这个变量已经被赋过值了,应该使用malloc方法进行数组空间动态分配. 如下: ...