= =没啥好看的

html 代码

    <head>
        <meta
            name=”viewport”
            content=”width=device-width,initial-scale=1,user-scalable=no”
        />
        <title></title>
        <style>
                        .wrap{
                            width: 50%;
                            margin: 0 auto;
                            height: 800px;
                            background: #000;
                        }
                        .body{
                            position: absolute;
                            width: 480px;
                            height: 700px;
                            margin-left: 300px;
                             margin-top: 20px;
                        }
                        .head{
                            width: 110px;
                            height: 76px;
                            border-radius: 50% 45%;
            /*                background: -webkit-linear-gradient(top, #fff 30%, #d6d6d6);*/
                            background: #fff;
                            box-shadow: 0px 15px 19px rgba(27, 24, 24, 0.44);
                            position: relative;
                            z-index: 2;
                        }</p>
            <p>            .eye-1{
                            width: 15px;
                            height: 15px;
                            background: #000;
                            border-radius: 50%;
                            position: absolute;
                            top: 30px;
                            left: 20px;
                            animation:yan 3s infinite linear;
                        }
                        .eye-2{
                            width: 15px;
                            height: 15px;
                            background: #000;
                            border-radius: 50%;
                            position: absolute;
                            top: 30px;
                            left: 76px;
                            animation:yan 3s infinite linear;
                        }
                        .eye-3{
                            position: absolute;
                            width: 41px;
                            top: 36px;
                            left: 35px;
                            height: 3px;
                            background: #000;</p>
            <p>            }
                        .trunk{
                            position: absolute;
                            left: -41px;
                        }
                        .trunk-1{
                            position: absolute;
                            z-index: 1;
                            background: #fff;
                            height: 300px;
                            width: 250px;
                            left: -30px;
                            border-radius: 39% 39% 44% 44%;
                            box-shadow: 0px 17px 0px rgba(33, 31, 31, 0.28);
                        }
                        .trunk-2{
                            position: absolute;
                        }
                        .trunk-2 .head-1{
                            width: 50px;
                            height: 16px;
                            background: #fff;
                            position: absolute;
                            transform: rotate(77deg);
                            border-radius: 50%;
                            top: 132px;
                            left: 40px;
                        }
                        .trunk-2 .head-2{
                            width: 50px;
                            height: 16px;
                            background: #fff;
                            position: absolute;
                            transform: rotate(90deg);
                            border-radius: 50%;
                            top: 137px;
                        }
                        .trunk-3{
                             position: absolute;
                            background: #fff;
                            height: 300px;
                            width: 71px;
                            transform: rotate(-21deg);
                            left: 189px;
                            border-radius: 10% 80% 82% 10%;
                        }
                        .trunk-3 .head-1{
                            width: 50px;
                            height: 16px;
                            background: #fff;
                            position: absolute;
                            transform: rotate(77deg);
                            border-radius: 50%;
                            top: 290px;
                            left: 18px;
                        }
                        .trunk-3 .head-2{
                            width: 50px;
                            height: 16px;
                            background: #fff;
                            position: absolute;
                            transform: rotate(97deg);
                            border-radius: 50%;
                            top: 287px;
                            left: -14px;
                        }
                        .foot{
                            position: absolute;
                            left: 14px;
                            top: 349px;
                        }
                        .foot-1{
                            border-radius: 9% 10% 22% 62%;
                            left: -34px;
                            background: #fff;
                            height: 140px;
                            width: 80px;
                            position: absolute;
                        }
                        .foot-2{
                            border-radius: 9% 10% 62% 22%;
                            left: 47px;
                            background: #fff;
                            height: 140px;
                            width: 80px;
                            position: absolute;
                        }
                        .border{
                            border: 2px solid #DC5050;
                            width: 40px;
                            height: 40px;
                            z-index: 2;
                            top: 146px;
                            left: 89px;
                            border-radius: 50%;
                            position: absolute;
                        }
                        .x-1{
                            background: #DC5050;
                            width: 20px;
                            height: 5px;
                            z-index: 3;
                            top: 17px;
                            left: 10px;
                            position: absolute;
                        }
                        .x-2{
                            background: #DC5050;
                            width: 20px;
                            height: 5px;
                            z-index: 3;
                            top: 18px;
                            left: 10px;
                            transform: rotate(90deg);
                            position: absolute;
                        }
                        .gun{
                            position: absolute;
                            top: 46px;
                            left: 817px;
                            transform: rotate(34deg)
                        }
                        .gun-head{
                            margin-left: -4px;
                            border-bottom: 30px solid #B3BBBF;
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                        }
                        .gun-body{
                            border-radius: 5px;
                            width: 10px;
                            height: 350px;
                            background: #4CAF50;
                        }
                        .trunk-left-1{
                            position: absolute;
                            background: #fff;
                            height: 190px;
                            width: 71px;
                            transform: rotate(21deg);
                            left: -72px;
                            border-radius: 80% 10% 10% 82%;
                        }
                        .trunk-left-2{
                           position: absolute;
                            background: #fff;
                            height: 150px;
                            width: 71px;
                            left: -102px;
                            top: 173px;
                            border-radius: 80% 50% 50% 82%;
                            animation: hand 1s infinite linear;
                        }
                        @keyframes hand{
                            0%{
                                transform: rotate(20deg);
                            }
                            100%{
                                transform: rotate(78deg);
                                left: -141px;
                                top: 115px;
                            }
                        }
            /*            头部代码*/
                        @keyframes head{
                            0%{
                                left: 0;
                            }
                            50%{
                                left: 5px;
                            }
                            100%{
                                left: 0px;
                            }
                        }
                       @keyframes yan {
                        0%,20%, 100%{
                            -webkit-transform:scale(1,1);
                            -moz-transform:scale(1,1);
                            -o-transform:scale(1,1);
                            transform:scale(1,1);
                        }
                        10%{
                            -webkit-transform:scale(1,0.2);
                            -moz-transform:scale(1,0.2);
                            -o-transform:scale(1,0.2);
                            transform:scale(1,0.2);
                        }
                    }
        </style>
    </head>
    <body>
        <div class=”wrap”>
            <!–
           <div class=”gun”>
               <div class=”gun-head”></div>
               <div class=”gun-body”></div>
           </div>
–>
            <div class=”body”>
                <div class=”border”>
                    <div class=”x-1″></div>
                    <div class=”x-2″></div>
                </div>
                <div class=”head”>
                    <div class=”eye-1″></div>
                    <div class=”eye-2″></div>
                    <div class=”eye-3″></div>
                </div>
                <div class=”trunk”>
                    <div class=”trunk-1″></div>
                    <div class=”trunk-2″>
                        <div class=”trunk-left-1″></div>
                        <div class=”trunk-left-2″>
                            <div class=”head-1″></div>
                            <div class=”head-2″></div>
                        </div>
                    </div>
                    <div class=”trunk-3″>
                        <div class=”head-1″></div>
                        <div class=”head-2″></div>
                    </div>
                </div>
                <div class=”foot”>
                    <div class=”foot-1″></div>
                    <div class=”foot-2″></div>
                </div>
            </div>
        </div>
    </body>
</html>
» 本文来自:前端开发者 » 《= =没啥好看的》
» 本文链接地址:https://www.rokub.com/9285.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!