纯css画龙猫

最新推荐文章于 2024-03-27 07:17:11 发布

怡山

最新推荐文章于 2024-03-27 07:17:11 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/Waterme_lon/article/details/90597247

版权

这篇博客通过纯CSS代码展示了如何绘制一只龙猫形象，包括头部、眼睛、鼻子、嘴巴、耳朵、身体、手臂和腿部等细节，使用了旋转、渐变、圆角边框等CSS特性，还添加了动画效果，让龙猫更加生动有趣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码部分：

Document

<div id="baymax">
<!-- 定义头部 眼睛嘴巴 -->

<div id="head">
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div4"></div>
	<div id="div5"></div>
	<div id="eye"></div>
	<div id="eye2"></div>
	<div id="eye3"></div>
	<div id="eye4"></div>
	<div id="eye5"></div>
	<div id="eye6"></div>
	<div id="eye7"></div>
	<div id="eye8"></div>

	<div id="mouth"></div>
	<div id="mouth1"></div>
	<div id="mouth2"></div>
	<div id="mouth3"></div>
	<div id="mouth4"></div>
	<div id="mouth5"></div>
	<div id="mouth6"></div>
	<div id="mouth7"></div>
	<div id="mouth8"></div>

	<div id="mao1"></div>
	<div id="mao2"></div>
	<div id="mao3"></div>
	<div id="mao4"></div>
	<div id="mao5"></div>
	<div id="mao6"></div>
	<div id="nose"></div>

</div>
<!-- 定义躯干、包括心脏 -->
<div id="torso">
	<!-- <div id="heart"></div> -->
	<!-- <div id="belly">
	<div id="cover"></div> -->
</div>
<div id="cover">
	<div id="belly"></div>
</div>
<!-- 定义肚子腹部，包括cover（和躯干链接处） -->

<!-- 定义左臂，包括一大一小手指 -->
<div id="left-arm">
	<div id="l-bigfinger"></div>
	<div id="l-bigfinger1"></div>
	<div id="l-bigfinger2"></div>
	<div id="l-smallfinger"></div>
	
</div>
<!-- 右臂 -->
<div id="right-arm">
	<div id="r-bigfinger"></div>
	<div id="r-bigfinger1"></div>
	<div id="r-bigfinger2"></div>
	<div id="r-smallfinger"></div>
	
</div>

<!-- 定义左腿 -->
<div id="left-leg"></div>
<!-- 定义右腿 -->
<div id="right-leg"></div>
<!-- 风车 -->

	<div class="fengche"></div>
<div id="gun9">

</div>

<div id="shadow"></div>


</div>

css部分：
*{
margin: 0;
padding: 0
}
body{
background:url(…/c.jpg);
perspective: 500px;
}

#baymax{
margin-left: 300px;
margin-top: 100px;
width: 800px;
height: 600px;
overflow: hidden;
/background-color: pink;/
position: relative;
transition: all 4s;

}
/#baymax:hover{
transform: rotateY(360deg);
}/
#head{
height:140px;
width: 170px;
border-radius:46%;
background-color: #737662;
margin: 100px auto;
margin-bottom: -20px;
/border-bottom: 5px solid #e0e0e0;/
z-index: 95;
position: relative;
animation: head1 3s ease infinite;
}

/*@-webkit-keyframes head {     /* Safari and Chrome 
     transform: rotate(0deg);
    }
    10%{
        transform: rotate(30deg);
    }
}*/

#div1,#div2{
width: 0;
height: 0;
border-bottom: 73px solid #737661;
border-left: 13px solid transparent;
border-right: 20px solid transparent;
position: absolute;
top: -78px;
left: 29px;
transform: rotate(-6deg);
border-radius: 12px;
}
#div2{
/使该元素对称/
transform: rotate(17deg);
left: 125px;
top: -76px;
}

#div4,#div5{
width: 0;
height: 0;
border-bottom: 45px solid #737661;
border-left: 7px solid transparent;
border-right: 16px solid transparent;
position: absolute;
top: -38px;
left: 39px;
transform: rotate(-6deg);
border-radius: 3px;
}
#div5{
/使该元素对称/
transform: rotate(17deg);
left: 122px;
top: -33px;
}

