Pure CSS3 to achieve pet chicken example code
|
I have read a lot of knowledge and articles about CSS3 recently, and I think CSS3 is very convenient to use. If you use CSS3, you can save a lot of unnecessary codes in page layout. So I recently used CSS3 to imitate the appearance of the pet chicken that I take care of every day. It was my first time writing it, so some details were not handled well enough. First look at the final effect picture:
Here are the steps I wrote: First, write out the clouds, the chicken's body, comb, eyes, mouth, blush, wings, and chicken feet in HTML.
<body>
<div class="content">
<!-- Clouds in the sky-->
<div class="cloud">
<div class="content"></div>
</div>
<!--Rooster comb-->
<div class="crest"></div>
<!--Wings-->
<div class="hand"></div>
<!-- Pet Chicken body -->
<div class="egg">
<!--Eyes-->
<div class="eye"></div>
<!--Blush-->
<div class="blush"></div>
<!--Mouth-->
<div class="mouth"></div>
<!--Feet-->
<div class="feet"></div>
</div>
</div>
</body>Next is the CSS style setting: First, set the overall background color using linear-gradient, set the blue sky color and grass color, and set the element to be centered.
.content {
width: 100%;
height: 800px;
background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
display: flex;
justify-content: center;
align-items: center;
}Clouds in the sky: first give a certain width, height and background color, use border-radius to set the border rounding effect, and only set the upper left and upper right corners. The effect is as follows: border-radius: 100% 100% 0 0;
Draw a complete cloud using the ::before and ::after pseudo-elements:
.content::before,
.content::after {
content: '';
position: absolute;
bottom: 0;
}
.content::before {
width: 40px;
height: 40px;
background: currentColor;
left: -20px;
border-radius: 100% 100% 0 100%;
}
.content::after {
width: 35px;
height: 30px;
background: currentColor;
right: -20px;
border-radius: 100% 100% 100% 0;
}Then use shadow to draw two clouds.
.content,
.content::before,
.content::after {
box-shadow:
-200px 50px 0 -5px rgb(191, 232, 252),
200px 60px 0 10px rgb(191, 233, 253);
}
The clouds materialized. Next is the pet chicken. First, draw the body. Use border-radius to set the border radius effect. Draw the shape of an egg, set the background color, and use box-shadow to set the inward shadow.
.egg {
width: 220px;
height: 260px;
border-radius: 100%;
background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;
}
The writing styles of cockscomb and cloud are similar.
.crest {
position: relative;
top: -17%;
width: 30px;
height: 25px;
background: rgb(233, 19, 19);
border-radius: 50% 100% 20% 20%;
}
.crest::before,
.crest::after {
content: '';
position: absolute;
bottom: 0;
width: 20px;
background: rgb(233, 19, 19);
}
.crest::before {
left: -5px;
height: 20px;
border-radius: 100% 50% 0 20%;
}
.crest::after {
right: -15px;
height: 15px;
background: rgb(233, 19, 19);
border-radius: 20% 200% 20% 30%;
}Eyes, wings, and blush can be achieved by using pseudo-elements to position them left and right and set their sizes. Use transform to rotate the mouth 45° and use a linear gradient to set the shadow effect of the chicken beak. All the CSS codes are as follows (I installed the SASS plug-in, so it is written in SCSS):
body {
margin: 0;
width: 100%;
height: 100%;
>.content {
width: 100%;
height: 800px;
background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
display: flex;
justify-content: center;
align-items: center;
>.cloud {
position: absolute;
top: 5%;
color: rgb(216, 242, 254);
>.content {
width: 50px;
height: 50px;
background: currentColor;
border-radius: 100% 100% 0 0;
}
>.content::before,
>.content::after {
content: '';
position: absolute;
bottom: 0;
}
>.content::before {
width: 40px;
height: 40px;
background: currentColor;
left: -20px;
border-radius: 100% 100% 0 100%;
}
>.content::after {
width: 35px;
height: 30px;
background: currentColor;
right: -20px;
border-radius: 100% 100% 100% 0;
}
>.content,
.content::before,
.content::after {
box-shadow: -200px 50px 0 -5px rgb(191, 232, 252),
200px 60px 0 10px rgb(191, 233, 253);
}
}
>.egg {
width: 220px;
height: 260px;
border-radius: 100%;
background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;
>.eye::before,
.eye::after {
content: '';
position: absolute;
top: 15%;
width: 12px;
height: 28px;
border-radius: 100%;
background: radial-gradient(white 1px, rgb(57, 56, 57) 5%);
}
> .eye::before{
left: 28%;
}
>.eye::after {
right: 28%;
}
>.blush::before,
.blush::after {
content: '';
position: absolute;
top: 30%;
width: 25px;
height: 5px;
transform: rotate(0deg);
background: rgb(250, 108, 127);
border-radius: 100%;
box-shadow: 0 0 5px 4px rgb(250, 108, 127);
}
>.blush::before {
left: 20%;
}
>.blush::after {
right: 20%;
}
>.mouth {
position: absolute;
top: 32%;
width: 20px;
height: 20px;
background:
linear-gradient(135deg, rgb(255, 207, 0) 50%,
rgb(224, 184, 2) 50%);
transform: rotate(45deg);
border-radius: 5% 15%;
}
> .feet::before,
.feet::after{
content: '';
position: absolute;
bottom: -12px;
width: 10px;
height: 15px;
border: 7px solid rgb(71, 49, 20);
}
> .feet::before{
left: 60px;
border-radius: 80% 100% 100% 50%;
transform: rotate(-10deg);
border-color: transparent transparent transparent rgb(71, 49, 20);
}
> .feet::after{
right: 60px;
border-radius: 100% 80% 50% 0%;
transform: rotate(10deg);
border-color: transparent rgb(71, 49, 20) transparent transparent ;
}
}
>.crest {
position: relative;
top: -17%;
width: 30px;
height: 25px;
background: rgb(233, 19, 19);
border-radius: 50% 100% 20% 20%;
}
>.crest::before,
.crest::after {
content: '';
position: absolute;
bottom: 0;
width: 20px;
background: rgb(233, 19, 19);
}
>.crest::before {
left: -5px;
height: 20px;
border-radius: 100% 50% 0 20%;
}
>.crest::after {
right: -15px;
height: 15px;
background: rgb(233, 19, 19);
border-radius: 20% 200% 20% 30%;
}
> .hand{
position: relative;
top: -5%;
}
> .hand::before,
.hand::after{
content: '';
position: absolute;
}
> .hand::before{
left:-135px;
width: 20px;
height: 80px;
transform: rotate(15deg);
background: rgb(250, 242, 242);
border-radius: 100% 0 50% 50%;
}
> .hand::after{
right: -110px;
width: 20px;
height: 80px;
transform: rotate(-15deg);
background: rgb(250,242,242);
border-radius: 50% 100% 50% 50%;
}
}
}Summarize The above is the pure CSS3 pet chicken example code introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: How to build a virtual machine with vagrant+virtualBox
>>: Three methods of automatically completing commands in MySQL database
Recommend
Detailed explanation of the interaction between React Native and IOS
Table of contents Prerequisites RN passes value t...
Install nvidia graphics driver under Ubuntu (simple installation method)
Install the nvidia graphics card driver under Ubu...
Detailed explanation of Vue3 encapsulation Message message prompt instance function
Table of contents Vue3 encapsulation message prom...
Pure CSS to hide the scroll bar but still have the scrolling effect (mobile and PC)
Mobile Mobile pages only need to be compatible wi...
Vue storage contains a solution for Boolean values
Vue stores storage with Boolean values I encounte...
Abbreviation of HTML DOCTYPE
If your DOCTYPE is as follows: Copy code The code ...
Vue realizes cascading selection of provinces, cities and districts
Recently, I need to implement a cascading selecti...
A brief analysis of understanding Vue components from an object-oriented perspective
When the same function and HTML code are used mul...
Detailed explanation of the deployment process of Docker Alibaba Cloud RocketMQ 4.5.1
Search Mirror docker search rocketmq View image v...
How to dynamically add a volume to a running Docker container
Someone asked me before whether it is possible to...
Tutorial analysis of quick installation of mysql5.7 based on centos7
one. wget https://dev.mysql.com/get/mysql57-commu...
Detailed explanation of MySQL startup options and system variables examples
Table of contents Boot Options Command Line Long ...
A Brief Analysis of CSS Selector Grouping
Selector Grouping Suppose you want both the h2 el...
jQuery realizes the full function of shopping cart
This article shares the specific code of jQuery t...