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 introduction to VUE uni-app core knowledge
Table of contents specification a. The page file ...
React uses antd's upload component to implement the file form submission function (complete code)
I have just started using react to do projects, a...
Use the ip netns command in Linux to isolate the network port and configure the IP address
1. Add the isolation marker: ip netns add fd 2. P...
Solutions to the failure and invalidity of opening nginx.pid
Table of contents 1. Problem Description 2. Probl...
Solution to the problem that Docker container cannot access Jupyter
In this project, the Docker container is used to ...
Detailed tutorial on installing MySQL 8 in CentOS 7
Prepare Environmental information for this articl...
Detailed explanation of 5 solutions for CSS intermediate adaptive layout
Preface When making a page, we often encounter co...
Implementation of MySQL5.7 mysqldump backup and recovery
MySQL backup Cold backup:停止服務進行備份，即停止數據庫的寫入Hot ba...
MySQL query optimization: causes and solutions for slow queries
Friends who are doing development, especially tho...
Understand all aspects of HTTP Headers with pictures and text
What are HTTP Headers HTTP is an abbreviation of ...
Front-end advanced teaching you to use javascript storage function
Table of contents Preface Background Implementati...
Docker installs mysql and solves the Chinese garbled problem
Table of contents 1. Pull the mysql image 2. Chec...
Realize map aggregation and scattering effects based on vue+openlayer
Table of contents Preface: Result: 1. Polymerizat...
Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7
1. Official website address The official website ...
How to use cc.follow for camera tracking in CocosCreator
Cocos Creator version: 2.3.4 Demo download: https...