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
A brief discussion on the role of HTML empty links
Empty link: That is, there is no link with a targ...
Implementation example of Docker deployment of front-end and back-end separation projects
Table of contents 1. Environmental Preparation 2....
Solution to the problem that MySQL service cannot be stopped or deleted under Windows
I installed MySQL on Windows by unzipping the com...
CSS Pick-up Arrows, Catalogs, Icons Implementation Code
1. CSS Miscellaneous Icons There are three ways t...
Docker configuration Alibaba Cloud Container Service operation
Configuring Alibaba Cloud Docker Container Servic...
How to create components in React
Table of contents Preface Component Introduction ...
A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service
background: I have done a project before, which r...
mysql is not an internal command error solution
The error "mysql is not an internal command&...
Docker Stack deployment method steps for web cluster
Docker is becoming more and more mature and its f...
Complete the search function in the html page
Recently I've been working on a framework tha...
Why should the number of rows in a single MySQL table not exceed 5 million?
Today, let’s discuss an interesting topic: How mu...
How to test the maximum number of TCP connections in Linux
Preface There is a misunderstanding about the max...
Detailed explanation of the solution for HTML layout with fixed left and right widths and adaptive middle
This article introduces a detailed explanation of...
An article teaches you how to implement a recipe system with React
Table of contents 1. Recipe Collection 1.1 Projec...
Steps to run ASP.NET Core in Docker container
There are too much knowledge to learn recently, a...