要效果图如下：

实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的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. [LC] 151. Reverse Words in a String

    Given an input string, reverse the string word by word. Example 1: Input: "the sky is blue" ...

  2. Rails Create--params说明

    参考:https://ruby-china.github.io/rails-guides/getting_started.html 表单提交后,其字段以参数形式传递给 Rails,然后就可以在控制器动 ...

  3. 在VMware装了linux系统，如何在windows系统中用xshell连接

    网上有好几种方法,不过我觉得这种比较简单 1.找到VMware菜单  打开 编辑>虚拟网络编辑器 如图: 点下面的更改设置 点确定就可以了,什么都不用改.然后回到linux系统中ifconfig ...

  4. Android drawable 加载效果

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:ones ...

  5. FaceIDViewer.rar

    FaceIDViewer用于查看Office工具栏控件的内置图标编号. 压缩包中包含4个文件,打开任何一个都可以进行查询.其中带有V2字样的文件,已经排除掉了空白图标. Excel版动态图: Word ...

  6. [LC] 110. Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  7. 题解 HDU 3698 Let the light guide us Dp + 线段树优化

    http://acm.hdu.edu.cn/showproblem.php?pid=3698 Let the light guide us Time Limit: 5000/2000 MS (Java ...

  8. bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|

    应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...

  9. <JZOJ5912>VanUSee

    挺魔的 反正我考场上想不到233333333333333 #include<cstdio> #include<cstring> #include<iostream> ...

  10. mabatis中的元素属性

    resultMap属性id 唯一标识type 返回类型extends 继承别的resultMap,可选关联其他标签id 设置主键使用,使用此标签配置映射关系(可能不止一个)result 一般属性的配置 ...