美文网首页
CSS3 企鹅

CSS3 企鹅

作者: 小碗吃不了 | 来源:发表于2021-04-10 15:28 被阅读0次
    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<style>
    html,
    body,
    div,
    strong {
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
    }

    .wrap {
        width: 600px;
        margin: 50px auto 0;
        position: relative;
    }

    .headtop {
        width: 240px;
        height: 110px;
        background: #000;
        margin: 0 auto;
        border-top-left-radius: 120px 110px;
        border-top-right-radius: 120px 110px;
        position: relative;
        z-index: 999;
    }

    .headbottom {
        width: 240px;
        height: 90px;
        background: #000;
        border-bottom-left-radius: 120px 90px;
        border-bottom-right-radius: 120px 90px;
        position: absolute;
        top: 110px;
        z-index: 1;
    }

    h1 {
        position: absolute;
    }

    .lefteye {
        width: 46px;
        height: 70px;
        background: #fff;
        border-radius: 50% 50%;
        position: absolute;
        top: 30px;
        left: 64px;
        z-index: 2;
    }

    .lefteye_in {
        width: 20px;
        height: 30px;
        background: #000;
        border-radius: 50% 50%;
        margin-left: 23px;
        margin-top: 20px;
    }

    .eyeshow {
        display: block;
        width: 8px;
        height: 10px;
        border-radius: 50% 50%;
        background: #fff;
        position: absolute;
        top: 26px;
        left: 32px;
    }

    .righteye {
        width: 46px;
        height: 70px;
        background: #fff;
        border-radius: 50% 50%;
        position: absolute;
        top: 30px;
        left: 130px;
        z-index: 2;
    }

    .righteye_in {
        width: 19px;
        height: 23px;
        background: #000;
        border-top-left-radius: 17px 30px;
        border-top-right-radius: 17px 30px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 1px solid #000;
        margin-left: 7px;
        margin-top: 16px;
    }

    .eyebai {
        display: block;
        width: 12px;
        height: 19px;
        border-top-left-radius: 5px 14px;
        border-top-right-radius: 8px 14px;
        background: #fff;
        margin-top: 10px;
        margin-left: 4px;
    }

    .mouth {
        width: 158px;
        height: 56px;
        background: #FFA600;
        border-radius: 50%;
        position: absolute;
        top: 106px;
        left: 42px;
        z-index: 2;
    }

    .mouth_bar {
        width: 126px;
        height: 30px;
        background: #000;
        position: absolute;
        top: 142px;
        left: 55px;
        z-index: 2;
        border-bottom-left-radius: 76px 96px;
        border-bottom-right-radius: 76px 96px;
    }

    .mouth_bar1 {
        width: 126px;
        height: 20px;
        background: #ffa600;
        position: absolute;
        z-index: 3;
        border-bottom-left-radius: 104px 32px;
        border-bottom-right-radius: 104px 32px;
    }

    .body {
        width: 276px;
        height: 260px;
        background: #000;
        position: absolute;
        top: 142px;
        left: 167px;
        border-top-left-radius: 160px 140px;
        border-bottom-left-radius: 160px 140px;
        border-top-right-radius: 160px 140px;
        border-bottom-right-radius: 160px 140px;
        z-index: 2;
    }


    .body_1 {
        width: 264px;
        height: 137px;
        background: #ff0000;
        border: 5px solid #000;
        border-top-left-radius: 195px 100px;
        border-bottom-left-radius: 237px 146px;
        border-top-right-radius: 195px 100px;
        border-bottom-right-radius: 269px 146px;
        position: absolute;
        bottom: 159px;
        left: 0px;
    }

    .body_2 {
        width: 249px;
        height: 139px;
        position: absolute;
        background: #000;
        top: -33px;
        left: 7px;
        border-radius: 50%;
        border: 1px #000 solid;
    }

    .body_3 {
        width: 241px;
        height: 145px;
        position: absolute;
        background: red;
        top: 0px;
        left: 5px;
        border-radius: 50%;
    }


    .tummy {
        width: 240px;
        height: 240px;
        background: #fff;
        position: absolute;
        top: 11px;
        left: 17px;
        border-radius: 50%;
    }


    .pocket {
        width: 58px;
        height: 78px;
        position: absolute;
        top: 72px;
        left: 19px;
        border: 3px solid #000;
        background: red;
        border-top-left-radius: 20px 52px;
        border-bottom-left-radius: 40px 40px;
        border-top-right-radius: 0px 0px;
        border-bottom-right-radius: 21px 21px;
    }

    .pocket .pocket_line1 {
        width: 11px;
        height: 43px;
        border-bottom-left-radius: 29px 57px;
        border-top-left-radius: 0px 0px;
        border: 9px solid #000;
        border-top: none;
        border-right: none;
        position: absolute;
        top: 0px;
        left: 30px;
        -webkit-transform: rotateZ(10deg);
        -moz-transform: rotateZ(10deg);
        -ms-transform: rotateZ(10deg);
        -o-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
    }

    .pocket .pocket_line2 {
        width: 2px;
        height: 45px;
        border-bottom-left-radius: 11px 24px;
        border-top-left-radius: 10px 15px;
        border: 9px solid red;
        border-top: none;
        border-right: none;
        position: absolute;
        top: 0px;
        left: 2px;
    }

    .lefthand,
    .righthand {
        width: 49px;
        height: 160px;
        background: #000;
        position: absolute;
    }

    .lefthand {
        top: 20px;
        left: -29px;
        border-top-left-radius: 89px 166px;
        border-top-right-radius: 6px 63px;
        border-bottom-left-radius: 85px 194px;
        border-bottom-right-radius: 40px 128px;
        -webkit-transform: rotateZ(20deg);
        -moz-transform: rotateZ(20deg);
        -ms-transform: rotateZ(20deg);
        -o-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
        -webkit-animation: left_rotate 0.5s infinite;
        -moz-animation: left_rotate 0.5s infinite;
        -ms-animation: left_rotate 0.5s infinite;
        -o-animation: left_rotate 0.5s infinite;
        animation: left_rotate 0.5s infinite;
        -webkit-animation-direction: alternate;
        -moz-animation-direction: alternate;
        -ms-animation-direction: alternate;
        -o-animation-direction: alternate;
        animation-direction: alternate;
    }

    .righthand {
        top: 20px;
        left: 258px;
        border-top-right-radius: 89px 166px;
        border-bottom-right-radius: 85px 194px;
        border-top-left-radius: 6px 63px;
        border-bottom-left-radius: 40px 128px;
        -webkit-transform: rotateZ(-20deg);
        -moz-transform: rotateZ(-20deg);
        -ms-transform: rotateZ(-20deg);
        -o-transform: rotateZ(-20deg);
        transform: rotateZ(-20deg);
        -webkit-animation: right_rotate 0.5s infinite;
        -moz-animation: right_rotate 0.5s infinite;
        -ms-animation: right_rotate 0.5s infinite;
        -o-animation: right_rotate 0.5s infinite;
        animation: right_rotate 0.5s infinite;
        -webkit-animation-direction: alternate;
        -moz-animation-direction: alternate;
        -ms-animation-direction: alternate;
        -o-animation-direction: alternate;
        animation-direction: alternate;
    }



    .footer .left_footer,
    .footer .right_footer {
        width: 134px;
        height: 74px;
        position: absolute;
        background: #ffa600;
        border: 3px solid #000;
        border-radius: 50%;
        z-index: 1;
    }

    .footer .left_footer {
        top: 347px;
        left: 163px;
    }

    .footer .right_footer {
        top: 347px;
        left: 320px;
    }

    @keyframes left_rotate {
        from {
            -webkit-transform-origin: right 30%;
            -webkit-transform: rotateZ(60deg);
        }

        to {
            -webkit-transform-origin: right 30%;
            -webkit-transform: rotateZ(30deg);
        }
    }

    @keyframes right_rotate {
        from {
            -webkit-transform-origin: left 30%;
            -webkit-transform: rotateZ(-60deg);
        }

        to {
            -webkit-transform-origin: left 30%;
            -webkit-transform: rotateZ(-30deg);
        }
    }

    @-webkit-keyframes left_rotate {
        from {
            -webkit-transform-origin: right 30%;
            -webkit-transform: rotateZ(60deg);
        }

        to {
            -webkit-transform-origin: right 30%;
            -webkit-transform: rotateZ(30deg);
        }
    }

    @-webkit-keyframes right_rotate {
        from {
            -webkit-transform-origin: left 30%;
            -webkit-transform: rotateZ(-60deg);
        }

        to {
            -webkit-transform-origin: left 30%;
            -webkit-transform: rotateZ(-30deg);
        }
    }

    @-moz-keyframes left_rotate {
        from {
            transform-origin: right 30%;
            transform: rotateZ(60deg);
        }

        to {
            transform-origin: right 30%;
            transform: rotateZ(30deg);
        }
    }

    @-moz-keyframes right_rotate {
        from {
            transform-origin: left 30%;
            transform: rotateZ(-60deg);
        }

        to {
            transform-origin: left 30%;
            transform: rotateZ(-30deg);
        }
    }

    @-ms-keyframes left_rotate {
        from {
            transform-origin: right 30%;
            transform: rotateZ(60deg);
        }

        to {
            transform-origin: right 30%;
            transform: rotateZ(30deg);
        }
    }

    @-ms-keyframes right_rotate {
        from {
            transform-origin: left 30%;
            transform: rotateZ(-60deg);
        }

        to {
            transform-origin: left 30%;
            transform: rotateZ(-30deg);
        }
    }

    @-o-keyframes left_rotate {
        from {
            transform-origin: right 30%;
            transform: rotateZ(60deg);
        }

        to {
            transform-origin: right 30%;
            transform: rotateZ(30deg);
        }
    }

    @-o-keyframes right_rotate {
        from {
            transform-origin: left 30%;
            transform: rotateZ(-60deg);
        }

        to {
            transform-origin: left 30%;
            transform: rotateZ(-30deg);
        }
    }
