How long has it been since you had breakfast? Do you stay busy late every day, and as a result, you wake up late in the morning, and you don't have time to eat breakfast in a hurry, let alone make it yourself. Until now, how long has it been since you had breakfast made by your mother? We are running around, hoping our family is safe? How long has it been since you cooked breakfast for your lover? Damn, whose married life is not full of swords and swords, and who still expects breakfast? Haha, just kidding, don't take it seriously!
Table of contents
The realization of the pot handle
Implementation ideas
This case is a pure CSS3 code special effect, which has omitted the DOM element part of HTML5, but developed it based on the body element.
Fill color for the BODY background, since the main area is implemented on the BODY element, the width and height are set ;
Set the pan, mainly using the angle setting of the background rounded border border-radius ;
The handle of the pan (the handle or the handle is better?), does not need to use an element alone, and directly uses the ::after pseudo-class element to control;
Omelette atmosphere egg white and egg yolk, haha, in the middle of the night, I was hungry, and my saliva flowed on the keyboard, but the egg yolk must not be purely rounded, it needs to have a certain degree of gentleness, which requires border- radius settings more property values
Implementation of the pan
Set certain width and height attributes for the pan, directly set the border-radius to change the value of the rounded border, and fried eggs, there will definitely be an animation process, just like when we hold the pan and slide up and down, it will The animation effect of animation is required , and the CSS3 code is as follows:
@-webkit-keyframes panmov {
0%, 10% {
transform: rotate(5deg);
}
90%, 100% {
transform: rotate(-5deg);
}
}
The realization of the pot handle
The handle of the pot is actually a rectangle, but here the pseudo-class element of ::after is used for layout, border-raidus needs to be added as the rounded corner setting, box-shadow is used for a certain shadow effect, and transform is used for a certain offset. To go with the pan positioning, the key code of the CSS3 part is as follows:
border-radius: 0 20px 20px 0;
box-shadow: 3px 0 3px #eee2 inset;
transform: rotate(5deg);
Realization of fried eggs
Have you ever seen a fried egg? If you haven’t seen it, try frying it quickly and you will see that the egg white is spread out, and it is a circle. The egg yolk is not spread out, but it is still a circle. One is still an egg, haha, why is this passage so familiar, as if I learned it when I was in school.
Use the ::before pseudo-class element for layout, transform for position offset, egg white is white, set a certain width and height, and then the important thing is that the value of the border-radius element of the rounded border must be different in size. In order to look more easy-going, not so purely round, the egg yolk is set with background-image . In order to move up and down with the pan, it looks like it is really being held in the hand, and it is also set with animation animation. Some CSS3 codes are as follows :
background: #fff;
background-image: radial-gradient(circle 3px, #fff6 90%, transparent 10%), radial-gradient(circle 25px, #ffc400 90%, transparent 10%), radial-gradient(circle 25px, #ffae00 100%, transparent 0);
background-repeat: no-repeat;
background-position: -4px -6px, -2px -2px, -1px -1px;
box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
border-radius: 47% 36% 50% 50%/49% 45% 42% 44%;
-webkit-animation: ylmov 0.6s ease-in-out infinite alternate;
animation: ylmov 0.6s ease-in-out infinite alternate;
full source code
Friends who like it can copy the source code to their own HTML document, without adding DOM elements, just copy it directly, the code is as follows:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3煎制荷包蛋</title>
<style>
html {
height: 100vh;
width: 100%;
background: #607D8B;
display: grid;
place-items: center;
}
body {
width: 200px;
height: 200px;
position: relative;
background: #222;
border-radius: 50%;
box-sizing: border-box;
transform-origin: 340px 100px;
border: 4px solid #333;
box-shadow: 3px 4px #0003 inset, 0 0 6px #0002 inset;
-webkit-animation: panmov 0.4s ease-in-out infinite alternate;
animation: panmov 0.4s ease-in-out infinite alternate;
}
body::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-15deg, 15deg) rotate(-15deg);
width: 125px;
height: 123px;
background: #fff;
background-image: radial-gradient(circle 3px, #fff6 90%, transparent 10%), radial-gradient(circle 25px, #ffc400 90%, transparent 10%), radial-gradient(circle 25px, #ffae00 100%, transparent 0);
background-repeat: no-repeat;
background-position: -4px -6px, -2px -2px, -1px -1px;
box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
border-radius: 47% 36% 50% 50%/49% 45% 42% 44%;
-webkit-animation: ylmov 0.6s ease-in-out infinite alternate;
animation: ylmov 0.6s ease-in-out infinite alternate;
}
body::after {
content: "";
position: absolute;
left: 100%;
top: 96px;
height: 30px;
width: 140px;
background: #222222;
border-radius: 0 20px 20px 0;
box-shadow: 3px 0 3px #eee2 inset;
transform: rotate(5deg);
}
@-webkit-keyframes panmov {
0%, 10% {
transform: rotate(5deg);
}
90%, 100% {
transform: rotate(-5deg);
}
}
@keyframes panmov {
0%, 10% {
transform: rotate(5deg);
}
90%, 100% {
transform: rotate(-5deg);
}
}
@-webkit-keyframes ylmov {
to {
border-radius: 50% 36% 50% 50%/49% 50% 45% 45%;
background-position: -2px -4px, 2px 2px, 1px 1px;
}
}
@keyframes ylmov {
to {
border-radius: 50% 36% 50% 50%/49% 50% 45% 45%;
background-position: -2px -4px, 2px 2px, 1px 1px;
}
}
</style>
</head>
<body>
</body></html>No matter what, everyone must remember to eat breakfast, even if you eat a little bit, the body is the capital of everything