CSS3萌宠系列，纯CSS3诞生的可爱狗狗
CSS3萌宠系列，纯CSS3诞生的可爱狗狗
好可爱一只小狗狗！睡觉憨憨的样子，听到细微的声音，立马竖起他的耳朵，看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢？
可爱的你值得拥有！
上图是用什么软件制作的呢？用纯CSS+HTML你信吗？
不信的，让我们拭目以待吧！
看图解构
看上图，狗狗有圆圆头，2只小小的眼睛和2只长长的耳朵，鼻子，嘴巴，4只脚，身体、尾巴组成。
细节： 1、地上有阴影，狗狗抬头时阴影会缩小
2、狗狗是趴着在，所有只能看到3只脚
3、狗狗睡觉时，呼吸会让身体上下起伏
4、狗狗抬头时，耳朵会上扬
有了结构思路，我们可以先来画出大致的样子
狗狗身体结构
<div class="main">
<div class="dog">
<!-- 头 -->
<div class="dog__head">
<!-- 嘴巴部分 -->
<div class="dog__snout">
<!-- 鼻梁 -->
<div class="dog__nose"></div>
<!-- 眼睛 -->
<div class="dog__eyes">
<div class="dog__eye-l"></div>
<div class="dog__eye-r"></div>
</div>
</div>
</div>
<!-- 耳朵 -->
<div class="dog__head-c">
<div class="dog__ear-l"></div>
<div class="dog__ear-r"></div>
</div>
<!-- 身体 -->
<div class="dog__body">
<!-- 尾巴 -->
<div class="dog__tail"></div>
</div>
<!-- 三只角 -->
<div class="dog__paws">
<div class="dog__bl-leg leg">
<div class="dog__bl-paw paw"></div>
<div class="dog__bl-top top"></div>
</div>
<div class="dog__fl-leg leg">
<div class="dog__fl-paw paw"></div>
<div class="dog__fl-top top"></div>
</div>
<div class="dog__fr-leg leg">
<div class="dog__fr-paw paw"></div>
<div class="dog__fr-top top"></div>
</div>
</div>
</div>
</div>这里就是狗狗身体结构（html部分）。下面用CSS修饰，使狗狗各部位正常。
CSS修饰狗狗部分身体结构
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #FDFBFD;
}
.main {
position: relative;
width: 37.5vmax;
height: 37.5vmax;
display: flex;
justify-content: center;
align-items: center;
}
.dog {
position: relative;
width: 22.5vmax;
height: 8.25vmax;
}
.dog__head {
position: absolute;
left: 1.5vmax;
bottom: 0;
width: 9.75vmax;
height: 8.25vmax;
background-color: #FF8147;
}
.dog__head-c {
position: absolute;
left: 1.5vmax;
bottom: 0;
width: 9.75vmax;
height: 8.25vmax;
z-index: -1;
}
.dog__eye-l {
left: 27%;
}
.dog__eye-r {
left: 65%;
}
.dog__ear-l, .dog__ear-r {
position: absolute;
width: 10.5vmax;
height: 3.375vmax;
background-color: #E26538;
}
.dog__ear-l {
top: 1.5vmax;
left: 6vmax;
transform-origin: bottom left;
transform: rotateZ(-50deg);
z-index: -1;
}
.dog__ear-r {
top: 1.5vmax;
right: 3vmax;
transform-origin: bottom right;
transform: rotateZ(20deg);
z-index: -2;
}
.dog__body {
display: flex;
justify-content: center;
align-items: flex-end;
position: absolute;
bottom: 0.3vmax;
left: 3.75vmax;
width: 18.75vmax;
height: 7.2vmax;
background-color: #ff702e;
z-index: -2;
}
CSS3萌宠系列，纯CSS3诞生的可爱狗狗
然后我们通过border-radius，圆角，改变元素的形成。使其更接近真实的狗狗身体结构形状。
如耳朵
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录