这是一个综合的案例，用到了transition（动画，动作在单位时间内完成），transform（旋转），border-radius（圆角），absolute（定位），linear-gradient（线性渐变）,box-shadow（阴影）。

这里记录一下备忘，贴出源码，方便下次使用时理解，粘贴代码可以直接可以看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        /*禁用所有元素的内外边距*/
        *{
            margin: 0;
            padding: 0px;
        }

        /*禁用浏览器的滚动条*/
        html,body{
            height:100%;
            overflow: hidden;
        }

        /*初始最外层的容器*/
        #wrapper{
            height:100%;
            overflow: auto;
        }

        /*居中定位*/
        #wrap{
            position: absolute;
            top:0px;
            left:0px;
            bottom:0px;
            right:0px;

            margin: auto;
            width: 456px;
            height: 456px;
            /*150 s 完成动画（选装48000 度）*/
            transition: 150s;
        }

        /*鼠标悬浮开启动画*/
        #wrap:hover{
            transform: rotate(48000deg);
        }

        /* > 代表直接下属的子元素*/
        #wrap > div{
            position: relative;
            width: 150px;
            height:150px;
            /**/
            float: left;
            border-radius: 0 100%;
            /*box-shadow: 10px 10px pink;*/
            /*border: solid 1px black;*/
            background-image: linear-gradient(deeppink,white);
        }

        /*选中直接下属的第一个子元素*/
        #wrap > div:nth-child(1){
            top:75px;
            left:75px;
            background-image: linear-gradient(green,pink);
        }
        #wrap > div:nth-child(2){
            top: 43px;
            right: 10px;
            transform: rotate(40deg);
            background-image: linear-gradient(yellow,pink);
        }
        #wrap > div:nth-child(3){
            top: 63px;
            right: 91px;
            transform: rotate(80deg);
            background-image: linear-gradient(red,pink);
        }
        #wrap > div:nth-child(4){
            left: 256px;
            top: -29px;
            transform: rotate(120deg);
            background-image: linear-gradient(orange,pink);
        }
        #wrap > div:nth-child(5){
            left: 97px;
            top: 43px;
            transform: rotate(160deg);
            background-image: linear-gradient(green,pink);
        }
        #wrap > div:nth-child(6){
            left: -106px;
            top: 95px;
            transform: rotate(200deg);
            background-image: linear-gradient(yellow,pink);
        }
        #wrap > div:nth-child(7){
            left: 124px;
            top: -51px;
            transform: rotate(240deg);
            background-image: linear-gradient(red,pink);
        }
        #wrap > div:nth-child(8){
            left: -89px;
            top: -92px;
            transform: rotate(280deg);
            background-image: linear-gradient(orange,pink);
        }
        #wrap > div:nth-child(9){
            left: -259px;
            top: -163px;
            transform: rotate(320deg);
            background-image: linear-gradient(#00ff80,pink);
            /*width:75px;*/
        }
        #wrap > div:nth-child(9){
            left: -259px;
            top: -163px;
            transform: rotate(320deg);
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

　　

CSS 风车（花瓣）旋转动画圆角的更多相关文章

  1. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS动画实例：旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  3. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  4. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

  5. CSS旋转动画和动画的拼接

    旋转动画 第一个样式: @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); ...

  6. 前端每日实战：86# 视频演示如何用纯 CSS 创作一个方块旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...

  7. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  8. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  9. css吃豆人动画

    一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...

随机推荐

  1. python 安装模块之pip install +模块名的换源写法

    1.采用国内源,加速下载模块的速度2.常用pip源(上一篇博客介绍过):– 豆瓣:https://pypi.douban.com/simple– 阿里:https://mirrors.aliyun.c ...

  2. 怎么成为一名WEB前端开发工程师

       对于刚开始学的人来说,web 就是HTML+CSS+JavaScript其实我们是可以这样理解的.web工程师负责或参与Web产品的页面开发,包含PC端.移动APP内嵌移动端.微信小程序.web ...

  3. Spring Cloud学习 之 Spring Cloud Ribbon 重试机制及超时设置不生效

    今天测了一下Ribbon的重试跟超时机制,发现进行的全局超时配置一直不生效,配置如下: ribbon: #单位ms,请求连接的超时时间,默认1000 ConnectTimeout: 500 #单位ms ...

  4. 手把手教你进行Scrapy中item类的实例化操作

    接下来我们将在爬虫主体文件中对Item的值进行填充. 1.首先在爬虫主体文件中将Item模块导入进来,如下图所示. 2.第一步的意思是说将items.py中的ArticleItem类导入到爬虫主体文件 ...

  5. LeetCode 62，从动态规划想到更好的解法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第36篇文章,我们一起来看下LeetCode的62题,Unique Paths. 题意 其实这是一道老掉牙的题目了 ...

  6. 在Qsys中创建用户自定义IP

    在SOC FPGA的设计中,必须使用Qsys软件才能将ARM和FPGA之间的接口引入到FPGA设计中.为了设计上的方便,客户经常希望将Qsys中的一些接口信号引入到FPGA顶层设计文件中.本文以Ava ...

  7. struts2 全局拦截器，显示请求方法和参数

    后台系统中应该需要一个功能那就是将每个请求的url地址和请求的参数log出来,方便系统调试和bug追踪,使用struts2时可以使用struts2的全局拦截器实现此功能: import java.ut ...

  8. 201843 2019-2020-2 《Python程序设计》实验二报告

    201843 2019-2020-2 <Python程序设计>实验二报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:20184302 实验教师:王 ...

  9. c++离散化处理大范围和重复数据

    关于离散化 有些新手可能会问:离散化是什么?离散化就是将无限空间中有限的个体映射到有限的空间里去. 上面的定义肯定会有人看不懂(其实我刚开始学的时候也看不懂) 用我自己的话来说,就是在不改变数据的相对 ...

  10. Spark Streaming 整合 Flume

    Spark Streaming 整合 Flume ​ 一.简介二.推送式方法        2.1 配置日志收集Flume        2.2 项目依赖        2.3 Spark Strea ...