</style>
</head>

<body>
<div class="wrap">
    <!-- 企鹅头部 -->
    <div class="headtop">
        <div class="headbottom"></div>
        <!-- 眼睛部分 -->
        <h1 class="lefteye">
            <p class="lefteye_in">
                <strong class="eyeshow"></strong>
            </p>
        </h1>
        <h1 class="righteye">
            <p class="righteye_in">
                <strong class="eyebai"></strong>
            </p>
        </h1>
        <!-- 嘴巴部分 -->
        <h1 class="mouth"></h1>
        <p class="mouth_bar">
            <strong class="mouth_bar1"></strong>
        </p>
    </div>
    <!-- 企鹅头部 -->
    <!-- 企鹅身体 -->
    <div class="body">
        <div class="tummy">
            <div class="pocket">
                <div class="pocket_line1">
                    <div class="pocket_line2"></div>
                </div>
            </div>
        </div>
        <div class="hand">
            <div class="lefthand"></div>
            <div class="righthand"></div>
        </div>
        <div class="body_1">
            <div class="body_2">
                <div class="body_3"></div>
            </div>
        </div>
    </div>
    <!-- 企鹅脚丫 -->
    <div class="footer">
        <div class="left_footer"></div>
        <div class="right_footer"></div>
    </div>
</div>
</body>

</html>

    相关文章

      网友评论

          本文标题：CSS3 企鹅

          本文链接：https://www.haomeiwen.com/subject/rqrnkltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS3 企鹅|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！