#eye7,#eye8{
width: 3px;
height: 3px;
background-color: #fff;
border-radius: 50%;
position: relative;
top: -45px;
left: 41px;
/旋转该元素/
transform: rotate(8deg);

}
#eye8{
/使该元素对称/
transform: rotate(-8deg);
left: 115px;
top: -47px;
}
#eye3,#eye4{
width: 15px;
height: 15px;
background-color: #000;
border-radius: 50%;
position: relative;
top: -20px;
left: 34px;
/旋转该元素/
transform: rotate(8deg);

}
#eye4{
/使该元素对称/
transform: rotate(-8deg);
left: 113px;
top: -34px;
}
#eye,#eye2{
width: 30px;
height: 30px;
background-color: #d3ddde;
border-radius: 46%;
position: relative;
top: 33px;
left: 25px;
/旋转该元素/
transform: rotate(8deg);
-webkit-animation: eye 1.5s ease infinite;
-moz-animation: eye 1.5s ease infinite;
-o-animation: eye 1.5s ease infinite;
animation: eye 1.5s ease infinite;

}
#eye2{
/使该元素对称/

transform: rotate(-8deg);
left: 108px;
top: 4px;
  /*动画时间*/

}
@keyframes eye {
0%,20%,100%{
-webkit-transform:scale(1,1);/background:red;/ /* Safari 和 Chrome /
-moz-transform:scale(1,1); / Firefox /
-o-transform:scale(1,1); / Opera /
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2); /background:blue;/
-moz-transform:scale(1,0.2);
-o-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
@-webkit-keyframes eye { / Safari and Chrome */
0%,20%, 100%{
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
-moz-transform:scale(1,0.2);
-o-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}

#mouth,#mouth1,#mouth2{
width: 148px;
height: 1.5px;
background: #282828;
position: absolute;
left: 11px;
top: 96px;

}
#mouth1{
width: 76px;
height: 1.5px;
left:11px;
top: 109px;
transform: rotate(18deg);

}
#mouth2{
width: 80px;
height: 1.5px;
left: 83px;
top: 108px;
transform: rotate(-18deg);

}
#mouth3{
width: 0;
height: 0;
border-top: 24px solid #ffffff;
border-left: 74px solid transparent;
border-right: 74px solid transparent;

     position: absolute;

     left: 11px;
     top: 97px;
 }

#mouth4,#mouth5{
width: 7px;
height: 1.5px;
background: #aca4a2;
position: absolute;
left: 30px;
top: 100px;
transform: rotate(90deg);
}
#mouth5{
left: 137px;
top: 99px;
transform: rotate(90deg);
}
#mouth6,#mouth7{
width: 15px;
height: 2px;
background: #aca4a2;
position: absolute;
left: 50px;
top: 104px;
transform: rotate(90deg);
}

#mouth7{
left: 106px;
top: 104px;
transform: rotate(90deg);
}
#mouth8{
width: 24px;
height: 1.5px;
background: #aca4a2;
position: absolute;
left: 73px;
top: 108px;
transform: rotate(90deg);
}
#mao1,#mao4{
width: 50px;
height: 1.5px;
background: #151a14;
position: absolute;
left: 151px;
top: 58px;
border-radius: 10px;
transform: rotate(-10deg);

}
#mao4{
left: -30px;
top: 61px;
transform: rotate(194deg);
}
#mao2,#mao5{
width: 70px;
height: 1.5px;
background: #151a14;
position: absolute;
left: 155px;
top: 66px;
border-radius: 10px;
transform: rotate(-5deg);

}
#mao5{
left: -55px;
top: 71px;
transform: rotate(184deg);
}
#mao3,#mao6{
width: 55px;
height: 1.5px;
background: #151a14;
position: absolute;
left: 151px;
top: 76px;
border-radius: 10px;
transform: rotate(2deg);

}
#mao6{
left: -38px;
top: 82px;
transform: rotate(175deg);
}
#nose{
width: 40px;
height: 21px;
background:url(…/long.png);
position: absolute;
left: 62px;
top: 45px;
}

