前端开发CSS3会动的机器人

前端开发常用开发工具
python前端开发工具
win做前端开发工具

css3画的机器人

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul,
            ol,
            li {
                list-style: none;
            }
            div {
                background: #d59392;
                position: relative;
            }
            .box {
                height: 400px;
                width: 220px;
                margin: 100px auto;
                animation: fff 2s infinite;
                background: #fff;
            }
            .header {
                width: 220px;
                height: 100px;
                top: 32px;
                border-radius: 110px 110px 110px 110px;
                -moz-border-radius: 110px 110px 110px 110px;
                -webkit-border-radius: 110px 110px 110px 110px;
            }
            .a_2,
            .b_2 {
                background: #fff;
                width: 20px;
                height: 20px;
                position: absolute;
                top: 42px;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            .a_2:hover,
            .b_2:hover {
                -webkit-transition: all 0.1s letter-spacing;
                transition: all 0.1s inherit;
            }
            .a_2 {
                left: 50px;
            }
            .b_2 {
                right: 50px;
            }
            .a_1,
            .b_1 {
                width: 6px;
                height: 50px;
                position: absolute;
                top: -34px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
            }
            .a_1 {
                left: 50px;
                transform: rotate(-30deg);
                -webkit-transform: rotate(-30deg);
                -moz-transform: rotate(-30deg);
            }
            .b_1 {
                right: 50px;
                transform: rotate(30deg) translate(50px 50px);
                -webkit-transform: rotate(30deg);
                -moz-transform: rotate(30deg);
            }
            .body {
                width: 220px;
                height: 184px;
                top: 40px;
                border-radius: 50px 50px 50px 50px;
                -webkit-border-radius: 50px 50px 50px 50px;
                -moz-border-radius: 50px 50px 50px 50px;
            }
            .a_3,
            .b_3,
            .a_4,
            .b_4 {
                width: 50px;
                position: absolute;
                -webkit-transition: all 0.1s ease-in;
            }
            .a_3,
            .b_3 {
                height: 150px;
                top: 10px;
                border-radius: 25px;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
                transform: rotate(30deg);
            }
            .a_4,
            .b_4 {
                height: 120px;
                top: 182px;
                border-radius: 50px 50px 50px 50px;
                -moz-border-radius: 50px 50px 50px 50px;
                -webkit-border-radius: 50px 50px 50px 50px;
                transform: rotate(30deg);
            }
            .a_3 {
                left: -58px;
            }
            .b_3 {
                right: -58px;
            }
            .a_4 {
                left: 45px;
            }
            .b_4 {
                right: 45px;
            }
            .header:hover {
                -webkit-transform: rotate(-10deg) translate(-9px, -13px);
                transform: rotate(-10deg) translate(-9px, -13px);
                -moz-transform: rotate(-10deg) translate(-9px, -13px);
            }
            .a_3:hover {
                -webkit-transform: rotate(60deg) translate(-59px, 0);
                transform: rotate(60deg) translate(-59px, 0);
                -moz-transform: rotate(60deg) translate(-59px, 0);
            }
            .b_3:hover {
                -webkit-transform: rotate(-60deg) translate(60px, 0);
                transform: rotate(-60deg) translate(60px, 0);
                -moz-transform: rotate(-60deg) translate(60px, 0);
            }
            .a_4:hover {
                -webkit-transform: rotate(60deg) translate(-59px, 0);
                transform: rotate(60deg) translate(-59px, 0);
                -moz-transform: rotate(60deg) translate(-59px, 0);
            }
            .b_4:hover {
                -webkit-transform: rotate(-60deg) translate(60px, 0);
                transform: rotate(-60deg) translate(60px, 0);
                -moz-transform: rotate(-60deg) translate(60px, 0);
            }
            @keyframes fff {
                0%,
                100% {
                    height: 50px;
                    transform: translate(0px);
                }
                50%,
                70% {
                    height: 150px;
                    transform: translate(15px);
                }
            }
            @-webkit-keyframes fff {
                0%,
                100% {
                    height: 50px;
                    transform: translate(0px);
                }
                50%,
                70% {
                    height: 150px;
                    transform: translate(15px);
                }
            }
            @-webkit-keyframes fff {
                0%,
                100% {
                    height: 50px;
                    transform: translate(0px);
                }
                50%,
                70% {
                    height: 150px;
                    transform: translate(55px);
                }
            }
            @-moz-keyframes fff {
                0%,
                100% {
                    height: 50px;
                    transform: translate(0px);
                }
                50%,
                70% {
                    height: 150px;
                    transform: translate(55px);
                }
            }
        </style>
    </head>
    <body>
        <div class=”box”>
            <div class=”header”>
                <div class=”a_1″></div>
                <div class=”b_1″></div>
                <div class=”a_2″></div>
                <div class=”b_2″></div>
            </div>
            <div class=”body”>
                <div class=”a_3″></div>
                <div class=”b_3″></div>
                <div class=”a_4″></div>
                <div class=”b_4″></div>
            </div>
        </div>
    </body>
</html>
移动web前端开发工具
mac os网页前端开发工具
前端图形化开发工具esp
» 本文来自:前端开发者 » 《前端开发CSS3会动的机器人》
» 本文链接地址:https://www.rokub.com/8111.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!