css3一碗汤圆动画

最新推荐文章于 2023-05-04 18:09:23 发布
最新推荐文章于 2023-05-04 18:09:23 发布
阅读量363 收藏 4
点赞数
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/106482466
版权

今天是用纯css做的一碗汤圆动画，特别的可爱，喜欢的可以做一下哦~ 也可以和我分享好看的动画一起来做啊
在这里插入图片描述这个是里面用到的图片：
在这里插入图片描述
Html代码

<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>

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);
  }
}
W Y L
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS3汤圆可爱表情动画特效特效代码
03-20
CSS3汤圆可爱表情动画特效是一款基于css3绘制的一碗可爱的汤圆表情，汤勺捞起一个汤圆动画特效。
CSS3 SVG波浪线条动画特效
07-24
CSS3 SVG波浪线条动画特效是一款简单的线条波浪滚动，线条弯曲动画特效。
HTML练习元宵节案例
zhansan的博客
08-05 496
HTML练习元宵节案例
制作庆祝元宵节html5,庆祝元宵节活动方案
weixin_34269309的博客
06-17 491
庆祝元宵节活动方案篇一：元宵游园会活动方案元宵游园会活动方案一、活动背景元宵节作为中国传统节日之一，为丰富老年人精神文化生活，活跃节日气氛，以增强颐养园老人之间的凝聚力，辐射社区居家养老，营造良好的节日文化氛围，让每位参与者欢度一个温馨、愉悦、宽松的元宵佳节，二、活动主题：元宵游园会三、活动时间：2016年2月22日(农历正月十五)上午9：30——10:50四、活动地点：xxxxx五、活动准备：1...
认识HTML5的WebSocket
cuiyi0600的博客
12-01 367
《认识HTML5的WebSocket》 【版权声明】：本文属于原创，转载需征得作者chszs的同意！ 认识HTML5的WebSocket 在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的Web...
css3+图片制作圆形球状水波荡漾效果
天下大师傅
11-22 5947
偶然看别人网站上有个这个效果，刚开始觉得应该是canvas或者svg做的。但是仔细一看有三个部位，就感觉是图片+css做的。查看下代码后果然是，然后好奇心使然，就把它扒下来了，供大家参考。 先上效果图： 他的布局和代码结构也很简单，就是用三个div 做三个背景图，设置不同的opacity。然后通过css3的animate 结合 keyframes做的一个从左往右的动画。 完整代码我也贴出...
CSS3 -- @keyframes动画
qq_51248309的博客
05-04 5460
一篇文章教会你css3中的动画
CSS3 animation 动画用法介绍
保持清醒
12-30 7748
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
css3动画设置无效
weixin_42369612的博客
12-17 2740
css3动画设置无效 原因1: 添加动画元素是行内元素** 解决: 设置为行内块级元素 原因2: diff算法的原因 这个遇到的情况比较少,但是我在开发中确实遇到了,讲讲经历吧 在做年度报告的时候,需要加一个动画效果,让文字逐行显示 然后我就获取到当前页面的每一行的元素 给元素加上动画属性样式 第一个页面没有问题,每一行都是逐行显示的 到了第二页,就没有逐行显示的效果了 我以为是没获取元素,或者js没有生效 调试之后发现都生效了,并且在控制台上查看元素的属性,已经加上了动画属性 这就很奇怪,然后再切换
CSS3实现跳动的动画效果
12-02
复制代码代码如下://css3新知识 display: flex; justify-content: center; align-items: center; animation: shadow .5s linear infinite;@keyframes shadow { 0%, 100% {transform: scaleX(1);} 50% {transform: ...
CSS3 3D圆点波浪动画特效
07-24
CSS3 3D圆点波浪动画特效是一款圆点矩阵波浪滚动，3D粒子波浪动画特效。
CSS3实现swap交换动画
09-24
主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下
HTML初始代码含义及注释格式(汤圆的HTML学习文档01)
byllymtics的博客
09-09 168
HTML初始代码含义 <!-- DOCTYPE:告诉浏览器,我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- mata描述性标签,它用来描述我们网站的一些信息 --> <!-- mata一般用来做SEO,搜索引擎优化 --> <meta charset="UTF-8">
Java_Spring Boot 3主分支2其他分支和Spring Cloud微服务的分布式配置演示Spring Cl.zip
05-22
Java_Spring Boot 3主分支2其他分支和Spring Cloud微服务的分布式配置演示Spring Cl
ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计
05-22
ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)+编程项目+毕业设计ERP客户关系系统设计(含源代码+毕业设计文档)
基于MATLAB实现的V两幅图像中有重叠部分，通过数字图像相关算法可以找到两幅图像相同的点+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的V两幅图像中有重叠部分，通过数字图像相关算法可以找到两幅图像相同的点+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
全球国家列表和国家代码最详细版本
最新发布
05-22
全球国家列表和国家代码最全最详细版本，国家country，code
grpcio-1.47.0-cp37-cp37m-manylinux_2_17_aarch64.whl
05-22
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
基于Python的蛇露谷物语农场模拟游戏设计源码
05-22
蛇露谷物语农场模拟游戏设计源码：该项目基于Python开发，包含149个文件，主要使用Python和TypeScript语言。该游戏灵感来源于经典游戏《星露谷物语》，旨在为玩家提供一个沉浸式的农场生活体验。玩家将扮演农场主，通过种植作物、经营农田、探索世界和与村民互动等活动，来经营和发展自己的农场。游戏采用了来自sprout lands游戏官网的像素风格素材，赋予了游戏独特的视觉效果和艺术风格。
css3写一个动画效果
03-14
可以使用CSS3的@keyframes规则来创建动画效果，例如： ```css /* 定义动画 */ @keyframes myAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* 应用动画 */ .myElement { animation-name: myAnimation; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; } ``` 这段代码定义了一个名为`myAnimation`的动画，它会让元素在50%的时候放大到1.2倍，然后再缩小回原来的大小。然后将这个动画应用到一个类名为`myElement`的元素上，让它无限循环播放，来实现动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值