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>

查看全文

相关阅读:
指针类型强制转换
 Spark大师之路：广播变量（Broadcast）源代码分析
 [Python]sqlite3二进制文件存储问题(BLOB)(You must not use 8-bit bytestrings unless you use a text_factory...)
把字符串转化成整型显示
 一张图让你看清Java集合类（Java集合类的总结）
Java读书笔记三（字符串）
Afinal载入网络图片及下载文件用法
 netfilter/iptables 结构要点
 OpenGL 实现Interpolation插值算法
 GPU 编程入门到精通（五）之 GPU 程序优化进阶

原文地址：https://www.cnblogs.com/tiantian9542/p/8995442.html