css3绘图制作灰太狼头像动画特效

最新推荐文章于 2021-08-04 01:25:41 发布
最新推荐文章于 2021-08-04 01:25:41 发布
阅读量429 收藏 1
点赞数
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/105839197
版权

在这里插入图片描述

html代码：

<body>
<div id="bigBigWolf">
    <div id="url"><a href="#"></a></div>
    <div class="face">
        <div class="left"></div>
        <div class="right"></div>
        <div class="cover1"></div>
        <div class="cover2"></div>
        <div class="cover3"></div>
        <div class="cover4"></div>
        <div class="cover5"></div>
    </div>
    <div class="ear">
        <div class="left">
            <div class="inner"></div>
            <div class="cover1"></div>
            <div class="cover2"></div>
            <div class="cover3"></div>
            <div class="cover4"></div>
            <div class="cover5"></div>
        </div>
        <div class="right">
            <div class="inner"></div>
            <div class="cover1"></div>
            <div class="cover2"></div>
            <div class="cover3"></div>
            <div class="cover4"></div>
            <div class="cover5"></div>
        </div>
    </div>
    <div class="eye">
        <div class="left">
            <div class="inner">
                <div class="pupil">
                    <div class="inner"></div>
                    <div class="light1"></div>
                    <div class="light2"></div>
                    <div class="light3"></div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="inner">
                <div class="pupil">
                    <div class="inner"></div>
                    <div class="light1"></div>
                    <div class="light2"></div>
                    <div class="light3"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="eyebrow">
        <div class="left">
            <div class="inner"></div>
            <div class="eyebrow1"></div>
            <div class="eyebrow2"></div>
        </div>
        <div class="right">
            <div class="inner"></div>
            <div class="eyebrow1"></div>
        </div>
    </div>
    <div class="nose">
        <div class="outer">
            <div class="inner"></div>
            <div class="light"></div>
        </div>
    </div>
    <div class="mouth">
        <div class="inner">
            <div class="tooth1"></div>
            <div class="tooth2"></div>
            <div class="tooth3"></div>
            <div class="tooth4"></div>
            <div class="tooth5"></div>
            <div class="tooth6"></div>
            <div class="tooth7"></div>
            <div class="tooth8"></div>
            <div class="tooth9"></div>
            <div class="tooth10"></div>
            <div class="tooth11"></div>
            <div class="tooth12"></div>
            <div class="tooth13"></div>
            <div class="tooth14"></div>
            <div class="tooth15"></div>
            <div class="tooth16"></div>
            <div class="tooth17"></div>
            <div class="tooth18"></div>
            <div class="tooth19"></div>
            <div class="tooth20"></div>
            <div class="tooth21"></div>
            <div class="tooth22"></div>
            <div class="tooth23"></div>
        </div>
    </div>
    <div class="beard">
        <div class="beard1"></div>
        <div class="beard2"></div>
        <div class="beard3"></div>
        <div class="beard4"></div>
        <div class="beard5"></div>
        <div class="beard6"></div>
        <div class="beard7"></div>
        <div class="beard8"></div>
        <div class="beard9"></div>
        <div class="beard10"></div>
        <div class="beard11"></div>
        <div class="beard12"></div>
    </div>
    <div class="scar">
        <div class="scar1"></div>
        <div class="scar2"></div>
        <div class="scar3"></div>
        <div class="scar4"></div>
        <div class="scar5"></div>
    </div>
    <div class="hat">
        <div class="inner">
            <div class="patch">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
                <div class="line4"></div>
                <div class="line5"></div>
                <div class="line6"></div>
                <div class="line7"></div>
                <div class="line8"></div>
                <div class="line9"></div>
                <div class="line10"></div>
            </div>
        </div>
    </div>
</div>
</body>

