可爱的小怪物代码,Js代码库,德仔网

代码语言
代码分类
【Js】可爱的小怪物
作者:烯鑫 / 发布于2016/9/20/ 660
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #3cb464;

        }
        .container{
            position: absolute;
            width: 800px;
            height: 400px;
            top: 20%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
        .container div,.container span{
            position: absolute;
        }
        .intem{
            width: 200px;
            height: 200px;
            bottom: 70px;
            left: 50%;
            margin-left:-50px;
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;

        }
        .container .wrap{
            width: 100px;
            height: 100px;
            bottom: 0;
            left: 50%;
            margin-left: -50px;
            box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            -webkit-animation: qiu 0.6s ease-in-out infinite;
            animation:qiu 0.6s ease-in-out infinite;

        }
        .intem .wrap .eye{
            background: #fff;
            border-radius: 50%;
            border-top:2px solid #111;
        }
        .intem .wrap .eye span{
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #232323;
        }
        .intem .wrap .eye.left{
            top: 30px;
            left: 30px;
            width: 30px;
            height: 29px;
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);

        }
        .intem .wrap .eye.left span {
            top: 12px;
            height: 9px;
            left: 12px;
        }
        .intem .wrap .eye.right{
            top: 35px;
            right: 20px;
            width: 20px;
            height: 20px;
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);

        }
       .container .wrap .eye.right span{
            top: 9px;
            left: 7px;

        }
        .intem .wrap .mouth{
            width: 16px;
            height: 4px;
            bottom: 20px;
            background: #fff;
            border-radius: 60% 80% 50% 100%;
            left: 50px;
        }
        .intem .wrap .arm{
            width: 15px;
            height: 16px;
            bottom: 28px;
            border-radius: 7px;
            z-index: -1;
            -webkit-animation: arm 0.7s ease-in-out infinite;
            animation: arm 0.7s ease-in-out infinite;
        }
        .intem .wrap .arm.left{
            left: -13px;
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
        .intem .wrap .arm.right{
            right: -13px;
            -webkit-transform: rotate(20deg);
            transform: rotate(20deg);

        }
        .container .shadow{
            width: 70px;
            height: 10px;
            bottom: -10px;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 50%;
            background: #37a45b;
            box-shadow: 0 0 5px #37a45b;
            -webkit-animation: shadow 0.7s ease-in-out infinite;
            animation: shadow 0.7s ease-in-out infinite;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .intem#pink{
            left: 33%;
            z-index: 30;

        }
        .intem#pink .wrap{
            background: pink;
        }
        .intem#pink .mouth{
            left: 43px;
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;
        }
        .intem#pink .arm{
            background: pink;
        }
        .intem#green{
            left: 58%;
            z-index: 20;
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        .intem#green .wrap{
            background: greenyellow;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;

        }
        .intem#green .mouth{
            left: 50px;
            height: 15px;
            width: 40px;
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;

        }
        .intem#green .arm{
            background: greenyellow;
        }
        .intem#yellow{
            left: 80%;
            z-index: 20;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }
        .intem#yellow .wrap{
            background: paleturquoise;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;

        }
        .intem#yellow .mouth{
            left: 50px;
            width: 20px;
            height: 5px;
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;


        }
        .intem#yellow .arm{
            background: paleturquoise;
        }
        @keyframes qiu {
            0%{
                bottom: 0;
            }
            20%{
                bottom: 8px;
            }
            40%{
                bottom: 14px;
            }
            60%{
                bottom: 16px;
            }
            80%{
                bottom: 24px;
            }
            100%{
                bottom: 0;
                border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;
            }
        }
        @keyframes arm {
            0%,100%{
                bottom: 28px;
            }
            33%{
                bottom: 23px;
            }
            40%{
                -webkit-transform: scale(1.2);
                transform: scale(1.2);

            }
            66%{
                -webkit-transform: scale(0.5);
                transform: scale(0.5);

            }

        }
        @keyframes shadow {
            0%,100%{
                -webkit-transform: scaleX(1);
                transform: scaleX(1);

            }
            50%{
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);

            }
        }
        @keyframes mounth {
            0%,100%{
                height: 15px;
                width: 20px;
                border-radius: 50% 66% 50% 50%;

            }
            50%{
                height: 16px;
                bottom: 20px;
                border-radius: 100% 50% 100% 50%;

            }
        }


    </style>
</head>
<body>
<div class="container">
    <div class="intem" id="pink">
        <div class="wrap">
            <div class="left eye"><span></span></div>
            <div class="right eye"><span></span></div>
            <div class="mouth"></div>
            <div class="arm left"></div>
            <div class="arm right"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="intem" id="green">
        <div class="wrap">
            <div class="left eye"><span></span></div>
            <div class="right eye"><span></span></div>
            <div class="mouth"></div>
            <div class="arm left"></div>
            <div class="arm right"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="intem" id="yellow">
        <div class="wrap">
            <div class="left eye"><span></span></div>
            <div class="right eye"><span></span></div>
            <div class="mouth"></div>
            <div class="arm left"></div>
            <div class="arm right"></div>
        </div>
        <div class="shadow"></div>
    </div>
</div>
</body>
</html>
试试其它关键字
同语言下
可能有用的
烯鑫贡献的其它代码(10)