画了朵花 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body, div, ul, li {
        margin: 0;
        padding: 0;
    }
    
    div {
        width: 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 {
        width: 400px;
        height: 400px;
        position: relative;
    }
    
    ul:after {
        display: block;
        content: "";
        clear: both;
    }
    
    li {
        list-style: none;
        width: 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) {
        width: 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>

 

posted @ 2018-05-05 18:05  咬尾巴的狐狸  阅读(138)  评论(0)    收藏  举报