请选择 进入手机版 | 继续访问电脑版

纯css画猫猫

发表于 09-23 00:02 显示全部楼层 17 269

心血来潮,用css画了一个猫猫,有兴趣的朋友可以参考画着玩~~~


效果如图:


猫猫.gif


这是源码哒:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css画猫猫</title>
<style>
*{padding: 0; margin: 0; border: 0; list-style: none;}

.box{width: 1000px; height: 600px; border:2px dashed #fff; margin:100px auto;}

/* 轮廓 */
.cat{width: 400px; height:320px; border:10px solid #020202; margin:130px auto; border-radius:200px 200px 50% 50%; background:#efe5d9; position:relative;}

/* 耳朵 */
.ear_l{width:140px; height:140px; background:#efe5d9; border-left:10px solid #020202;  border-top:10px solid #020202; border-radius:40px 50% 50% 50%; position:absolute; left:-30px; top:-30px; z-index:-1; transform:rotate(10deg);}
.ear_r{width:140px; height:140px; background:#efe5d9; border-right:10px solid #020202;  border-top:10px solid #020202; border-radius:50% 40px 50%  50%; position:absolute; right:-30px; top:-30px; z-index:-1; transform:rotate(-10deg);}
.ear_l_in{ transform:scale(0.7); left:2px; top:2px; background:linear-gradient(120deg,#ea8a6a,#f4a084); border: 0;}
.ear_r_in{ transform:scale(0.7); right:2px; top:2px; background:linear-gradient(-120deg,#ea8a6a,#f4a084); border: 0;}

 /* 花纹 */
.wang{width:200px; height:100px; position:absolute; left: 50%; margin-left: -100px; top:2px;}
.wang div{background:#998881; width:30px; float:left; border-radius:50%;}
.wang_l{ height:80px; margin-left:32px;}
.wang_m{ height:100px; margin:0 20px;}
.wang_r{ height:80px;}


/* 眼睛 */
.eye_l{ position:absolute; left:60px;}
.eye_r{ position:absolute; right:60px;}
.eye{width: 100px; height:100px; top:100px; background:linear-gradient(120deg,#f0b334,#fbff80); border-radius:50%; transition:1s;}
.eye_l_t,.eye_l_d{width: 100%; height:100%; box-sizing:border-box; border-radius:50%;}
.eye_l_t{border-top:6px solid #000;}
.eye_l_d{border-bottom:6px solid #000; overflow: hidden;}
.eye_in{width: 50px; height:50px; background:#000; margin:20px auto; border-radius:50%; position:relative; transition:1s;}
.eye_white{width:30px; height:30px; background:#fff; border-radius:50%; position:absolute; right:-5px; top:2px;}
.eye_white_small{width:20px; height:10px; background:#fff; border-radius:50%; transform:rotate(-20deg); position:absolute; left:-5px; top: 0;}
.eye_white_small.shang {top:26px;}
.eye_white_small.xia {top:40px; transform:scale(0.8) rotate(-20deg); left: 0;}

/* 鼻子 */
.nose{width: 40px; height:30px; position:absolute; left:50%; margin-left: -20px; bottom:100px; border-radius:50%; border-bottom:26px solid #000; transition:1s;}
.mouth{width:60px; height:50px; position:absolute; left: 50%; margin-left: -30px; bottom:36px;}
.mouth_l,.mouth_r{width:100%; height:50px; border-bottom:8px solid #000; border-radius:50%; position:absolute; top:-36px; transition:1s;}
.mouth_l{left: -30px; transform-origin:right center;}
.mouth_r{right: -30px; transform-origin:left center}

/* 胡子 */
.must{width: 200px; height:100px; position:absolute; top: 180px; transition:1s;}
.one,.two,.three{border-radius:50%; position:absolute;}
.one{width:160px; height:60px; border-top:2px solid #9d8c85; transform:rotate(-10deg); top: 10px;}
.two{width: 200px; height:80px; border-top:2px solid #9d8c85; transform:rotate(8deg); top: 40px;}
.three{width:140px; height:70px; border-top:2px solid #9d8c85; transform:rotate(30deg); top: 70px;}
.must_l{left: -80px; transform:rotateY(180deg) rotateZ(0deg);}
.must_r{right: -80px;}

/* 腮红 */
.face{width:100px; height:50px; background:pink; opacity:0; filter:blur(10px); border-radius:50%; position:absolute; top:190px; transition:1s;}
.face_l{left: 50px;}
.face_r{right: 50px;}

/* 动效 */
.cat:hover .eye{height:86px;}
.cat:hover .eye_in{margin-top: 10px;}
.cat:hover .face{ opacity:0.8;}
.cat:hover .nose{bottom:104px;}
.cat:hover .mouth_l{transform:rotate(20deg);}
.cat:hover .mouth_r{transform:rotate(-20deg);}
.cat:hover .must_l{transform:rotateY(180deg) rotateZ(10deg);}
.cat:hover .must_r{transform:rotateZ(10deg);}


</style>
</head>

<body>



<div class="box">

<div class="cat">
    <div class="ear_l">
        <div class="ear_l ear_l_in"></div>
        </div>
    <div class="ear_r">
        <div class="ear_r ear_r_in"></div>
        </div>
        <div class="wang">
        <div class="wang_l"></div>
        <div class="wang_m"></div>
        <div class="wang_r"></div>
        </div>
        <div class="eye eye_l">
        <div class="eye_l_t">
            <div class="eye_l_d">
                <div class="eye_in">
                    <div class="eye_white"></div>
                        <div class="eye_white_small shang"></div>
                        <div class="eye_white_small xia"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="eye eye_r">
        <div class="eye_l_t">
            <div class="eye_l_d">
                <div class="eye_in">
                    <div class="eye_white"></div>
                        <div class="eye_white_small shang"></div>
                        <div class="eye_white_small xia"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nose"></div>
        <div class="mouth">
        <div class="mouth_l"></div>
            <div class="mouth_r"></div>
        </div>
        <div class="must must_r">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        </div>
        <div class="must must_l">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        </div>
        <div class="face face_l"></div>
        <div class="face face_r"></div>
    </div>
</div>

</body>
</html>


回复 使用道具
举报
TigerCY

发表于 10-11 21:49 显示全部楼层

作为新人,在吧里不敢大声说话,也不敢得罪人,只能默默地顶完贴转身就走,不求深藏功与名,只求前排混脸熟

回复 支持 反对 使用道具
举报
小明不易做

发表于 10-07 15:28 显示全部楼层

666

回复 支持 反对 使用道具
举报
shaohua

发表于 09-26 22:06 显示全部楼层

回复 支持 反对 使用道具
举报
赵延明老师

发表于 09-26 18:10 显示全部楼层

回复 支持 反对 使用道具
举报
艇仔饭

发表于 09-26 17:43 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
大树学长

发表于 09-25 12:01 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
卷毛维安

发表于 09-25 09:23 显示全部楼层

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 09-24 06:21 显示全部楼层

回复 支持 反对 使用道具
举报
一路奇奇

发表于 09-23 13:17 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1599

学币

1759

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1759
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育