怎么用css3绘制汤勺捞起汤圆的动画特效

2024-04-02 19:04:59 487人浏览薄情痞子

摘要

这篇文章主要介绍了怎么用css3绘制汤勺捞起汤圆的动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用CSS3绘制汤勺捞起汤圆的动画特效文章都会有所收获，下面我们一起来

这篇文章主要介绍了怎么用css3绘制汤勺捞起汤圆的动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用CSS3绘制汤勺捞起汤圆的动画特效文章都会有所收获，下面我们一起来看看吧。

HTML代码：

<!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代码：

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);
  }
}

运行效果：

怎么用css3绘制汤勺捞起汤圆的动画特效

关于“怎么用css3绘制汤勺捞起汤圆的动画特效”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用css3绘制汤勺捞起汤圆的动画特效”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么用css3绘制汤勺捞起汤圆的动画特效

本文链接: https://www.lsjlt.com/news/88872.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

怎么用css3绘制汤勺捞起汤圆的动画特效

这篇文章主要介绍了怎么用css3绘制汤勺捞起汤圆的动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用css3绘制汤勺捞起汤圆的动画特效文章都会有所收获，下面我们一起来...

99+

2024-04-02
怎么用js代码实现动态的元宵节汤圆特效

本文小编为大家详细介绍“怎么用js代码实现动态的元宵节汤圆特效”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用js代码实现动态的元宵节汤圆特效”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...

99+

2024-04-02
css3怎么绘制一个圆圆的loading转圈动画

小编给大家分享一下css3怎么绘制一个圆圆的loading转圈动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！如何绘制一个圆圆的loading圈小程序里需要一个...

99+

2023-06-08
怎么用css3制作元旦雪人动画特效

这篇文章主要介绍“怎么用css3制作元旦雪人动画特效”，在日常操作中，相信很多人在怎么用css3制作元旦雪人动画特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用css...

99+

2024-04-02
怎么用纯css3实现炫酷的动画背画特效

本篇内容介绍了“怎么用纯css3实现炫酷的动画背画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　之...

99+

2024-04-02
怎么使用css3来绘制出圆形动态时钟

这篇文章给大家分享的是有关怎么使用css3来绘制出圆形动态时钟的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。　　使用css3绘制出圆形动态时钟的代码　　<!DOCT...

99+

2024-04-02
怎么用HTML5 Canvas制作动画特效

小编给大家分享一下怎么用HTML5 Canvas制作动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！　　制作canva...

99+

2024-04-02
怎么用CSS3实现按钮边框动画特效

本篇内容主要讲解“怎么用CSS3实现按钮边框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现按钮边框动画特效”吧!这是一款效果非常炫酷的...

99+

2024-04-02
CSS3怎么创建带有反弹特效的动画

这篇文章主要介绍“CSS3怎么创建带有反弹特效的动画”，在日常操作中，相信很多人在CSS3怎么创建带有反弹特效的动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么...

99+

2024-04-02
css3 animate怎么制作好看的动画效果

这篇文章主要讲解了“css3 animate怎么制作好看的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3 animate怎么制作好看的动画效...

99+

2024-04-02
怎么用CSS3+Sprite实现僵尸行走动画特效

这篇文章主要介绍“怎么用CSS3+Sprite实现僵尸行走动画特效”，在日常操作中，相信很多人在怎么用CSS3+Sprite实现僵尸行走动画特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，...

99+

2024-04-02
怎么用CSS3实现炫酷loading加载动画特效

本篇内容主要讲解“怎么用CSS3实现炫酷loading加载动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现炫酷loading加载动画特效...

99+

2024-04-02
怎么用HTML5和CSS3炫酷火箭升空动画特效

这篇文章主要讲解了“怎么用HTML5和CSS3炫酷火箭升空动画特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用HTML5和CSS3炫酷火箭升空动画特...

99+

2024-04-02
怎么用纯CSS3打造逼真的多层云彩动画特效

这篇文章主要介绍了怎么用纯CSS3打造逼真的多层云彩动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用纯CSS3打造逼真的多层云彩动画特效文章都会有所收获，下面我们一...

99+

2024-04-02
怎么用CSS绘制漂亮的圆形图案效果

本篇内容介绍了“怎么用CSS绘制漂亮的圆形图案效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！另外一种也...

99+

2024-04-02
怎么用纯CSS3制作带动画效果的主机价格表

本篇内容主要讲解“怎么用纯CSS3制作带动画效果的主机价格表”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用纯CSS3制作带动画效果的主机价格表”吧!网页上...

99+

2024-04-02
html5+css3进度条倒计时动画特效的代码怎么写

这篇“html5+css3进度条倒计时动画特效的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一...

99+

2024-04-02
怎么用jQuery和CSS3实现的炫酷3D画廊特效

本篇内容主要讲解“怎么用jQuery和CSS3实现的炫酷3D画廊特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery和CSS3实现的炫酷3D画廊...

99+

2024-04-02
怎么用CSS3和table标签实现一个圆形轨迹的动画

小编给大家分享一下怎么用CSS3和table标签实现一个圆形轨迹的动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html：其实就是根据table标签把几个实心...

99+

2023-06-08
怎么使用CSS3滤镜制作文字快闪切换动画效果

今天小编给大家分享一下怎么使用CSS3滤镜制作文字快闪切换动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面...

99+

2024-04-02