CSS3简笔画

body {background:#f6f7a7; margin:0;padding:0;}

.cat {width:450px; height:350px; margin:0auto; position:relative;}

 

.face {width:400px; height:340px;background:#f6f7f2; position:absolute; top:0; left:25px; border-radius:50% 50%35% 35%; overflow: hidden; border:2px solid black; z-index:1;}

 

.liuhai {position:absolute; height:160px;

width:180px; background:#8D8D8D;

border-radius:0% 0% 50% 50%; overflow:hidden; top:0px; left:110px; z-index:2;

}

 

.liuhai> div:first-child {width:90px;height:160px; background:#F0AC6B;}

 

.eyes {width:300px; height:60px;overflow:hidden; position:absolute; top:200px; left:50px; z-index:2;}

 

.eye {width:100px; height:100px;background:white; border:2px solid black; position:absolute; top:0px; left:0px;border-radius:50% 50% 50% 50%; overflow:hidden; z-index:3;}

 

.eyerig {content:""; width:100px;height:100px; background:white; border:2px solid black; position:absolute;top:0px; left:196px; border-radius:50% 50% 50% 50%; overflow:hidden;z-index:3;}

 

.eyeball {width:30px; height:100px;position:absolute; background:black; top:0; left:35px; transition:width 1s,left 1s; z-index:4;}

 

.cat:hover .eyeball {width:40px;position:absolute; left:30px;}

 

.eyeballrig {width:30px; height:60px;position:absolute; background:black; top:0; left:35px; transition:width 1s,left 1s; z-index:4;}

 

.cat:hover .eyeballrig {width:40px;position:absolute; left:30px;}

 

.eyedown {width:150px; height:100px;border:2px solid black; background:white; position:absolute; top:46px;left:-25px; border-radius:50%; transition:transform 1s; z-index:5;}

 

.cat:hover .eyedown{transform:translateY(-20px);}

 

.eyedownrig {width:150px; height:100px;border:2px solid black; background:white; position:absolute; top:46px;right:-25px; border-radius:50%; transition:transform 1s; z-index:5;}

 

.cat:hover .eyedownrig{transform:translateY(-20px);}

 

.saihong {width:80px; height:30px;background:red; position:absolute; top:235px; left:60px; z-index:5;border-radius:50%; opacity:0; background-image: -webkit-radial-gradient( 50%50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8)100%); transition:opacity 0.5s ease-in 0.2s;}

 

.cat:hover .saihong {opacity:1;}

 

.saihongrig {width:80px; height:30px;background:red; position:absolute; top:235px; right:60px; z-index:5;border-radius:50%; opacity:0; background-image: -webkit-radial-gradient( 50%50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8)100%); transition:opacity 0.5s ease-in 0.2s;}

 

.cat:hover .saihongrig {opacity:1;}

 

.nose {width:30px; height:36px;position:absolute; top:260px; left:185px; z-index:4; overflow:hidden;}

 

.nose > div:first-child {width:30px;height:10px; background:black; position:absolute; top:-10px; left:0px;z-index:5; border-radius:0 0 50% 50%; border-bottom:8px solid black;}

 

.mouse {width:200px; height:36px;position:absolute; top:260px; left:100px; overflow:hidden;}

 

.mouselef {width:50px; height:40px;border-bottom:4px solid black; border-right:4px solid black; position:absolute;top:-10px; left:48px; border-radius:0% 40% 50% 20%; transition:border-radius1s, width 1s, left 1s;}

 

.cat:hover .mouselef {border-radius:50% 50%50% 50%; width:40px; left:56px;}

 

.mouserig {width:50px; height:40px;border-bottom:4px solid black; border-left:4px solid black; position:absolute;top:-10px; left:99px; border-radius:40% 0% 20% 50%; transition:border-radius1s, width 1s;}

 

.cat:hover .mouserig {border-radius:50% 50%50% 50%; width:40px;}

 

.huawen {width:380px; height:100px;overflow:hidden; position:absolute; top:190px; left:10px;}

 

.huawenlef {position:absolute; top:0;left:0px; width:100px; height:100px;}

 

.huawenlef > div:first-child{width:30px; height:10px; border-top:6px solid #e53941; border-radius:30% 80%20% 50%; position:absolute; top:5; left:20px; transform:rotate(15deg);}

 

.huawenlef > div:nth-child(2){width:18px; height:8px; background:#e53941; border-radius:50%;position:absolute; top:20; left:25px; transform:rotate(15deg);}

 

.huawenlef > div:nth-child(3){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:30% 0%90% 30%; position:absolute; top:25; left:5px; transform:rotate(15deg);}

 

.huawenlef > div:nth-child(4){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:30% 0%90% 30%; position:absolute; top:65; left:25px; transform:rotate(10deg);}

 

.huawenlef > div:nth-child(5){width:25px; height:10px; border-bottom:3px solid #e53941; border-radius:0% 0%50% 50%; position:absolute; top:75; left:45px; transform:rotate(-10deg);}

 

.huawenrig {position:absolute; top:0; right:0px;width:100px; height:100px;}

 

.huawenrig > div:first-child{width:30px; height:10px; border-top:6px solid #e53941; border-radius:80% 30%50% 20%; position:absolute; top:5; right:20px; transform:rotate(-15deg);}

 

.huawenrig > div:nth-child(2) {width:18px;height:8px; background:#e53941; border-radius:50%; position:absolute; top:20;right:25px; transform:rotate(-15deg);}

 

.huawenrig > div:nth-child(3){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:0% 30%30% 90%; position:absolute; top:25; right:5px; transform:rotate(-15deg);}

 

.huawenrig > div:nth-child(4){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:0% 30%30% 90%; position:absolute; top:65; right:25px; transform:rotate(-10deg);}

 

.huawenrig > div:nth-child(5){width:25px; height:10px; border-bottom:3px solid #e53941; border-radius:0% 0%50% 50%; position:absolute; top:75; right:45px; transform:rotate(10deg);}

 

.ear {width: 480px; height: 120px;position: absolute; top:0px; left:0px;}

 

.earlef {width:200px; height:160px;background:#f6f7f2; border:2px solid black; position:absolute; top:10px;left:30px; border-radius:4% 80% 0% 50%; transform: rotate(-15deg);transition:transform 1s;}

 

.cat:hover .earlef {transform:rotate(0deg);}

 

.earrig {width:200px; height:160px;background:#f6f7f2; border:2px solid black; position:absolute; top:10px;right:30px; border-radius:80% 4% 50% 0%; transform: rotate(15deg);transition:transform 1s;}

 

.cat:hover .earrig {transform:rotate(0deg);}

 

 

<body>

<div class="cat">

    <div class="face">

         <div class="liuhai">

               <div></div>

         </div>

       <div class="eyes">

         <div class="eye">

         <div class="eyeball"></div>

         </div>

         <div class="eyerig">

         <div class="eyeballrig"></div>

         </div>

         <div class="eyedown"></div>

         <div class="eyedownrig"></div>

     </div>

     <div class="saihong"></div>

     <div class="saihongrig"></div>

     <div class="nose"><div></div></div>

     <div class="mouse">

     <div class="mouselef"></div>

     <div class="mouserig"></div>

     </div>

          <div class="huawen">

                <divclass="huawenlef">

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                </div>          

                <divclass="huawenrig">

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                </div>

          </div>

     </div>

    <div class="ear">

         <div class="earlef"></div>

         <div class="earrig"></div>

    </div>

</div>

</body>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值