CSS3 Animated Spoon Scooping Tangyuan (Dumpling) Effect

Happy Lantern Festival to all learners! Today we share a warm and cute dumpling (tangyuan) animation implemented with code, with the full source and image links provided at the end, or you can click "Read Original" to preview and download for immediate use.

First, view the animation effect:

The effect is built using CSS3; the complete code is as follows:

HTML code:

<code>&lt;!DOCTYPE html&gt;</code><code>&lt;html lang="en"&gt;</code><code>&lt;head&gt;</code><code>&lt;meta charset="UTF-8"&gt;</code><code>&lt;title&gt;汤勺捞起汤圆动画&lt;/title&gt;</code><code>&lt;link rel="stylesheet" href="css/style.css"&gt;</code><code>&lt;/head&gt;</code><code>&lt;body&gt;</code><code>&lt;div class="bowl"&gt;</code><code>  &lt;div class="back"&gt;&lt;/div&gt;</code><code>  &lt;div class="spoon"&gt;</code><code>    &lt;div class="scoop"&gt;&lt;/div&gt;</code><code>  &lt;/div&gt;</code><code>  &lt;div class="contents"&gt;</code><code>    &lt;div class="syrup"&gt;&lt;/div&gt;</code><code>    &lt;div class="riceball uno"&gt;</code><code>      &lt;div class="face"&gt;&lt;/div&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div class="riceball dos"&gt;</code><code>      &lt;div class="face"&gt;&lt;/div&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div class="riceball tres"&gt;</code><code>      &lt;div class="face"&gt;&lt;/div&gt;</code><code>    &lt;/div&gt;</code><code>  &lt;/div&gt;</code><code>&lt;/div&gt;</code><code>&lt;/body&gt;</code><code>&lt;/html&gt;</code>

style.css code:

