我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
各位小伙伴们大家好呀，今天给大家带来的是一款超可爱的爱心系列兔子头像，让我们一起来看看吧！
效果演示
实现思路
看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解。
我将实现思路分成了如下六个部分，列举如下：
- 背景设计
- 兔兔头部设计
- 兔兔耳朵设计
- 兔兔眼睛设计
- 兔兔鼻子设计
- 兔兔牙齿设计
实现爱心兔兔主要用到了
:after和:before伪元素组件。:before伪元素选择器用于在被选元素的内容前面插入内容;:after伪元素选择器用于在某个元素之后插入一些内容。
完整源码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Heart Series - Rabbit :)</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: lightcoral;
}
::-webkit-scrollbar {
display: none;
}
.container {
position: relative;
margin: 0em auto;
width: 400px;
height: 400px;
transform: scale(1.2);
transform-origin: top;
}
.container > .rabbit {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container > .rabbit > .tooth,
.container > .rabbit > .face,
.container > .rabbit > .nose,
.container > .rabbit > .earsP,
.container > .rabbit > .earsW {
position: absolute;
color: white;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translatey(190px) rotate(180deg);
}
.container > .rabbit > .tooth:before, .container > .rabbit > .tooth:after,
.container > .rabbit > .face:before,
.container > .rabbit > .face:after,
.container > .rabbit > .nose:before,
.container > .rabbit > .nose:after,
.container > .rabbit > .earsP:before,
.container > .rabbit > .earsP:after,
.container > .rabbit > .earsW:before,
.container > .rabbit > .earsW:after {
position: absolute;
content: '';
width: 60px;
height: 90px;
background: currentcolor;
border-radius: 10em 10em 0 0;
top: 50%;
left: 50%;
}
.container > .rabbit > .tooth:before,
.container > .rabbit > .face:before,
.container > .rabbit > .nose:before,
.container > .rabbit > .earsP:before,
.container > .rabbit > .earsW:before {
transform: translate(-50%, -50%) translate(-10.8px, 10.8px) rotate(-45deg);
}
.container > .rabbit > .tooth:after,
.container > .rabbit > .face:after,
.container > .rabbit > .nose:after,
.container > .rabbit > .earsP:after,
.container > .rabbit > .earsW:after {
transform: translate(-50%, -50%) translate(10.8px, 10.8px) rotate(45deg);
}
.container > .rabbit > .face {
color: #fff3f5;
width: 200px;
height: 200px;
transform: translate(-50%, -50%) translatey(100px) rotate(180deg);
}
.container > .rabbit > .face:before, .container > .rabbit > .face:after {
width: 200px;
height: 300px;
background: currentcolor;
}
.container > .rabbit > .face:before {
transform: translate(-50%, -50%) translate(-36px, 36px) rotate(-45deg);
}
.container > .rabbit > .face:after {
transform: translate(-50%, -50%) translate(36px, 36px) rotate(45deg);
}
.container > .rabbit > .nose {
color: #FFC0CB;
width: 60px;
height: 60px;
transform: translate(-50%, -50%) translatey(105px);
}
.container > .rabbit > .nose:before, .container > .rabbit > .nose:after {
width: 60px;
height: 90px;
background: currentcolor;
}
.container > .rabbit > .nose:before {
transform: translate(-50%, -50%) translate(-10.8px, 10.8px) rotate(-45deg);
}
.container > .rabbit > .nose:after {
transform: translate(-50%, -50%) translate(10.8px, 10.8px) rotate(45deg);
}
.container > .rabbit > .earsP {
color: #FFC0CB;
width: 100px;
height: 100px;
transform: translate(-50%, -50%) translatey(-75px);
}
.container > .rabbit > .earsP:before, .container > .rabbit > .earsP:after {
width: 100px;
height: 150px;
background: currentcolor;
}
.container > .rabbit > .earsP:before {
transform: translate(-50%, -50%) translate(-18px, 18px) rotate(-45deg);
}
.container > .rabbit > .earsP:after {
transform: translate(-50%, -50%) translate(18px, 18px) rotate(45deg);
}
.container > .rabbit > .earsW {
color: #fff3f5;
width: 130px;
height: 130px;
transform: translate(-50%, -50%) translatey(-85px);
}
.container > .rabbit > .earsW:before, .container > .rabbit > .earsW:after {
width: 130px;
height: 195px;
background: currentcolor;
}
.container > .rabbit > .earsW:before {
transform: translate(-50%, -50%) translate(-23.4px, 23.4px) rotate(-45deg);
}
.container > .rabbit > .earsW:after {
transform: translate(-50%, -50%) translate(23.4px, 23.4px) rotate(45deg);
}
.container > .rabbit > .eyes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 40px 0 0 white, -40px 0 0 white;
}
.container > .rabbit > .eyes:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 40px 0 0 black, -40px 0 0 black;
}
</style>
</head>
<body>
<div class="container">
<div class="rabbit">
<div class="tooth"></div>
<div class="earsW"></div>
<div class="earsP"></div>
<div class="face"></div>
<div class="nose"></div>
<div class="eyes"></div>
</div>
</div>
</body>
</html>
码上掘金
写在最后的话
本文花费大量时间介绍了做一个爱心系列兔子头像！希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！
✨
👍
⭐️
✏️
