• 使用C3的一些新属性绘制谷歌浏览器的图标


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                background-color: lightskyblue;
            }
    
            .container {
                width: 400px;
                height: 400px;
                border: 1px solid #999;
                box-sizing: border-box;
                border-radius: 50%;
                margin: 200px auto;
                position: relative;
                overflow: hidden;
                background-color: yellow;
                transform: rotate(-80deg);
    
            }
    
            .container::before {
                content: "";
                width: 100px;
                height: 100px;
                /*border: 1px solid black;*/
                background-color: deepskyblue;
                border-radius: 50%;
                box-shadow: 0px 0px 0px 10px whitesmoke;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 1;
            }
    
            .one {
                width: 300px;
                height: 300px;
                /*border: 1px solid black;*/
                position: absolute;
                transform: skew(-30deg);
                left: -12px;
                top: -100px;
                background-color: green;
            }
    
            .one::before {
                content: "";
                width: 300px;
                height: 200px;
                /*border: 1px solid black;*/
                position: absolute;
                top: 159px;
                left: 30px;
                background-color: green;
            }
    
            .two {
                width: 300px;
                height: 300px;
                /*border: 1px solid black;*/
                position: absolute;
                transform: skew(-30deg, 60deg);
                left: 286px;
                top: 160px;
                background-color: red;
            }
    
            .two::before {
                content: "";
                width: 40px;
                height: 300px;
                /*border: 1px solid black;*/
                position: absolute;
                top: 26px;
                left: -8px;
                transform: rotate(10deg);
                background-color: red;
            }
    
            @keyframes autoRotate {
                from {
    
                }
                to {
                    transform: rotate(3600deg);
                }
            }
    
            .animate {
                animation: autoRotate 30s linear infinite;
            }
        </style>
    </head>
    <body>
    <div class="container animate">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    </body>
    </html>

    //利用Css3里面的一些新属性,做了一个谷歌浏览器图标

  • 相关阅读:
    二层、三层、四层交换机的区别
    在origin 中任意设定X坐标值
    Eclipse 配置 ONE 仿真环境
    ns3 安装
    sprintf 函数
    transition属性实现hover渐变动画效果
    Mybatis处理oracle的clob类型
    Mybatis模糊查询(like)
    java.lang.OutOfMemoryError: PermGen space错误
    ORA-28000: the account is locked-的解决办法
  • 原文地址:https://www.cnblogs.com/199316xu/p/6435332.html
Copyright © 2020-2023  润新知