#torso{
margin: 0 auto;
height: 300px;
width: 307px;
background: #757669;
border-radius: 45%;
border: 5px soild #e0e0e0;
border-top: none;
position: absolute;
top: 219px;
left: 253px;
z-index: 90;
}
#belly{

width: 200px;
height: 67px;
position: absolute;
margin-top: 33px;
left: 25px;
background:url(../long3.png);


z-index: 100;

}
#cover{
width: 248px;
background: #e2dca0;
height: 245px;
margin: 0 auto;
/border: 5px soild #e0e0e0;/
border-top: 5px soild #e0e0e0;
position: absolute;
top: 243px;
left: 282px;
border-radius: 42%;
z-index: 190;
}
/*#heart{
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
box-shadow: 2px 5px 2px #ccc inset;
right: -115px;
top: 40px;
z-index: 11;
border: 1px solid #ccc;

}*/
#left-arm, #right-arm {
height: 220px;
width: 73px;
border-radius: 50%;
background: #757668;
border: 1px solid #000;
border-top: none;
margin: 0 auto;
position: absolute;
top: 142px;
left: 220px;
transform: rotate(80deg);
z-index: 80;

}

/@keyframes l-a {
0%{
transform: rotate(-96deg);
}
50%{
transform: rotate(-110deg);
}
100%{
transform: rotate(-130deg);
}
}/
#right-arm{

/*animation: l-a 1.5s linear infinite alternate;*/
transform: rotate(-96deg);
left: 516px;
top: 111px;

}
#l-bigfinger,#r-bigfinger,#l-bigfinger1,#r-bigfinger1,#l-bigfinger2,#r-bigfinger2{
height: 25px;
width: 5px;
border-radius: 50%;
background: #abae99;
position: absolute;
top: 215px;
left: 50px;
transform: rotate(-36deg);

}
#r-bigfinger{
left: 23px;
transform: rotate(30deg);

}
#r-bigfinger1{
left: 43px;
transform: rotate(6deg);

}
#r-bigfinger2{
left: 35px;
transform: rotate(6deg);

}
#l-bigfinger1{
left: 37px;
transform: rotate(-10deg);
}
#l-bigfinger2{
left: 26px;
transform: rotate(5deg);
}

#left-leg,#right-leg{

height: 60px;
width: 84px;
border-radius: 40% 30% 30px 45%;
background: #757668;
position: relative;
top: 260px;
left: -47px;
transform: rotate(-1deg);
z-index: 100;
margin: 0 auto;
}
#right-leg{
background: #757668;
border-radius: 30% 40% 45% 35px;
position: relative;
top: 200px;
left: 56px;
transform: rotate(1deg);
margin: 0 auto;
}
.fengche{
width: 100px;
height: 100px;
background: url(…/fengche.png);
position: absolute;
top: 107px;
left: 5px;
z-index: 200;
animation: rotate linear 2s infinite;
transition: all 0.6s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#gun9{
width: 3px;
height: 150px;
background: #aca4a2;
position: absolute;
left: 112px;
top: 151px;
transform: rotate(-37deg);
z-index: 199;
}

#shadow {
height: 50px;
width: 150px;
border-radius: 50% 50% 50% 50%;
position: relative;
top: 300px;
left: 0px;
/transform: rotate(-1deg);/
/z-index: -10;/
margin: 0 auto;
background: linear-gradient(#fff,gray);
/background-color: #000;/

    -webkit-animation: shadow 4s ease infinite alternate;
}

@keyframes shadow {
    0% {transform:scale(1);}
    /*20% {transform:scale(1);}*/
    50% {transform:scale(0.5);}
    100% {transform:scale(1);}
}

/*#baymax .f{
width: 100px;
height: 200px;
position: absolute;
top: 73;
left: 26;
transform: rotate(-37deg);
z-index: 201;
}

在这里插入图片描述