这是一个综合的案例，用到了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. three.js中的矩阵变换(模型视图投影变换)

    目录 1. 概述 2. 基本变换 2.1. 矩阵运算 2.2. 模型变换矩阵 2.2.1. 平移矩阵 2.2.2. 旋转矩阵 2.2.2.1. 绕X轴旋转矩阵 2.2.2.2. 绕Y轴旋转矩阵 2.2 ...

  2. js数组中返回具有某个属性具有特定值的对象

    const drDataArr = [{ date: 0, type: '心率', value: 82 },{ date: 1, type: '心率', value: 80 },{ date: 2, ...

  3. Scrapy爬虫快速入门

    安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...

  4. OSG程序设计之osg::Group

    以下是一个简单的模型读取程序: #include <osgDB/ReadFile> #include <osgViewer/Viewer> #include <osg/N ...

  5. 翻转单词顺序 VS 左旋转字符串

    全部内容来自<剑指offer>. 题目一: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字符一样处理.例如输入字符串“I am a stude ...

  6. LeetCode二分专题

    二分 二分模板 两个模板:1.最大值最小模板一,2.最小值最大用模板二 单调性.两段性的性质 版本1:二分绿色端点是答案,最大值最小 int bsearch_1(int l, int r){ whil ...

  7. Algorithms - Quicksort - 快速排序算法

    相关概念 快速排序法 Quicksort 也是一个分治思想的算法. 对一个子数组 A[p: r] 进行快速排序的三步分治过程: 1, 分解. 将数组 A[p : r] 被划分为两个子数组(可能为空) ...

  8. 花店橱窗布置问题(FLOWER)

    目录 问题描述 问题分析 Java代码实现 运行结果 今天老师上完课说所有花都要被放,这个算法还是考虑多了,包含了这个选择,代码就不给了,用dp思想就可以解决了. 问题描述   假设你想以最美观的方式 ...

  9. JDBC11 封装+资源配置文件管理

    封装为Utils类+程序资源文件去配置 public class Utils { static Properties p=null; static { p=new Properties(); try ...

  10. masonry中的make，remake，update

    - (void)viewDidLoad { [super viewDidLoad]; self.navigationController.navigationBar.translucent = NO; ...