css代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        #bigBigWolf {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -300px;
            width: 600px;
            height: 600px;
        }
        #bigBigWolf div {
            position: absolute;
        }
        #bigBigWolf #url a {
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: 600px;
            z-index: 100;
        }
        #bigBigWolf .face {
            left: 127px;
            bottom: 67px;
            width: 380px;
            height: 380px;
            border: 3px solid #181818;
            background: #666B6F;
            z-index: 0;
			border-radius: 230px 180px 300px 220px;
            -webkit-border-radius: 230px 180px 300px 220px;
            -moz-border-radius: 230px 180px 300px 220px;
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -o-transform: rotate(60deg);
        }
        #bigBigWolf .face .left {
            left: 30px;
            top: 317px;
            width: 180px;
            height: 106px;
            border: 3px solid #181818;
            border-top: 0;
            background: #666B6F;
            z-index: 10;
			border-bottom-left-radius: 2800px 1200px;
            -webkit-border-bottom-left-radius: 2800px 1200px;
            -moz-border-radius-bottomleft: 2800px 1200px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }
        #bigBigWolf .face .right {
            left: 105px;
            top: -45px;
            width: 160px;
            height: 90px;
            border: 3px solid #181818;
            border-bottom: 0;
            background: #666B6F;
            z-index: 10;
			border-top-left-radius: 2800px 2000px;
            -webkit-border-top-left-radius: 2800px 2000px;
            -moz-border-radius-topleft: 2800px 2000px;
            transform: rotate(335deg);
            -webkit-transform: rotate(335deg);
            -moz-transform: rotate(335deg);
            -o-transform: rotate(335deg);
        }
        #bigBigWolf .face .cover1 {
            left: 160px;
            top: 415px;
            width: 28px;
            height: 40px;
            border: 3px solid #181818;
            border-bottom: 0;
            background: #FFF;
            z-index: 20;
			border-top-left-radius: 600px 1200px;
			border-top-right-radius: 400px 700px;
			border-bottom-left-radius: 400px 150px;
			border-bottom-right-radius: 400px 150px;
            -webkit-border-top-left-radius: 600px 1200px;
            -webkit-border-top-right-radius: 400px 700px;
            -webkit-border-bottom-left-radius: 400px 150px;
            -webkit-border-bottom-right-radius: 400px 150px;
            -moz-border-radius-topleft: 600px 1200px;
            -moz-border-radius-topright: 400px 700px;
            -moz-border-radius-bottomleft: 400px 150px;
            -moz-border-radius-bottomright: 400px 150px;
        }
        #bigBigWolf .face .cover2 {
            left: 163px;
            top: 433px;
            width: 40px;
            height: 40px;
            background: #FFF;
            z-index: 30;
			border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
        }
        #bigBigWolf .face .cover3 {
            left: 53px;
            top: 285px;
            width: 74px;
            height: 74px;
            background: #666B6F;
            z-index: 40;
			border-radius: 37px;
            -webkit-border-radius: 37px;
            -moz-border-radius: 37px;
        }
        #bigBigWolf .face .cover4 {
            left: 227px;
            top: -80px;
            width: 25px;
            height: 40px;
            border: 3px solid #181818;
            border-bottom: 0;
            background: #FFF;
            z-index: 20;
			border-top-left-radius: 600px 1200px;
            border-top-right-radius: 400px 700px;
            border-bottom-left-radius: 400px 150px;
            border-bottom-right-radius: 400px 150px;
            -webkit-border-top-left-radius: 600px 1200px;
            -webkit-border-top-right-radius: 400px 700px;
            -webkit-border-bottom-left-radius: 400px 150px;
            -webkit-border-bottom-right-radius: 400px 150px;
            -moz-border-radius-topleft: 600px 1200px;
            -moz-border-radius-topright: 400px 700px;
            -moz-border-radius-bottomleft: 400px 150px;
            -moz-border-radius-bottomright: 400px 150px;
            transform: rotate(170deg);
            -webkit-transform: rotate(170deg);
            -moz-transform: rotate(170deg);
            -o-transform: rotate(170deg);
        }
        #bigBigWolf .face .cover5 {
            left: 214px;
            top: -90px;
            width: 60px;
            height: 30px;
            background: #FFF;
            z-index: 40;
            transform: rotate(28deg);
            -webkit-transform: rotate(28deg);
            -moz-transform: rotate(28deg);
            -o-transform: rotate(28deg);
        }
        #bigBigWolf .ear {
            z-index: 0;
        }
        #bigBigWolf .ear .left {
            left: 48px;
            top: 167px;
            width: 180px;
            height: 120px;
            border: 3px solid #181818;
            border-right: 0;
            background: #666B6F;
            z-index: 0;
			border-top-left-radius: 295px 200px;
			border-radius-topleft: 295px 200px;
            -webkit-border-top-left-radius: 295px 200px;
            -moz-border-radius-topleft: 295px 200px;
            transform: rotate(51deg);
            -webkit-transform: rotate(51deg);
            -moz-transform: rotate(51deg);
            -o-transform: rotate(51deg);
        }
        #bigBigWolf .ear .left .inner {
            left: -3px;
            top: 88px;
            width: 180px;
            height: 30px;
            border: 3px solid #181818;
            border-right: 0;
            background: #96979C;
            z-index: 10;
			border-top-left-radius: 1000px 200px;
			border-radius-topleft: 1000px 200px;
            -webkit-border-top-left-radius: 1000px 200px;
            -moz-border-radius-topleft: 1000px 200px;
        }
        #bigBigWolf .ear .left .cover1 {
            left: 83px;
            top: 30px;
            width: 132px;
            height: 65px;
            background: #666B6F;
            z-index: 20;
			border-bottom-right-radius: 1200px 200px;
			border-radius-bottomright: 1200px 200px;
            -webkit-border-bottom-right-radius: 1200px 200px;
            -moz-border-radius-bottomright: 1200px 200px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
        }
        #bigBigWolf .ear .left .cover2 {
            left: 111px;
            top: 91px;
            width: 12px;
            height: 8px;
            border: 3px solid #181818;
            border-right: 0;
            background: #666B6F;
            z-index: 30;
			border-top-left-radius: 30px 20px;
			border-radius-topleft: 30px 20px;
            -webkit-border-top-left-radius: 30px 20px;
            -moz-border-radius-topleft: 30px 20px;
            transform: rotate(345deg);
            -webkit-transform: rotate(345deg);
            -moz-transform: rotate(345deg);
            -o-transform: rotate(345deg);
        }
        #bigBigWolf .ear .left .cover3 {
            left: 114px;
            top: 104px;
            width: 12px;
            height: 6px;
            border: 3px solid #181818;
            border-right: 0;
            background: #666B6F;
            z-index: 30;
			border-top-left-radius: 30px 20px;
			border-radius-topleft: 30px 20px;
            -webkit-border-top-left-radius: 30px 20px;
            -moz-border-radius-topleft: 30px 20px;
            transform: rotate(325deg);
            -webkit-transform: rotate(325deg);
            -moz-transform: rotate(325deg);
            -o-transform: rotate(325deg);
        }
        #bigBigWolf .ear .left .cover4 {
            left: 123px;
            top: 113px;
            width: 11px;
            height: 4px;
            border: 3px solid #181818;
            border-right: 0;
            border-top: 0;
            background: #666B6F;
            z-index: 30;
			border-bottom-left-radius: 30px 20px;
			border-radius-bottomleft: 30px 20px;
            -webkit-border-bottom-left-radius: 30px 20px;
            -moz-border-radius-bottomleft: 30px 20px;
            transform: rotate(62deg);
            -webkit-transform: rotate(62deg);
            -moz-transform: rotate(62deg);
            -o-transform: rotate(62deg);
        }
        #bigBigWolf .ear .right {
            left: 340px;
            top: 78px;
            width: 140px;
            height: 100px;
            border: 3px solid #181818;
            border-left: 0;
            background: #666B6F;
            z-index: 10;
			border-top-right-radius: 245px 190px;
			border-radius-topright: 245px 190px;
            -webkit-border-top-right-radius: 245px 190px;
            -moz-border-radius-topright: 245px 190px;
            transform: rotate(275deg);
            -webkit-transform: rotate(275deg);
            -moz-transform: rotate(275deg);
            -o-transform: rotate(275deg);
        }
        #bigBigWolf .ear .right .inner {
            left: -1px;
            top: 68px;
            width: 140px;
            height: 30px;
            border: 3px solid #181818;
            border-left: 0;
            background: #96979C;
            z-index: 10;
			border-top-right-radius: 1200px 300px;
			border-radius-topright: 1200px 300px;
            -webkit-border-top-right-radius: 1200px 300px;
            -moz-border-radius-topright: 1200px 300px;
        }
        #bigBigWolf .ear .right .cover1 {
            left: -49px;
            top: 25px;
            width: 120px;
            height: 40px;
            border: 3px solid #181818;
            border-bottom: 0;
            background: #666B6F;
            z-index: 20;
			border-top-right-radius: 1200px 300px;
			border-radius-topright: 1200px 300px;
            -webkit-border-top-right-radius: 1200px 300px;
            -moz-border-radius-topright: 1200px 300px;
            transform: rotate(101deg);
            -webkit-transform: rotate(101deg);
            -moz-transform: rotate(101deg);
            -o-transform: rotate(101deg);
        }
        #bigBigWolf .ear .right .cover2 {
            left: -135px;
            top: 117px;
            width: 145px;
            height: 40px;
            border: 3px solid #181818;
            border-bottom: 0;
            background: #666B6F;
            z-index: 30;
			border-top-right-radius: 1100px 300px;
			border-radius-topright: 1100px 300px;
            -webkit-border-top-right-radius: 1100px 300px;
            -moz-border-radius-topright: 1100px 300px;
            transform: rotate(133deg);
            -webkit-transform: rotate(133deg);
            -moz-transform: rotate(133deg);
            -o-transform: rotate(133deg);
        }
        #bigBigWolf .ear .right .cover3 {
            left: -85px;
            top: 15px;
            width: 80px;
            height: 80px;
            background: #666B6F;
            z-index: 40;
        }
        #bigBigWolf .ear .right .cover4 {
            left: -142px;
            top: 144px;
            width: 40px;
            height: 40px;
            background: #666B6F;
            z-index: 50;
			border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
        }
        #bigBigWolf .ear .right .cover5 {
            left: 32px;
            top: 87px;
            width: 30px;
            height: 30px;
            border: 3px solid #181818;
            border-bottom: 0;
            border-left: 0;
            background: #FFF;
            z-index: 50;
			border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            transform: rotate(313deg);
            -webkit-transform: rotate(313deg);
            -moz-transform: rotate(313deg);
            -o-transform: rotate(313deg);
        }
        #bigBigWolf .hat {
            left: 137px;
            top: 115px;
            width: 238px;
            height: 100px;
            border: 3px solid #181818;
            background: #E09E86;
            z-index: 40;
			border-top-left-radius: 2000px 1000px;
            border-top-right-radius: 700px 700px;
            border-bottom-left-radius: 300px 200px;
            border-bottom-right-radius: 450px 450px;
            -webkit-border-top-left-radius: 2000px 1000px;
            -webkit-border-top-right-radius: 700px 700px;
            -webkit-border-bottom-left-radius: 300px 200px;
            -webkit-border-bottom-right-radius: 450px 450px;
            -moz-border-radius-topleft: 2000px 1000px;
            -moz-border-radius-topright: 700px 700px;
            -moz-border-radius-bottomleft: 300px 200px;
            -moz-border-radius-bottomright: 450px 450px;
            transform: rotate(338deg);
            -webkit-transform: rotate(338deg);
            -moz-transform: rotate(338deg);
            -o-transform: rotate(338deg);
        }
        #bigBigWolf .hat .inner {
            right: -1px;
            top: 1px;
            width: 238px;
            height: 80px;
            border: 3px solid #181818;
            background: #CF6A36;
            z-index: 0;
			border-top-left-radius: 2400px 1200px;
            border-top-right-radius: 800px 800px;
            border-bottom-left-radius: 400px 200px;
            border-bottom-right-radius: 450px 450px;
            -webkit-border-top-left-radius: 2400px 1200px;
            -webkit-border-top-right-radius: 800px 800px;
            -webkit-border-bottom-left-radius: 400px 200px;
            -webkit-border-bottom-right-radius: 450px 450px;
            -moz-border-radius-topleft: 2400px 1200px;
            -moz-border-radius-topright: 800px 800px;
            -moz-border-radius-bottomleft: 400px 200px;
            -moz-border-radius-bottomright: 450px 450px;
            transform: rotate(357deg);
            -webkit-transform: rotate(357deg);
            -moz-transform: rotate(357deg);
            -o-transform: rotate(357deg);
        }
        #bigBigWolf .hat .patch {
            right: -3px;
            top: -7px;
            width: 110px;
            height: 50px;
            border: 3px solid #181818;
            background: #EFC978;
            z-index: 10;
			border-top-left-radius: 500px 300px;
            border-top-right-radius: 300px 200px;
            border-bottom-left-radius: 100px 100px;
            border-bottom-right-radius: 100px 100px;
            -webkit-border-top-left-radius: 500px 300px;
            -webkit-border-top-right-radius: 300px 200px;
            -webkit-border-bottom-left-radius: 100px 100px;
            -webkit-border-bottom-right-radius: 100px 100px;
            -moz-border-radius-topleft: 500px 300px;
            -moz-border-radius-topright: 300px 200px;
            -moz-border-radius-bottomleft: 100px 100px;
            -moz-border-radius-bottomright: 100px 100px;
            transform: rotate(20deg);
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -o-transform: rotate(20deg);
        }
        #bigBigWolf .hat .patch .line1, #bigBigWolf .hat .patch .line2, #bigBigWolf .hat .patch .line3, #bigBigWolf .hat .patch .line4, #bigBigWolf .hat .patch .line5, #bigBigWolf .hat .patch .line6, #bigBigWolf .hat .patch .line7, #bigBigWolf .hat .patch .line8, #bigBigWolf .hat .patch .line9, #bigBigWolf .hat .patch .line10 {
            left: -7px;
            top: 30px;
            width: 18px;
            height: 2px;
            font-size: 0;
            background: #181818;
            z-index: 20px;
            transform: rotate(350deg);
            -webkit-transform: rotate(350deg);
            -moz-transform: rotate(350deg);
            -o-transform: rotate(350deg);
        }
        #bigBigWolf .hat .patch .line2 {
            left: -13px;
            top: 42px;
            width: 20px;
            transform: rotate(340deg);
            -webkit-transform: rotate(340deg);
            -moz-transform: rotate(340deg);
            -o-transform: rotate(340deg);
        }
        #bigBigWolf .hat .patch .line3 {
            left: 5px;
            top: 50px;
            width: 17px;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -moz-transform: rotate(300deg);
            -o-transform: rotate(300deg);
        }
        #bigBigWolf .hat .patch .line4 {
            left: 20px;
            top: 53px;
            width: 17px;
            transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -o-transform: rotate(270deg);
        }
        #bigBigWolf .hat .patch .line5 {
            left: 35px;
            top: 50px;
            width: 14px;
            transform: rotate(290deg);
            -webkit-transform: rotate(290deg);
            -moz-transform: rotate(290deg);
            -o-transform: rotate(290deg);
        }
        #bigBigWolf .hat .patch .line6 {
            left: 50px;
            top: 52px;
            width: 19px;
            transform: rotate(275deg);
            -webkit-transform: rotate(275deg);
            -moz-transform: rotate(275deg);
            -o-transform: rotate(275deg);
        }
        #bigBigWolf .hat .patch .line7 {
            left: 70px;
            top: 50px;
            width: 15px;
            transform: rotate(290deg);
            -webkit-transform: rotate(260deg);
            -moz-transform: rotate(260deg);
            -o-transform: rotate(260deg);
        }
        #bigBigWolf .hat .patch .line8 {
            left: 85px;
            top: 51px;
            width: 19px;
            transform: rotate(250deg);
            -webkit-transform: rotate(250deg);
            -moz-transform: rotate(250deg);
            -o-transform: rotate(250deg);
        }
        #bigBigWolf .hat .patch .line9 {
            left: 102px;
            top: 45px;
            width: 13px;
            transform: rotate(230deg);
            -webkit-transform: rotate(230deg);
            -moz-transform: rotate(230deg);
            -o-transform: rotate(230deg);
        }
        #bigBigWolf .hat .patch .line10 {
            left: 106px;
            top: 34px;
            width: 12px;
            transform: rotate(220deg);
            -webkit-transform: rotate(220deg);
            -moz-transform: rotate(220deg);
            -o-transform: rotate(220deg);
        }
        #bigBigWolf .eye {
            left: 213px;
            top: 221px;
            width: 287px;
            height: 185px;
            z-index: 20;
        }
        #bigBigWolf .eye .left, #bigBigWolf .eye .right {
            width: 121px;
            height: 121px;
            border: 3px solid #181818;
            background: #DBDBDB;
            z-index: 0;
			border-radius: 61px;
            -webkit-border-radius: 61px;
            -moz-border-radius: 61px;
        }
        #bigBigWolf .eye .left {
            left: 0;
            bottom: 0;
        }
        #bigBigWolf .eye .right {
            right: 0;
            top: 0;
        }
        #bigBigWolf .eye .inner {
            left: 2px;
            top: 2px;
            width: 114px;
            height: 114px;
            background: #FFF;
            z-index: 10;
			border-radius: 57px;
            -webkit-border-radius: 57px;
            -moz-border-radius: 57px;
        }
        #bigBigWolf .eye .pupil {
            left: 8px;
            top: 26px;
            width: 54px;
            height: 54px;
            border: 2px solid #181818;
            z-index: 20;
			border-radius: 27px;
            -webkit-border-radius: 27px;
            -moz-border-radius: 27px;
            background: #404972;
            background: -webkit-gradient(linear, 43% 0%, 39% 100%, from(#181818), to(#455289), color-stop(1.0, #455289));
            background: -moz-linear-gradient(50% 25% 260deg, #181818, #455289, #455289 100%);
            -webkit-animation: 'pupil' 2s linear;
            -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes pupil {
            0% {
                left: 8px;
                top: 26px;
            }
            25% {
                left: 29px;
                top: 33px;
            }
            50% {
                left: 50px;
                top: 40px;
            }
            75% {
                left: 29px;
                top: 33px;
            }
            100% {
                left: 8px;
                top: 26px;
            }
        }
        #bigBigWolf .eye .pupil .inner {
            left: 9px;
            top: 9px;
            width: 36px;
            height: 36px;
            background: #1A1A1A;
            z-index: 30;
			border-radius: 18px;
            -webkit-border-radius: 18px;
            -moz-border-radius: 18px;
        }
        #bigBigWolf .eye .light1 {
            left: 21px;
            bottom: 3px;
            width: 16px;
            height: 16px;
            background: #FFF;
            z-index: 40;
			border-radius: 15px 7px 10px 10px;
            -webkit-border-radius: 15px 7px 10px 10px;
            -moz-border-radius: 20px 7px 20px 10px;
            transform: rotate(320deg);
            -webkit-transform: rotate(320deg);
            -moz-transform: rotate(320deg);
            -o-transform: rotate(320deg);
        }
        #bigBigWolf .eye .light2 {
            left: 7px;
            bottom: 11px;
            width: 14px;
            height: 6px;
            background: #FFF;
            z-index: 40;
			border-top-left-radius: 500px 300px;
            border-top-right-radius: 300px 200px;
            border-bottom-left-radius: 100px 100px;
            border-bottom-right-radius: 100px 100px;
            -webkit-border-top-left-radius: 500px 300px;
            -webkit-border-top-right-radius: 300px 200px;
            -webkit-border-bottom-left-radius: 100px 100px;
            -webkit-border-bottom-right-radius: 100px 100px;
            -moz-border-radius-topleft: 20px 20px;
            -moz-border-radius-topright: 30px 20px;
            -moz-border-radius-bottomleft: 5px 5px;
            -moz-border-radius-bottomright: 5px 5px;
            transform: rotate(285deg);
            -webkit-transform: rotate(285deg);
            -moz-transform: rotate(285deg);
            -o-transform: rotate(285deg);
        }
        #bigBigWolf .eye .light3 {
            right: 2px;
            top: 4px;
            width: 30px;
            height: 13px;
            background: #FFF;
            z-index: 40;
			border-top-left-radius: 40px 40px;
            border-top-right-radius: 100px 50px;
            border-bottom-left-radius: 15px 15px;
            border-bottom-right-radius: 15px 15px;
            -webkit-border-top-left-radius: 40px 40px;
            -webkit-border-top-right-radius: 100px 50px;
            -webkit-border-bottom-left-radius: 15px 15px;
            -webkit-border-bottom-right-radius: 15px 15px;
            -moz-border-radius-topleft: 40px 40px;
            -moz-border-radius-topright: 100px 50px;
            -moz-border-radius-bottomleft: 15px 15px;
            -moz-border-radius-bottomright: 15px 15px;
            transform: rotate(20deg);
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -o-transform: rotate(20deg);
        }
        #bigBigWolf .eyebrow {
            left: 187px;
            top: 173px;
            width: 280px;
            height: 130px;
            z-index: 70;
        }
        #bigBigWolf .eyebrow .left {
            left: 0;
            top: 48px;
            width: 110px;
            height: 40px;
            background: #181818;
            z-index: 0;
			border-top-left-radius: 400px 200px;
            border-top-right-radius: 400px 200px;
            -webkit-border-top-left-radius: 400px 200px;
            -webkit-border-top-right-radius: 400px 200px;
            -moz-border-radius-topleft: 400px 200px;
            -moz-border-radius-topright: 400px 200px;
            transform: rotate(330deg);
            -webkit-transform: rotate(330deg);
            -moz-transform: rotate(330deg);
            -o-transform: rotate(330deg);
        }
        #bigBigWolf .eyebrow .left .inner {
            left: 0;
            top: 20px;
            width: 120px;
            height: 30px;
            background: #666B6F;
            z-index: 0;
			border-top-left-radius: 400px 200px;
            border-top-right-radius: 400px 200px;
            -webkit-border-top-left-radius: 400px 200px;
            -webkit-border-top-right-radius: 400px 200px;
            -moz-border-radius-topleft: 400px 200px;
            -moz-border-radius-topright: 400px 200px;
        }
        #bigBigWolf .eyebrow .left .eyebrow1, #bigBigWolf .eyebrow .left .eyebrow2, #bigBigWolf .eyebrow .right .eyebrow1 {
            left: -22px;
            top: 36px;
            width: 22px;
            height: 2px;
            font-size: 0;
            background: #181818;
            z-index: 10px;
            transform: rotate(86deg);
            -webkit-transform: rotate(86deg);
            -moz-transform: rotate(86deg);
            -o-transform: rotate(86deg);
        }
        #bigBigWolf .eyebrow .left .eyebrow2 {
            left: -15px;
            top: 32px;
            width: 20px;
        }
        #bigBigWolf .eyebrow .right .eyebrow1 {
            left: 93px;
            top: 24px;
            width: 20px;
        }
        #bigBigWolf .eyebrow .right {
            right: 17px;
            top: -3px;
            width: 100px;
            height: 40px;
            background: #181818;
            z-index: 0;
			border-top-left-radius: 400px 200px;
            border-top-right-radius: 400px 200px;
            -webkit-border-top-left-radius: 400px 200px;
            -webkit-border-top-right-radius: 400px 200px;
            -moz-border-radius-topleft: 400px 200px;
            -moz-border-radius-topright: 400px 200px;
            transform: rotate(355deg);
            -webkit-transform: rotate(355deg);
            -moz-transform: rotate(355deg);
            -o-transform: rotate(355deg);
        }
        #bigBigWolf .eyebrow .right .inner {
            right: -7px;
            top: 20px;
            width: 120px;
            height: 30px;
            background: #666B6F;
            z-index: 0;
			border-top-left-radius: 400px 200px;
            border-top-right-radius: 400px 200px;
            -webkit-border-top-left-radius: 400px 200px;
            -webkit-border-top-right-radius: 400px 200px;
            -moz-border-radius-topleft: 400px 200px;
            -moz-border-radius-topright: 400px 200px;
        }
        #bigBigWolf .nose {
            right: 158px;
            bottom: 203px;
            width: 74px;
            height: 74px;
            z-index: 30;
            background: #4B4B4B;
			border-radius: 160px 40px 160px 40px;
            -webkit-border-radius: 160px 40px 160px 40px;
            -moz-border-radius: 160px 30px 160px 40px;
            transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            -moz-transform: rotate(25deg);
            -o-transform: rotate(25deg);
        }
        #bigBigWolf .nose .outer {
            right: 1px;
            top: -2px;
            width: 72px;
            height: 72px;
            z-index: 0;
            background: #181818;
			border-radius: 150px 40px 150px 40px;
            -webkit-border-radius: 150px 40px 150px 40px;
            -moz-border-radius: 150px 40px 150px 40px;
            transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            -moz-transform: rotate(2deg);
            -o-transform: rotate(2deg);
        }
        #bigBigWolf .nose .inner {
            right: 18px;
            top: 13px;
            width: 24px;
            height: 24px;
            z-index: 10;
            background: #4F4F4F;
			border-radius: 150px 50px 150px 50px;
            -webkit-border-radius: 150px 50px 150px 50px;
            -moz-border-radius: 150px 50px 150px 50px;
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
        }
        #bigBigWolf .nose .light {
            right: 16px;
            top: 3px;
            width: 20px;
            height: 20px;
            z-index: 20;
            background: #FFF;
			border-radius: 150px 70px 150px 70px;
            -webkit-border-radius: 150px 70px 150px 70px;
            -moz-border-radius: 150px 70px 150px 70px;
            transform: rotate(3deg);
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
        }
        #bigBigWolf .mouth {
            right: 62px;
            bottom: 108px;
            width: 290px;
            height: 60px;
            border: 3px solid #181818;
            background: #FFF;
            z-index: 50;
			border-top-left-radius: 700px 0;
            border-top-right-radius: 700px 0;
            border-bottom-left-radius: 2800px 1200px;
            border-bottom-right-radius: 2800px 1200px;
            -webkit-border-top-left-radius: 700px 0;
            -webkit-border-top-right-radius: 700px 0;
            -webkit-border-bottom-left-radius: 2800px 1200px;
            -webkit-border-bottom-right-radius: 2800px 1200px;
            -moz-border-radius-topleft: 700px 0;
            -moz-border-radius-topright: 700px 0;
            -moz-border-radius-bottomleft: 2800px 1200px;
            -moz-border-radius-bottomright: 2800px 1200px;
            transform: rotate(341deg);
            -webkit-transform: rotate(341deg);
            -moz-transform: rotate(341deg);
            -o-transform: rotate(341deg);
        }
        #bigBigWolf .mouth .inner {
            right: -3px;
            bottom: 41px;
            width: 289px;
            height: 20px;
            border: 3px solid #181818;
            border-top: 0;
            background: #666B6F;
            z-index: 0;
			border-top-left-radius: 700px 0;
            border-top-right-radius: 700px 0;
            border-bottom-left-radius: 7800px 1500px;
            border-bottom-right-radius: 7800px 1500px;
            -webkit-border-top-left-radius: 700px 0;
            -webkit-border-top-right-radius: 700px 0;
            -webkit-border-bottom-left-radius: 7800px 1500px;
            -webkit-border-bottom-right-radius: 7800px 1500px;
            -moz-border-radius-topleft: 700px 0;
            -moz-border-radius-topright: 700px 0;
            -moz-border-radius-bottomleft: 7800px 1500px;
            -moz-border-radius-bottomright: 7800px 1500px;
        }
        #bigBigWolf .tooth1, #bigBigWolf .tooth2, #bigBigWolf .tooth3, #bigBigWolf .tooth4, #bigBigWolf .tooth5, #bigBigWolf .tooth6, #bigBigWolf .tooth7, #bigBigWolf .tooth8, #bigBigWolf .tooth9, #bigBigWolf .tooth10, #bigBigWolf .tooth11, #bigBigWolf .tooth12, #bigBigWolf .tooth13, #bigBigWolf .tooth14, #bigBigWolf .tooth15, #bigBigWolf .tooth16, #bigBigWolf .tooth17, #bigBigWolf .tooth18, #bigBigWolf .tooth19, #bigBigWolf .tooth20, #bigBigWolf .tooth121, #bigBigWolf .tooth122, #bigBigWolf .tooth123 {
            left: -1px;
            top: 18px;
            width: 20px;
            height: 2px;
            font-size: 0;
            background: #181818;
            z-index: 60px;
            transform: rotate(26deg);
            -webkit-transform: rotate(26deg);
            -moz-transform: rotate(26deg);
            -o-transform: rotate(26deg);
        }
        #bigBigWolf .tooth2 {
            left: 13px;
            top: 12px;
            width: 22px;
            transform: rotate(125deg);
            -webkit-transform: rotate(125deg);
            -moz-transform: rotate(122deg);
            -o-transform: rotate(125deg);
        }
        #bigBigWolf .tooth3 {
            left: 18px;
            top: 17px;
            width: 30px;
            transform: rotate(76deg);
            -webkit-transform: rotate(76deg);
            -moz-transform: rotate(76deg);
            -o-transform: rotate(76deg);
        }
        #bigBigWolf .tooth4 {
            left: 36px;
            top: 26px;
            width: 9px;
            transform: rotate(340deg);
            -webkit-transform: rotate(340deg);
            -moz-transform: rotate(340deg);
            -o-transform: rotate(340deg);
        }
        #bigBigWolf .tooth5 {
            left: 40px;
            top: 30px;
            width: 12px;
            transform: rotate(70deg);
            -webkit-transform: rotate(70deg);
            -moz-transform: rotate(70deg);
            -o-transform: rotate(70deg);
        }
        #bigBigWolf .tooth6 {
            left: 46px;
            top: 35px;
            width: 14px;
            transform: rotate(12deg);
            -webkit-transform: rotate(12deg);
            -moz-transform: rotate(12deg);
            -o-transform: rotate(12deg);
        }
        #bigBigWolf .tooth7 {
            left: 58px;
            top: 37px;
            width: 24px;
            transform: rotate(12deg);
            -webkit-transform: rotate(12deg);
            -moz-transform: rotate(12deg);
            -o-transform: rotate(12deg);
        }
        #bigBigWolf .tooth8, #bigBigWolf .tooth10 {
            left: 21px;
            top: 16px;
            width: 20px;
            height: 1px;
            background: #FFF;
            transform: rotate(76deg);
            -webkit-transform: rotate(76deg);
            -moz-transform: rotate(76deg);
            -o-transform: rotate(76deg);
        }
        #bigBigWolf .tooth9, #bigBigWolf .tooth11, #bigBigWolf .tooth12 {
            left: 14px;
            top: 15px;
            width: 20px;
            height: 1px;
            background: #FFF;
            transform: rotate(122deg);
            -webkit-transform: rotate(122deg);
            -moz-transform: rotate(122deg);
            -o-transform: rotate(122deg);
        }
        #bigBigWolf .tooth10 {
            left: 21px;
            top: 18px;
            height: 2px;
        }
        #bigBigWolf .tooth11 {
            left: 14px;
            top: 20px;
            height: 3px;
        }
        #bigBigWolf .tooth12 {
            left: 13px;
            top: 18px;
            height: 2px;
        }
        #bigBigWolf .tooth13 {
            left: 270px;
            top: 17px;
            width: 18px;
            transform: rotate(335deg);
            -webkit-transform: rotate(335deg);
            -moz-transform: rotate(335deg);
            -o-transform: rotate(335deg);
        }
        #bigBigWolf .tooth14 {
            left: 254px;
            top: 11px;
            width: 22px;
            transform: rotate(55deg);
            -webkit-transform: rotate(55deg);
            -moz-transform: rotate(55deg);
            -o-transform: rotate(55deg);
        }
        #bigBigWolf .tooth15 {
            left: 242px;
            top: 16px;
            width: 29px;
            transform: rotate(100deg);
            -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -o-transform: rotate(100deg);
        }
        #bigBigWolf .tooth16 {
            left: 243px;
            top: 25px;
            width: 13px;
            transform: rotate(20deg);
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -o-transform: rotate(20deg);
        }
        #bigBigWolf .tooth17 {
            left: 237px;
            top: 29px;
            width: 11px;
            transform: rotate(100deg);
            -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -o-transform: rotate(100deg);
        }
        #bigBigWolf .tooth18 {
            left: 219px;
            top: 36px;
            width: 24px;
            transform: rotate(165deg);
            -webkit-transform: rotate(165deg);
            -moz-transform: rotate(165deg);
            -o-transform: rotate(165deg);
        }
        #bigBigWolf .tooth19, #bigBigWolf .tooth21, #bigBigWolf .tooth23 {
            left: 255px;
            top: 15px;
            width: 22px;
            height: 1px;
            background: #FFF;
            transform: rotate(55deg);
            -webkit-transform: rotate(55deg);
            -moz-transform: rotate(55deg);
            -o-transform: rotate(55deg);
        }
        #bigBigWolf .tooth20, #bigBigWolf .tooth22 {
            left: 247px;
            top: 17px;
            width: 22px;
            height: 1px;
            background: #FFF;
            transform: rotate(100deg);
            -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -o-transform: rotate(100deg);
        }
        #bigBigWolf .tooth21 {
            left: 255px;
            top: 16px;
            height: 2px;
        }
        #bigBigWolf .tooth22 {
            left: 248px;
            top: 19px;
            height: 4px;
        }
        #bigBigWolf .tooth23 {
            left: 255px;
            top: 19px;
            height: 2px;
        }
        #bigBigWolf .beard {
            left: 190px;
            bottom: 50px;
            width: 370px;
            height: 200px;
            z-index: 80;
        }
        #bigBigWolf .beard1, #bigBigWolf .beard2, #bigBigWolf .beard3, #bigBigWolf .beard4, #bigBigWolf .beard5, #bigBigWolf .beard6, #bigBigWolf .beard7, #bigBigWolf .beard8, #bigBigWolf .beard9, #bigBigWolf .beard10, #bigBigWolf .beard11, #bigBigWolf .beard12 {
            right: -1px;
            top: 32px;
            width: 40px;
            height: 2px;
            font-size: 0;
            background: #181818;
            z-index: 0;
            transform: rotate(3deg);
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
        }
        #bigBigWolf .beard2 {
            right: 23px;
            top: 68px;
            width: 24px;
            transform: rotate(355deg);
            -webkit-transform: rotate(355deg);
            -moz-transform: rotate(355deg);
            -o-transform: rotate(355deg);
        }
        #bigBigWolf .beard3 {
            right: 34px;
            top: 90px;
            width: 22px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }
        #bigBigWolf .beard4 {
            right: 54px;
            top: 120px;
            width: 28px;
            transform: rotate(50deg);
            -webkit-transform: rotate(50deg);
            -moz-transform: rotate(50deg);
            -o-transform: rotate(50deg);
        }
        #bigBigWolf .beard5 {
            right: 89px;
            top: 132px;
            width: 22px;
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -o-transform: rotate(60deg);
        }
        #bigBigWolf .beard6 {
            right: 115px;
            top: 148px;
            width: 16px;
            transform: rotate(70deg);
            -webkit-transform: rotate(70deg);
            -moz-transform: rotate(70deg);
            -o-transform: rotate(70deg);
        }
        #bigBigWolf .beard7 {
            right: 145px;
            top: 162px;
            width: 24px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
        }
        #bigBigWolf .beard8 {
            right: 175px;
            top: 166px;
            width: 16px;
            transform: rotate(110deg);
            -webkit-transform: rotate(110deg);
            -moz-transform: rotate(110deg);
            -o-transform: rotate(110deg);
        }
        #bigBigWolf .beard9 {
            right: 210px;
            top: 173px;
            width: 22px;
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -o-transform: rotate(60deg);
        }
        #bigBigWolf .beard10 {
            right: 245px;
            top: 173px;
            width: 14px;
            transform: rotate(130deg);
            -webkit-transform: rotate(130deg);
            -moz-transform: rotate(130deg);
            -o-transform: rotate(130deg);
        }
        #bigBigWolf .beard11 {
            right: 275px;
            top: 168px;
            width: 20px;
            transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -o-transform: rotate(120deg);
        }
        #bigBigWolf .beard12 {
            right: 300px;
            top: 156px;
            width: 16px;
            transform: rotate(140deg);
            -webkit-transform: rotate(140deg);
            -moz-transform: rotate(140deg);
            -o-transform: rotate(140deg);
        }
        #bigBigWolf .scar, #bigBigWolf .scar1, #bigBigWolf .scar2, #bigBigWolf .scar3, #bigBigWolf .scar4, #bigBigWolf .scar5 {
            left: 142px;
            bottom: 154px;
            width: 120px;
            height: 2px;
            font-size: 0;
            background: #181818;
            z-index: 60px;
            transform: rotate(43deg);
            -webkit-transform: rotate(43deg);
            -moz-transform: rotate(43deg);
            -o-transform: rotate(43deg);
        }
        #bigBigWolf .scar1 {
            left: -2px;
            top: -5px;
            width: 25px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
        }
        #bigBigWolf .scar2 {
            left: 20px;
            top: 2px;
            width: 29px;
            transform: rotate(80deg);
            -webkit-transform: rotate(80deg);
            -moz-transform: rotate(80deg);
            -o-transform: rotate(80deg);
        }
        #bigBigWolf .scar3 {
            left: 50px;
            top: -2px;
            width: 29px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
        }
        #bigBigWolf .scar4 {
            left: 74px;
            top: -4px;
            width: 22px;
            transform: rotate(92deg);
            -webkit-transform: rotate(92deg);
            -moz-transform: rotate(92deg);
            -o-transform: rotate(92deg);
        }
        #bigBigWolf .scar5 {
            left: 95px;
            top: -2px;
            width: 25px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
        }
    </style>