<code>html,</code><code>body {</code><code>  width: 100%;</code><code>  height: 100%;</code><code>  margin: 0;</code><code>  padding: 0;</code><code>  overflow: hidden;</code><code>}</code><code></code><code>body {</code><code>  background: #f7e5d7;</code><code>}</code><code></code><code>.riceball {</code><code>  position: absolute;</code><code>  width: 200px;</code><code>  height: 200px;</code><code>  background: #fff;</code><code>  border-radius: 50%;</code><code>  background: url("../img/1.jpg") 0 0/10em 10em, #fff;</code><code>  background-blend-mode: hard-light;</code><code>  box-shadow: inset -25px -25px 25px rgba(229,219,211,0.8), 5px 5px 15px 5px rgba(216,200,190,0.3);</code><code>  -webkit-clip-path: inset(-40px -30px 25% -20px);</code><code>          clip-path: inset(-40px -30px 25% -20px);</code><code>}</code><code>.riceball .face {</code><code>  position: absolute;</code><code>  top: 50%;</code><code>  left: 50%;</code><code>  -webkit-transform: translate(-50%, -50%) rotate(5deg);</code><code>          transform: translate(-50%, -50%) rotate(5deg);</code><code>  width: 30px;</code><code>  height: 20px;</code><code>  background: #000;</code><code>  border-radius: 50%;</code><code>  border-top-left-radius: 3px;</code><code>  border-top-right-radius: 3px;</code><code>}</code><code>.riceball .face::before, .riceball .face::after {</code><code>  display: block;</code><code>  content: "";</code><code>  position: absolute;</code><code>  top: -5px;</code><code>  width: 12px;</code><code>  height: 12px;</code><code>  background: #000;</code><code>  border-radius: 50%;</code><code>}</code><code>.riceball .face::before { left: -40px; }</code><code>.riceball .face::after { right: -40px; }</code><code>.riceball.uno { left: 150px; bottom: 65px; -webkit-animation: 3s rice-up infinite; animation: 3s rice-up infinite; }</code><code>.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; }</code><code>.riceball.uno .face::before, .riceball.uno .face::after { -webkit-animation: 3s eye-bulge infinite; animation: 3s eye-bulge infinite; }</code><code>.riceball.dos { left: 20px; bottom: -35px; -webkit-animation: 1s little-bob1 linear infinite; animation: 1s little-bob1 linear infinite; }</code><code>.riceball.dos .face { -webkit-transform: translate(-50%, -50%) rotate(-5deg); transform: translate(-50%, -50%) rotate(-5deg); }</code><code>.riceball.tres { bottom: 0; right: 30px; -webkit-animation: 1.2s little-bob2 linear infinite; animation: 1.2s little-bob2 linear infinite; }</code><code></code><code>.syrup {</code><code>  position: absolute;</code><code>  bottom: -50px;</code><code>  width: 500px;</code><code>  height: 200px;</code><code>  border-radius: 50%;</code><code>  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%);</code><code>  background-blend-mode: hard-light;</code><code>}</code><code></code><code>.bowl {</code><code>  position: absolute;</code><code>  top: calc(50% + 100px);</code><code>  left: 50%;</code><code>  -webkit-transform: translate(-50%, -50%);</code><code>          transform: translate(-50%, -50%);</code><code>  width: 500px;</code><code>  height: 250px;</code><code>  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%);</code><code>  background-blend-mode: hard-light;</code><code>  border-bottom-left-radius: 230px;</code><code>  border-bottom-right-radius: 230px;</code><code>  box-shadow: 15px 40px 80px -30px #C5AE9F;</code><code>}</code><code></code><code>.back {</code><code>  position: absolute;</code><code>  top: -100px;</code><code>  width: 500px;</code><code>  height: 200px;</code><code>  border-radius: 50%;</code><code>  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%);</code><code>  background-blend-mode: hard-light;</code><code>}</code><code></code><code>.contents {</code><code>  position: fixed;</code><code>  bottom: 150px;</code><code>  width: 500px;</code><code>  height: 400px;</code><code>  border-bottom-left-radius: 50% 100px;</code><code>  border-bottom-right-radius: 50% 100px;</code><code>  border-top-left-radius: 0;</code><code>  border-top-right-radius: 0;</code><code>  overflow: hidden;</code><code>}</code><code></code><code>.spoon {</code><code>  position: absolute;</code><code>  top: -60%;</code><code>  left: -200px;</code><code>  -webkit-transform: rotate(25deg);</code><code>          transform: rotate(25deg);</code><code>  width: 300px;</code><code>  height: 40px;</code><code>  background: url("../img/1.jpg") 0 0/5em 10em, linear-gradient(to bottom, #fff 40%, #e2d7cb 100%);</code><code>  background-blend-mode: hard-light;</code><code>  border-top-left-radius: 20px;</code><code>  border-bottom-left-radius: 20px;</code><code>  -webkit-animation: spoon-up 3s infinite;</code><code>          animation: spoon-up 3s infinite;</code><code>}</code><code></code><code>.spoon .scoop {</code><code>  position: absolute;</code><code>  top: 50%;</code><code>  right: -200px;</code><code>  -webkit-transform: translateY(-50%);</code><code>          transform: translateY(-50%);</code><code>  width: 220px;</code><code>  height: 140px;</code><code>  border-radius: 50%;</code><code>  background: url("../img/1.jpg") 0 0/10em 10em, #fff;</code><code>  background-blend-mode: hard-light;</code><code>  box-shadow: inset -10px -5px 15px #ceb499, 10px 10px 50px -10px #C5AE9F;</code><code>}</code><code></code><code>.spoon .scoop::before {</code><code>  display: block;</code><code>  content: "";</code><code>  position: absolute;</code><code>  top: 2px;</code><code>  left: 50%;</code><code>  -webkit-transform: translateX(-50%);</code><code>          transform: translateX(-50%);</code><code>  width: 200px;</code><code>  height: 120px;</code><code>  background: url("../img/1.jpg") 0 0/10em 10em, linear-gradient(to bottom, #e2d7cb 20%, #fff 100%);</code><code>  background-blend-mode: hard-light;</code><code>  border-radius: 50%;</code><code>}</code><code></code><code>@-webkit-keyframes spoon-up {</code><code>  0% { top: -60%; left: -200px; }</code><code>  25% { top: -80%; -webkit-transform: rotate(15deg); transform: rotate(15deg); }</code><code>  50% { top: -90%; left: -300px; -webkit-transform: rotate(25deg); transform: rotate(25deg); }</code><code>  100% { top: -60%; left: -200px; -webkit-transform: rotate(25deg); transform: rotate(25deg); }</code><code>}</code><code>@keyframes spoon-up {</code><code>  0% { top: -60%; left: -200px; }</code><code>  25% { top: -80%; -webkit-transform: rotate(15deg); transform: rotate(15deg); }</code><code>  50% { top: -90%; left: -300px; -webkit-transform: rotate(25deg); transform: rotate(25deg); }</code><code>  100% { top: -60%; left: -200px; -webkit-transform: rotate(25deg); transform: rotate(25deg); }</code><code>}</code><code>@-webkit-keyframes rice-up {</code><code>  0% { left: 150px; bottom: 65px; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>  25% { bottom: 160px; -webkit-clip-path: inset(-40px -30px 0 -20px); clip-path: inset(-40px -30px 0 -20px); }</code><code>  50% { left: 20px; bottom: 140px; -webkit-clip-path: inset(-40px -30px 0 -20px); clip-path: inset(-40px -30px 0 -20px); }</code><code>  55% { -webkit-clip-path: inset(-40px -30px 0 -20px); clip-path: inset(-40px -30px 0 -20px); }</code><code>  100% { left: 150px; bottom: 65px; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>}</code><code>@keyframes rice-up { /* same as above */ }</code><code>@-webkit-keyframes face-bob {</code><code>  0% { -webkit-transform: translate(-50%, -50%) rotate(10deg); transform: translate(-50%, -50%) rotate(10deg); }</code><code>  50% { height: 10px; -webkit-transform: translate(-50%, -50%) rotate(-10deg); transform: translate(-50%, -50%) rotate(-10deg); }</code><code>  100% { -webkit-transform: translate(-50%, -50%) rotate(10deg); transform: translate(-50%, -50%) rotate(10deg); }</code><code>}</code><code>@keyframes face-bob { /* same as above */ }</code><code>@-webkit-keyframes eye-bulge {</code><code>  0% { width: 12px; height: 12px; }</code><code>  50% { width: 18px; height: 18px; }</code><code>  100% { width: 12px; height: 12px; }</code><code>}</code><code>@keyframes eye-bulge { /* same as above */ }</code><code>@-webkit-keyframes little-bob1 {</code><code>  0% { bottom: -35px; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>  50% { bottom: -33px; -webkit-clip-path: inset(-40px -30px 23% -20px); clip-path: inset(-40px -30px 23% -20px); }</code><code>  100% { bottom: -35px; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>}</code><code>@keyframes little-bob1 { /* same as above */ }</code><code>@-webkit-keyframes little-bob2 {</code><code>  0% { bottom: 0; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>  50% { bottom: -2px; -webkit-clip-path: inset(-40px -30px 26% -20px); clip-path: inset(-40px -30px 26% -20px); }</code><code>  100% { bottom: 0; -webkit-clip-path: inset(-40px -30px 25% -20px); clip-path: inset(-40px -30px 25% -20px); }</code><code>}</code><code>@keyframes little-bob2 { /* same as above */ }</code>

Running effect:

You can directly copy the code above or visit the following link to preview and download:

<code>https://www.php.cn/xiazai/js/6642</code>

Finally, Happy Lantern Festival!