Web Front-end
CSS Tutorial
CSS3 realizes the animation effect of scooping up glutinous rice balls with a spoon (super cute)!
CSS3 realizes the animation effect of scooping up glutinous rice balls with a spoon (super cute)!
I wish all students a happy Lantern Festival! ! ! Today I give you a bowl of hot glutinous rice balls, which are delicious. The complete special effects source code and picture link are at the end of the article. Click to preview and download to use!
The special effect of this article is based on the expression of a bowl of cute glutinous rice balls drawn with css3, and the animation special effects of scooping up a glutinous rice ball with a spoon.
HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>汤勺捞起汤圆动画</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bowl">
<div class="back"></div>
<div class="spoon">
<div class="scoop"></div>
</div>
<div class="contents">
<div class="syrup"></div>
<div class="riceball uno">
<div class="face"></div>
</div>
<div class="riceball dos">
<div class="face"></div>
</div>
<div class="riceball tres">
<div class="face"></div>
</div>
</div>
</div>
</body>
</html>style.css code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background: #f7e5d7;
}
.riceball {
position: absolute;
width: 200px;
height: 200px;
background: #fff;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, #fff;
background-blend-mode: hard-light;
box-shadow: inset -25px -25px 25px rgba(229, 219, 211, 0.8), 5px 5px 15px 5px rgba(216, 200, 190, 0.3);
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
.riceball .face {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(5deg);
transform: translate(-50%, -50%) rotate(5deg);
width: 30px;
height: 20px;
background: #000;
border-radius: 50%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.riceball .face::before, .riceball .face::after {
display: block;
content: "";
position: absolute;
top: -5px;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
}
.riceball .face::before {
left: -40px;
}
.riceball .face::after {
right: -40px;
}
.riceball.uno {
left: 150px;
bottom: 65px;
-webkit-animation: 3s rice-up infinite;
animation: 3s rice-up infinite;
}
.riceball.uno .face {
-webkit-transform: translate(-50%, -50%) rotate(-20deg);
transform: translate(-50%, -50%) rotate(-20deg);
-webkit-animation: 3s face-bob infinite;
animation: 3s face-bob infinite;
}
.riceball.uno .face::before, .riceball.uno .face::after {
-webkit-animation: 3s eye-bulge infinite;
animation: 3s eye-bulge infinite;
}
.riceball.dos {
left: 20px;
bottom: -35px;
-webkit-animation: 1s little-bob1 linear infinite;
animation: 1s little-bob1 linear infinite;
}
.riceball.dos .face {
-webkit-transform: translate(-50%, -50%) rotate(-5deg);
transform: translate(-50%, -50%) rotate(-5deg);
}
.riceball.tres {
bottom: 0;
right: 30px;
-webkit-animation: 1.2s little-bob2 linear infinite;
animation: 1.2s little-bob2 linear infinite;
}
.syrup {
position: absolute;
bottom: -50px;
width: 500px;
height: 200px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, radial-gradient(ellipse at bottom center, #f0ad42 0%, #feda90 31%, #f0ad42 66%, #feda90 86%, #f0ad42 100%);
background-blend-mode: hard-light;
}
.bowl {
position: absolute;
top: calc(50% + 100px);
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
height: 250px;
background: url("../img/1.jpg") 0 0/15em 15em, radial-gradient(ellipse at top left, #fff 0%, #fcfcfc 35%, #f1ccbb 60%, #fdf1dd 70%, #fff 80%);
background-blend-mode: hard-light;
border-bottom-left-radius: 230px;
border-bottom-right-radius: 230px;
box-shadow: 15px 40px 80px -30px #C5AE9F;
}
.back {
position: absolute;
top: -100px;
width: 500px;
height: 200px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, radial-gradient(ellipse at bottom right, #fff 0%, #fcfcfc 35%, #f1ccbb 60%, #fdf1dd 75%, #fff 90%);
background-blend-mode: hard-light;
}
.contents {
position: fixed;
bottom: 150px;
width: 500px;
height: 400px;
border-bottom-left-radius: 50% 100px;
border-bottom-right-radius: 50% 100px;
border-top-left-radius: 0;
border-top-right-radius: 0;
overflow: hidden;
}
.spoon {
position: absolute;
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
width: 300px;
height: 40px;
background: url("../img/1.jpg") 0 0/5em 10em, linear-gradient(to bottom, #fff 40%, #e2d7cb 100%);
background-blend-mode: hard-light;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-animation: spoon-up 3s infinite;
animation: spoon-up 3s infinite;
}
.spoon .scoop {
position: absolute;
top: 50%;
right: -200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 220px;
height: 140px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, #fff;
background-blend-mode: hard-light;
box-shadow: inset -10px -5px 15px #ceb499, 10px 10px 50px -10px #C5AE9F;
}
.spoon .scoop::before {
display: block;
content: "";
position: absolute;
top: 2px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 120px;
background: url("../img/1.jpg") 0 0/10em 10em, linear-gradient(to bottom, #e2d7cb 20%, #fff 100%);
background-blend-mode: hard-light;
border-radius: 50%;
}
@-webkit-keyframes spoon-up {
0% {
top: -60%;
left: -200px;
}
25% {
top: -80%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
top: -90%;
left: -300px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@keyframes spoon-up {
0% {
top: -60%;
left: -200px;
}
25% {
top: -80%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
top: -90%;
left: -300px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@-webkit-keyframes rice-up {
0% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
25% {
bottom: 160px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
50% {
left: 20px;
bottom: 140px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
55% {
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
100% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes rice-up {
0% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
25% {
bottom: 160px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
50% {
left: 20px;
bottom: 140px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
55% {
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
100% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@-webkit-keyframes face-bob {
0% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
50% {
height: 10px;
-webkit-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
}
@keyframes face-bob {
0% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
50% {
height: 10px;
-webkit-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
}
@-webkit-keyframes eye-bulge {
0% {
width: 12px;
height: 12px;
}
50% {
width: 18px;
height: 18px;
}
100% {
width: 12px;
height: 12px;
}
}
@keyframes eye-bulge {
0% {
width: 12px;
height: 12px;
}
50% {
width: 18px;
height: 18px;
}
100% {
width: 12px;
height: 12px;
}
}
@-webkit-keyframes little-bob1 {
0% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -33px;
-webkit-clip-path: inset(-40px -30px 23% -20px);
clip-path: inset(-40px -30px 23% -20px);
}
100% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes little-bob1 {
0% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -33px;
-webkit-clip-path: inset(-40px -30px 23% -20px);
clip-path: inset(-40px -30px 23% -20px);
}
100% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@-webkit-keyframes little-bob2 {
0% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -2px;
-webkit-clip-path: inset(-40px -30px 26% -20px);
clip-path: inset(-40px -30px 26% -20px);
}
100% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes little-bob2 {
0% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -2px;
-webkit-clip-path: inset(-40px -30px 26% -20px);
clip-path: inset(-40px -30px 26% -20px);
}
100% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}Running effect:
You can directly click on the special effects link to preview and download: https://www.php.cn/xiazai/js/6642
For more cute and cool code effects, please visit the js special effects column of the PHP Chinese website!
The above is the detailed content of CSS3 realizes the animation effect of scooping up glutinous rice balls with a spoon (super cute)!. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Danzi Party Yuanyuanzi returns to Danzi Island: a reunion on the island during the Lantern Festival
Feb 23, 2024 pm 06:16 PM
Of course, during the Lantern Festival, we have to go to the island for reunions. Danzi Party has specially prepared a number of Lantern Festival activities for everyone, including Miaomiao New Store Preparation, Reunion Welfare Festival, Funny Lantern Festival, Lantern Festival Blind Box Shop Limited Time Discount Return, and Food Processing Factory Danzhai Compound is online. Let’s take a look at the details of this event. Danzi Party Yuanyuanzi returns to Danzi Island: Reunion on the island during the Lantern Festival Miaomiao New Store Preparatory Event Time: February 22nd 12:00-February 29th 23:59 Event Scope: All players in the server Event Content: Vegetable Man Miaomiao is preparing for a new store on Danzi Island. Help Miaomiao complete the preparatory tasks and you can obtain rare accessories after the store opens on March 1. On March 1st, Eggboys can also get the appearance for free through the event.
Reunion to celebrate the festival, the 'After Tomorrow' Lantern Festival series of activities has launched
Feb 23, 2024 pm 08:37 PM
Dear survivors, in order to celebrate the Lantern Festival, the Alliance has launched a series of exciting activities. Join the cooking competition, unlock more delicious recipes through cooking questions, and obtain duty points and rewards. There are also investigation teams and two-person trainings waiting for you to challenge. Come and invite friends to spend this happy Lantern Festival! [Cooking Competition] Those who love cooking Blessed are the survivors, from February 22nd to March 6th, Lantern Festival recipes will be added to the cooking competition. From 9:00 to 23:50 every day, go to the camp fountain or the 101 entrance, talk to Monica, participate in cooking quizzes, unlock mysterious recipes, and more gifts are waiting for you! [Lantern Festival Lianliankan] During the festival, In the online event, Lantern Festival Lianliankan starts today, from now until 8:00 on March 7. During the event, you can get recipe fragments, reconstructed molecules, and rare items by connecting online.
Ant Manor February 24: In order to prevent the glutinous rice balls from sticking to the bottom of the pot, you should
Feb 23, 2024 pm 06:34 PM
In order to prevent the glutinous rice balls from sticking to the bottom of the pot, this should be the question of Ant Manor on February 24th. Today’s answer to Ant Manor is to boil the glutinous rice balls under water. Boiling the glutinous rice balls under water will prevent them from sticking to the pot. Follow the editor to read this Ant Manor article for details. Today's answer is 2.24, the latest in 2024, I hope it can help you. Ant Manor Today's Answers Ant Manor February 24 Questions and Answers Question: In order to prevent the glutinous rice balls from sticking to the bottom of the pot, the answer should be: boil the glutinous rice balls under boiling water. Analysis: adding the glutinous rice balls after the water is boiled can prevent the glutinous rice balls from sticking to the bottom of the pot. This method can also make the glutinous rice balls stick to the bottom of the pot. The taste is more delicate.
List of Honor of Kings Lantern Festival return skins
Feb 24, 2024 am 08:31 AM
List of skins for King of Glory's return to the Lantern Festival. Friends, the Lantern Festival is coming soon. King of Glory is also returning to the festival to take a look at some good-looking skins. If you find one you like, you can buy it in time. Here are Let me tell you what kind of skin you have. List of answers to King of Glory Lantern Festival return skins: Yao, Mozi and Luna; detailed analysis of Yao Glory Collection. Many people say that the skin style this time is white hair and Tsing Yi, which is in line with the atmosphere of early spring. If everyone has a Glory Crystal, it will still be I suggest you buy it. It should be available during this Lantern Festival. Mozi's Golden Saint Scorpio skin is a collaboration skin. It will basically be launched in April, and it is a legendary skin. If you like to play this character, you still need to prepare.
The strongest ancestor's new mount is given away for free: Four benefits for the Lantern Festival are coming!
Feb 23, 2024 pm 07:00 PM
The Lantern Festival, a festival full of traditional joy, is about to come. The strongest ancestor brings you four benefits of the Lantern Festival, including a free limited mount for the first benefit, a sign-in event for the second benefit, and a big release of secret Lantern Festival codes for the third benefit. , welfare four public account activities, etc., let’s take a look at this welfare introduction. The strongest ancestor’s new mount is given away for free: Four benefits for the Lantern Festival are coming! Benefit 1: Sign-in benefits are upgraded, and limited mounts are given for free ~ Mount - Fortune Lantern Reunion: a mount magical weapon specially refined by an ancient powerful monk to celebrate the festival, which means happiness, reunion, and is very auspicious. Such a cute mount, You can get it for free during the Lantern Festival sign-in event! Although the free mount will be late, it will definitely not be absent. Patriarchs, please prepare early, don’t miss it ~ PS: Festival
Love and Producer 2024 Lantern Festival welfare information: Flowers are blooming and the moon is full, everything is happy
Feb 24, 2024 am 08:00 AM
The Lantern Festival is coming soon, and the producers of Love and Love have also updated the Lantern Festival benefits. There are three benefits in total, including heartfelt gifts, special text messages, and greetings from him. Players can receive special Lantern Festival-themed text messages from him. You can also receive his Lantern Festival greetings, which I believe everyone is looking forward to. Love and Producer 2024 Lantern Festival welfare information: Flowers are blooming, the moon is full, and everything is happy. From 18:00 on February 24th to 23:59 on February 25th, you can check the in-game mailbox to receive the [Diamonds*100] given by the five characters. ], a total of [Diamonds*500] Lantern Festival gifts. Special SMS From 18:00 on February 24th to 23:59 on February 25th, log in to the game and receive Lantern Festival-themed [Special SMS] from five characters on your phone.
Delusion Shanhai 2024 Lantern Festival Lantern Riddles Answers
Feb 29, 2024 pm 06:01 PM
The fun brought by Delusion Mountain and Sea is quite rich. Players can experience a variety of different gameplay contents. Recently, the game has a fun gameplay of answering Lantern Festival riddles. Players will encounter different puzzles in this gameplay. , and what we will bring below are the answers to the activity puzzles. You can complete the answer through the answers given. Delusion Shanhai 2024 Lantern Festival Lantern Riddles Answers 1. Village chief Shangguan Ming said he saw a horse eating a tiger. Could this "horse" be? Answer: Refutation 2. Drunk man looking at the sky (guess an idiom) Answer: Star Movement Dou Zhuan 3. Which god is the leader of all the insects? Answer: Jiao Chong 4. White-headed Ambition and Four Transformations (Tick one word) Answer: Virtue 5. Why not (Tick one word) Answer: Yu 6. Wearing a large suit Leather jacket, eat enough weeds, after the severe
Lantern Festival ppt drawing tutorial illustration of Lantern Festival poster
Mar 20, 2024 am 09:59 AM
Hello students, I am here to share with you a practical PPT tutorial again! Sometimes, when we use PPT, we need to design a poster image in the slide. So, if we want to make a Lantern Festival ppt drawing poster about the Lantern Festival, how should we make it? Today, I will introduce it to you in detail. Next, I will share some detailed steps for making a Lantern Festival PPT poster. I hope you will like it. Friends who are interested are welcome to join and make a PPT poster depicting the Lantern Festival for the Lantern Festival! In order to make a Lantern Festival poster on the Lantern Festival PPT, we need to follow some design steps. First, we need to draw lanterns, which is the first step; second, we need to draw Lantern Festival. During the production process, we must ensure that we proceed in this order, so that
