The May Day holiday is coming soon, are you all planning to go on a trip, or go back to your hometown to accompany your parents? Today I use CSS3 to make a special effect of a cute little kiss confession , to add a little fun to your upcoming May Day holiday.
Table of contents
Realization of the little cutie on the left
Realization of the little cutie on the right
Realization of left and right swinging dynamic effects
The dynamic effect of the small mouth on the right is realized
Implementation ideas
There will be two left and right elements representing the two cuties respectively;
Then a certain rounded corner will be added and positioned to achieve the effect of eyes, mouth, and face clamping ;
Through two cute animations on the left and right, use the animation animation to achieve the special effect of swinging left and right;
Finally, there is the cute special effect of the little cutie on the right pouting her mouth , let's get started.
Realization of the little cutie on the left
Through the CSS3 attribute of border-radius , set 50% of the attribute value, set the face as the prototype, and the class is .face , and then use :before and :after to realize the small oval of the face clip, and then the eyes, by setting the width and The width-to-height ratio of height, plus a certain number of rounded angles, to achieve the curved effect, the mouth corners are also set in the same way, the HTML code is as follows:
<div id='l-ball' class='ball'>
<div class='face face-l'>
<div class='eye eye-l'></div>
<div class='eye eye-r'></div>
<div class='mouth'></div>
</div>
</div>The renderings are as follows :
Realization of the little cutie on the right
The implementation of the left and right is generally the same, but there is symmetry between the cuties on the left and the right, one facing the right and the other facing the left , so the difference from the cuties on the left is the difference in the control position positioning. You can also choose according to your own preferences. Modify positioning, modify color value.
But the little cutie on the right is obviously playing the active role , so the corners of the eyes and mouth are also slightly different, and the blush on the face will also be different. These are controlled by constantly modifying the parameter values of the border-radius . The code is as follows:
<div id='r-ball' class='ball'>
<div class='face face-r'>
<div class='eye eye-l eye-r-p'></div>
<div class='eye eye-r eye-r-p'></div>
<div class='mouth mouth-r'></div>
<div class='kiss-m'>
<div class='kiss'></div>
<div class='kiss'></div>
</div>
</div>
</div>
<!-- CSS3代码 -->
.face-r{
left:0;
top:37px;
}
.face-r:after{
width:10px;
height:10px;
left:5px;
}
.face-r:before{
width:10px;
height:10px;
right:-4px;
}
.eye{
width:15px;
height:14px;
border-radius:50%;
border-bottom:5px solid;
position:absolute;
}
.eye-r-p{
border-top:5px solid;
border-bottom:0px solid;
}
.eye-l{
left:10px;
}
.eye-r{
right:5px;
}Realization of left and right swinging dynamic effects
The two cuties are constantly swaying left and right . Animation animation is mainly used here to control the left and right positions, and the cutie on the left will also have an animation to change its transform in order to achieve the effect of twisting its little face back and forth. Attribute effect, the CSS3 code is as follows:
@keyframes close{
0%{transform:translate(0)}
20%{transform:translate(20px)}
35%{transform:translate(20px)}
55%{transform:translate(0px)}
100%{transform:translate(0px)}
}
@keyframes face{
0%{transform:translate(0) rotate(0);}
10%{transform:translate(0) rotate(0);}
20%{transform:translate(5px) rotate(-2deg);}
28%{transform:translate(0) rotate(0);}
35%{transform:translate(5px) rotate(-2deg);}
50%{transform:translate(0) rotate(0);}
100%{transform:translate(0) rotate(0);}
}
The dynamic effect of the small mouth on the right is realized
Here, it starts with a semi-round mouth shape, and then changes into two small up and down shapes . You can set the end color values of the two small mouths by changing the properties of the background , and then use the animation class animation to have a gradient. up and down effect. Then let the two cuties change positions continuously to achieve the effect of confession. Of course, a reasonable setting of border-radius is also essential here, the CSS3 code is as follows:
.kiss-m{
position:absolute;
left:20px;
top:22px;
opacity:0;
animation:kiss-m 4s ease infinite;
}
@keyframes kiss-m{
0%{opacity:0;}
55%{opacity:0;}
55.1%{opacity:1;}
66%{opacity:1;}
66.1%{opacity:0;}
}full source code
Friends, if you are not very clear after reading the above explanation, you can directly copy the source code below, put it in your own HTML document, and then open it with a browser to see the effect. The complete source code is as follows:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3表白特效</title>
<style>
body{
background-color: red;
margin:0;
}
.container{
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:248px;
}
.face{
width:70px;
height:30px;
position:absolute;
right:0;
top:30px;
border-top-right-radius:15px;
}
#r-ball{
animation: kiss 4s ease infinite;
background-color:#FD4;
}
@keyframes kiss{
40%{transform:translate(0px);}
50%{transform:translate(30px) rotate(20deg);}
60%{transform:translate(-33px);}
67%{transform:translate(-33px);}
77%{transform:translate(0px);}
}
.kiss{
background-color:red;
width:13px;
height:10px;
background-color:#FD4;
border-radius:50%;
border-left:5px solid;
}
.kiss-m{
position:absolute;
left:20px;
top:22px;
opacity:0;
animation:kiss-m 4s ease infinite;
}
@keyframes kiss-m{
0%{opacity:0;}
55%{opacity:0;}
55.1%{opacity:1;}
66%{opacity:1;}
66.1%{opacity:0;}
}
.mouth-r{
animation:mouth-m 4s ease infinite;
}
@keyframes mouth-m{
0%{opacity:1;}
54.9%{opacity:1;}
55%{opacity:0;}
66%{opacity:0;}
66.1%{opacity:1;}
}
.face:after{
position:absolute;
content:"";
width:18px;
height:8px;
background-color:#badc58;
left:-5px;
top:20px;
border-radius:50%;
}
.face:before{
position:absolute;
content:"";
width:18px;
height:8px;
background-color:#badc58;
right:-8px;
top:20px;
border-radius:50%;
z-index:-1;
}
.face-r{
left:0;
top:37px;
}
.face-r:after{
width:10px;
height:10px;
left:5px;
}
.face-r:before{
width:10px;
height:10px;
right:-4px;
}
.eye{
width:15px;
height:14px;
border-radius:50%;
border-bottom:5px solid;
position:absolute;
}
.eye-r-p{
border-top:5px solid;
border-bottom:0px solid;
}
.eye-l{
left:10px;
}
.eye-r{
right:5px;
}
.mouth{
width:30px;
height:14px;
border-radius:50%;
border-bottom:5px solid;
position:absolute;
bottom:-5px;
transform:translate(3px);
left:0;
right:0;
margin: auto;
}
.ball{
border: 8px solid;
width:100px;
height:100px;
border-radius:50%;
display:inline-block;
vertical-align:top;
position:relative;
}
#r-ball{
position:relative;
z-index:40;
}
#l-ball{
animation: close 4s ease infinite;
position:relative;
z-index:50;
background-color:#FD4;
}
.face-l{
animation: face 4s ease infinite;
}
@keyframes close{
0%{transform:translate(0)}
20%{transform:translate(20px)}
35%{transform:translate(20px)}
55%{transform:translate(0px)}
100%{transform:translate(0px)}
}
@keyframes face{
0%{transform:translate(0) rotate(0);}
10%{transform:translate(0) rotate(0);}
20%{transform:translate(5px) rotate(-2deg);}
28%{transform:translate(0) rotate(0);}
35%{transform:translate(5px) rotate(-2deg);}
50%{transform:translate(0) rotate(0);}
100%{transform:translate(0) rotate(0);}
}
</style>
</head>
<body>
<div class='container'>
<div id='l-ball' class='ball'>
<div class='face face-l'>
<div class='eye eye-l'></div>
<div class='eye eye-r'></div>
<div class='mouth'></div>
</div>
</div>
<div id='r-ball' class='ball'>
<div class='face face-r'>
<div class='eye eye-l eye-r-p'></div>
<div class='eye eye-r eye-r-p'></div>
<div class='mouth mouth-r'></div>
<div class='kiss-m'>
<div class='kiss'></div>
<div class='kiss'></div>
</div>
</div>
</div>
</div>
</body>
</html>
at last
I hope you can like this cute little confession effect realized by CSS3. I wish you all a life like this cute couple, harmonious and beautiful, happy, healthy, and happy. I also wish my friends happy, happy and healthy play during the upcoming May Day holiday. Below I have prepared a very interesting poll for you, please vote for your favorite friends .