W Y L
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 实现自适应文本的头像
maxue20161025的博客
11-11 581
当字符串较长时，字体大小可以根据头像宽度自动调整
纯CSS3实现绘制各种图形
SCU_Cindy
08-05 544
制作圆形： 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; bor...
css3图形绘制
weixin_30737363的博客
11-26 120
以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。 border：简单的来说border语法主要包含（border-width、border-style、border-color）三个属性。 „ border-top（上边框）：border-width border-...
CSS3画图相关思路
Zhouy2的博客
07-23 356
1、画半圆，可以使用border-radius属性 2、制作三角形和对话框，可以使用border属性实现 3、制作菱形和平行四边形，可以使用transform属性的rotate和skew。同样也可以用来制作五角星和六角星。 4、画心形和蛋形。可以使用transform-origin来定义原点位置，然后再使用transform属性的rotate属性值进行旋转。 border-radius: ...
CSS3绘制灰太狼动画，绝对精彩
weixin_34313182的博客
05-15 139
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
用css3制作的灰太狼
duxianwei520的专栏
05-06 370
看看欣赏欣赏
css3制作的input文本框动画特效
06-11
首先，我们来探讨CSS3在制作input文本框动画特效中的关键特性： 1. **伪类选择器**：CSS3引入了更多伪类选择器，如`:hover`, `:focus`, `:active`，它们分别对应鼠标悬停、元素获取焦点和元素被按下时的状态。在...
基于HTML的css3动画特效制作源码.zip
03-10
在“基于HTML的css3动画特效制作源码.zip”这个压缩包中，包含了多个示例项目，展示了如何使用CSS3来创建各种动态效果。 1. **CSS3关键帧动画（@keyframes）**： CSS3的关键帧动画允许开发者定义动画的过程，从...
纯CSS3制作布丁蛋糕动画特效特效代码
03-20
【纯CSS3制作布丁蛋糕动画特效特效代码】是一个利用CSS3的强大功能来创建互动式图形的示例，尤其适用于网页设计和开发。这个动画特效是通过CSS3的transform属性来实现的，它允许我们对元素进行旋转、缩放、移动和...
js+css3文字上下滚动切换动画特效
06-11
"js+css3文字上下滚动切换动画特效"就是一种实现这种效果的技术方案。它结合了JavaScript（js）的编程逻辑与CSS3的新特性，为网页的文字展示带来了生动且富有创意的变化。 首先，我们来了解JavaScript（js）的作用...
纯CSS3制作收音机动画特效特效代码
03-20
【纯CSS3制作收音机动画特效特效代码】是一个利用CSS3的强大功能来实现的创新设计，它展示了如何仅通过CSS3技术构建出一个具有复古风格的收音机动画效果。这种动画包括了播放、暂停、快退和快进等交互功能，为网页...
css3常用画图代码
10-31
css3常用画图代码 css3常用画图代码 css3常用画图代码
html5css3实现的在线画图板工具
05-14
HTML5+CSS3实现的在线画图板工具，提供给有兴趣的童鞋参考。
css3头像,CSS3基础知识 - 绘制头像
weixin_36073959的博客
08-04 256
CSS语言：CSSSCSS确定html {font-size: 10px;box-sizing: border-box;position: relative;}*,*:before,*:after {position: relative;box-sizing: inherit;}html,body {height: 100%;width: 100%;background-color: ghostw...
css各种形状怎么画,CSS3 画形状
weixin_31766871的博客
08-03 351
在制作页面时，常用CSS画各种形状带代替img，这样可以免去一次HTTP请求。而且有些基本形状用CSS实现比切图更方便和灵活。本篇就介绍一下常用形状的画法。圆形椭圆(半椭圆，4分之一椭圆)三角形平行四边形菱形梯形圆形是最常见最基本的图型，给宽高相等的div设border-radius: 50%，轻松实现：.circle {width: 5em;height: 5em;background: #fb...
CSS3画图
刘望的博客
10-27 349
&#13; 众所周知，用CSS3的圆角、转换可以画出各种不同的形状，制作不同的图案，早些前先驱者已画出经典的叮当猫，iphone手机等展示CSS3的强大实力，趁最近有空我也对CSS3进行了一些实践，颇有收获。&#13; 用border边框属性可以画出各种三角形，矩形，用border-radius可以画出何种圆形、扇形、圆弧型，利用内置阴影外置阴影可以有各种投影效果，只要你去尝...
css3绘制各种图形效果
在路上 — on the way
08-03 7140
如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。   　　如何工作？ 　　很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很容易制作出三角形，然后改
【CSS之美】原来纯CSS也能绘制人物头像
dac_bb的专栏
03-19 2190
这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘，用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。     温馨提示：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中
强！用CSS画个灰太狼
听雨轩
10-09 269
请用FireFox或非IE浏览器看，不听劝告者后果自负。   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999...
css3无限循环叠纸背景动画特效
最新发布
08-09
CSS3无限循环叠纸背景动画特效，是一种通过CSS3动画属性和层叠效果实现的独特背景效果。 具体实现该特效的步骤如下： 1. 使用HTML结构创建一个div容器作为背景容器。 2. 在CSS样式中设置该div容器的宽度和高度，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值