zoukankan      html  css  js  c++  java
  • 画了朵花

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        body, div, ul, li {
            margin: 0;
            padding: 0;
        }
        
        div {
             400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            -webkit-animation: rot 2s linear infinite;
            animation: rot 2s linear infinite;
        }
        
        ul {
             400px;
            height: 400px;
            position: relative;
        }
        
        ul:after {
            display: block;
            content: "";
            clear: both;
        }
        
        li {
            list-style: none;
             100px;
            height: 150px;
            background: -webkit-linear-gradient(red, blue, yellow, pink, blue);
            background: linear-gradient(red, blue, yellow, pink, blue);
            float: left;
            box-sizing: border-box;
            -webkit-border-radius: 100% 0%;
            -moz-border-radius: 100% 0%;
            border-radius: 100% 0%;
        }
        
        li:nth-child(1) {
            transform: rotate(108deg);
            position: absolute;
            top: 39px;
            left: 75px;
        }
        
        li:nth-child(2) {
            transform: rotate(145deg);
            position: absolute;
            top: 17px;
            left: 151px;
        }
        
        li:nth-child(3) {
            transform: rotate(192deg);
            position: absolute;
            top: 50px;
            right: 70px;
        }
        
        li:nth-child(4) {
            transform: rotate(234deg);
            position: absolute;
            top: 126px;
            right: 43px;
        }
        
        li:nth-child(5) {
             50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            background: red;
            margin: -25px auto auto -25px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        
        li:nth-child(6) {
            transform: rotate(-22deg);
            position: absolute;
            bottom: 16px;
            left: 139px;
        }
        
        li:nth-child(7) {
            transform: rotate(19deg);
            position: absolute;
            left: 68px;
            bottom: 55px;
        }
        
        li:nth-child(8) {
            transform: rotate(54deg);
            position: absolute;
            bottom: 124px;
            left: 44px;
        }
        
        li:nth-child(9) {
            transform: rotate(281deg);
            position: absolute;
            bottom: 43px;
            right: 71px;
        }
        
        @-webkit-keyframes rot {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes rot {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        }
    
    </style>
    <body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    模板-树链剖分
    bzoj2523 聪明的学生
    P1220 关路灯
    BZOJ3572 [Hnoi2014]世界树
    BZOJ4013 [HNOI2015]实验比较
    BZOJ4012 [HNOI2015]开店
    BZOJ4011 [HNOI2015]落忆枫音
    BZOJ4009 [HNOI2015]接水果
    BZOJ4010 [HNOI2015]菜肴制作
    BZOJ4008 [HNOI2015]亚瑟王
  • 原文地址:https://www.cnblogs.com/tiantian9542/p/8995442.html
Copyright © 2011-2022 走看看