「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。
哇呜，今天是情人节耶(虽然和我没啥关系🙃)
每年的2月14日是西方国家传统的情人节，这是一个关于爱情的节日，首先祝大家梦到梦寐以求的人，见到日思夜想的人，约到心中所爱的人，追到长相厮守的人，抱到心仪相爱的人，找到情人节献吻的人。
今天是用纯css绘制的一个简笔画男孩像简笔画女孩发送爱心的这么一个页面
那么首先呢我们先把 class="main"的div居中在页面上，并设置position: relative; 方便我们对男孩、爱心、女孩的一个定位
画男孩，这里用到的几乎都是笔直的直线拼接起来的（手啊 脚啊），眼睛直接用的是 >< 大于小于号，调整了一下 font-size: 25px; font-weight: bold; 看起来更合适，头的话是直接旋转了-20度
transform: rotate(-20deg);，让它看上去更像是面朝这右边效果
头（head）里面设置了一个超出隐藏 overflow: hidden;，这样就把右边超出脸的腮红隐藏起来了，腮红部分就是一个椭圆 border-radius: 50% / 50%;
<div class="boy">
<div class="head">
<div class="left_eye">></div>
<div class="right_eye"><</div>
<div class="left_blusher"></div>
<div class="right_blusher"></div>
<div class="mouth"><div class="circle"></div></div>
</div>
<div class="body"></div>
<div class="hand1"></div>
<div class="hand2"></div>
<div class="left_hand"></div>
<div class="right_hand"></div>
<div class="left_foot"></div>
<div class="right_foot1"></div>
<div class="right_foot2"></div>
</div>
女孩也是一样的，绘制的方法都差不多，但是调整了一下嘴巴的弧度，这个弧度其实是椭圆的边框，然后隐藏是上半截部分😄😄😄
<div class="girl">
<div class="head">
<div class="left_eye">></div>
<div class="right_eye"><</div>
<div class="left_blusher"></div>
<div class="right_blusher"></div>
<div class="mouth"><div class="circle"></div></div>
</div>
</div>
<div class="body1"></div>
<div class="body2"></div>
<div class="girl_left_hand">></div>
<div class="girl_right_hand"><</div>
然后就是这个爱心了 其实这个爱心画的也特别简单，它其实是两个div通过改变样式和旋转 然后再将一部分重叠在一起后形成的😛😛😛
是不是很简单
<div class="love">
<div class="one"></div>
<div class="two"></div>
</div>
.love{
position: absolute;
top: 0px;
left: 150px;
width: 80px;
display: flex;
/* background-color: aqua; */
justify-content: center;
align-items: center;
margin: 100px auto;
}
.one, .two{
width: 30px;
height: 50px;
background: #9D0011;
border-radius: 45px 45px 0px 0px;
transform: rotate(-45deg);
}
.two{
margin-left: -15px;
transform: rotate(45deg);
}
简笔画男生和女生的css代码，上面有简单的分析过
<style>
.main{
width: 600px;
height: 300px;
margin: 100px auto;
background-color: white;
position: relative;
}
.boy, .girl{
position: relative;
}
.boy .head, .girl .head{
width: 100px;
height: 100px;
border-radius: 100% 100% 85% 92% / 100% 97% 90% 98% ;
border: 3px solid black;
position: relative;
transform: rotate(-20deg);
overflow: hidden;
}
.girl .head{
width: 90px;
height: 90px;
left: 320px;
top: -100px;
transform: rotate(0deg);
}
.boy .head .left_eye, .boy .head .right_eye{
position: absolute;
top: 25px;
left: 25px;
font-size: 25px;
font-weight: bold;
}
.boy .head .right_eye{
left: 75px;
}
.girl .head .left_eye, .girl .head .right_eye{
position: absolute;
top: 20px;
left: 15px;
font-size: 25px;
font-weight: bold;
}
.girl .head .right_eye{
left: 60px;
}
.boy .left_blusher, .boy .right_blusher,
.girl .left_blusher, .girl .right_blusher{
width: 20px ;
height: 15px;
background-color: pink;
border-radius: 50% / 50%;
position: absolute;
top: 60px;
left: 10px;
}
.boy .right_blusher{
top: 60px;
left: 85px;
}
.girl .left_blusher{
top: 50px;
left: 5px;
}
.girl .right_blusher{
top: 50px;
left: 68px;
}
.boy .mouth, .girl .mouth{
position: absolute;
top: 60px;
left: 56px;
width: 15px;
height: 20px;
overflow: hidden;
}
.girl .mouth{
left: 40px;
top: 56px;
}
.boy .mouth .circle, .girl .mouth .circle{
margin-top: -12px;
width: 10px;
height: 20px;
border-radius: 50% / 50%;
border: 2px solid black;
}
.girl .mouth .circle{
margin-top: -10px;
width: 7px;
margin-left: 2px;
}
.body, .left_foot{
width: 2.5px;
height: 60px;
background-color: black;
position: absolute;
left: 60px;
}
.hand1, .hand2{
width: 50px;
height: 2.5px;
background-color: black;
position: absolute;
top: 120px;
left: 62px;
}
.hand2{
top: 136px;
}
.left_hand, .right_hand{
width: 2.5px;
height: 20px;
background-color: black;
position: absolute;
top: 102px;
left: 110px;
}
.right_hand{
top: 136px;
}
.left_foot{
height: 50px;
top: 155px;
left: 42px;
transform: rotate(50deg);
}
.right_foot1{
width: 30px;
height: 2.5px;
background-color: black;
position: absolute;
top: 166px;
left: 60px;
transform: rotate(15deg);
}
.right_foot2{
width: 2.5px;
height: 26px;
background-color: black;
position: absolute;
top: 170px;
left: 88px;
}
.body1, .body2{
position: absolute;
top: 140px;
left: 280px;
width: 100px;
height: 2.5px;
background-color: black;
transform: rotate(-55deg);
}
.body2{
left: 360px;
transform: rotate(55deg);
}
.girl_left_hand, .girl_right_hand{
position: absolute;
top: 140px;
left: 330px;
font-size: 30px;
transform: rotate(12deg);
}
.girl_right_hand{
left: 380px;
transform: rotate(-12deg);
}
</style>
以上就是全部代码了和分析了，很简单🙆🏻♀️
