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
MySQL high availability cluster deployment and failover implementation
Table of contents 1. MHA 1. Concept 2. Compositio...
Solve the problem of MySql client exiting in seconds (my.ini not found)
Problem description (environment: windows7, MySql...
Advantages of INSERT INTO SET in MySQL
Insert data into mysql database. Previously commo...
Docker image creation, uploading, pulling and deployment operations (using Alibaba Cloud)
Since I found that the push image always timed ou...
Detailed Analysis of the Differences between break and last in Nginx
Let's talk about the difference first last, t...
Share 13 excellent web wireframe design and production tools
When you start working on a project, it’s importa...
The use of mysql unique key in query and related issues
1. Create table statement: CREATE TABLE `employee...
Implementation of mysql8.0.11 data directory migration
The default storage directory of mysql is /var/li...
Design Theory: Hierarchy in Design
<br />Original text: http://andymao.com/andy...
Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7
You always need data for development. As a server...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...
Detailed explanation of MySQL master-slave replication and read-write separation
Table of contents Preface 1. Overview 2. Read-wri...
Use of MySQL official export tool mysqlpump
Table of contents Introduction Instructions Actua...
JS implementation of carousel example
This article shares the specific code of JS to im...