CSS 使用 SVG 绘制动态皮筋与小球交互动画

CSS 使用 SVG 绘制动态皮筋与小球交互动画

效果展示

在这里插入图片描述

CSS 知识点

  • 使用 animation 控制 SVG 的 path 属性执行动画
  • 使用 CSS 设置 SVG 部分属性

整体页面布局

<div class="elasic"><!-- 小球 --><div class="ball"></div><!-- 皮筋的阴影部分 --><svg><path></path></svg><!-- 皮筋部分 --><svg><path></path></svg>
</div>

绘制固定皮筋的两个小点

.elasic {position: relative;width: 400px;height: 400px;display: flex;justify-content: center;align-items: flex-end;
}.elasic::before {content: "";position: absolute;bottom: 62.5px;left: 5px;width: 15px;height: 15px;background: #fff;border-radius: 50%;z-index: 2;
}.elasic::after {content: "";position: absolute;bottom: 62.5px;right: 5px;width: 15px;height: 15px;background: #fff;border-radius: 50%;z-index: 2;
}

实现上述代码后,页面效果如下:

在这里插入图片描述

绘制 SVG 皮筋

.elasic svg {position: absolute;width: 400px;height: 150px;fill: none;
}.elasic svg:nth-child(2) {filter: blur(25px);
}.elasic svg path {width: 100%;stroke: #ff0092;stroke-width: 10;stroke-linecap: round;/* 设置SVG的形状 */d: path("M 10 80 Q 190 80 390 80");
}

实现 SVG 皮筋动画

.elasic svg path {/* 添加动画 */animation: animate 2.5s linear infinite, animateColor 2.5s linear infinite;
}@keyframes animate {/* 这里我只是会绘制了0~60%的动画,正在动画执行时效果不是很好,可以自行补充剩余的动画步骤 *//* 因为我们只是简单绘制了一个矩形,所以我们要呈现皮筋的运动效果的话,只要修改 path 属性中的对应属性就可以(简单来说就是修改倒数第三个和第二个参数就可以形成上下运动的皮筋效果) */0% {d: path("M 10 80 Q 190 80 390 80");}10% {d: path("M 10 80 Q 190 160 390 80");}20% {d: path("M 10 80 Q 190 20 390 80");}30% {d: path("M 10 80 Q 190 120 390 80");}35% {d: path("M 10 80 Q 190 100 390 80");}40% {d: path("M 10 80 Q 190 80 390 80");}50% {d: path("M 10 80 Q 190 100 390 80");}55% {d: path("M 10 80 Q 190 90 390 80");}60% {d: path("M 10 80 Q 190 80 390 80");}
}/* 改变皮筋的颜色的动画 */
@keyframes animateColor {0%,100% {stroke: #ff0092;}33.33% {stroke: #0f0;}66.66% {stroke: #ff0;}
}

完成上述代码后,皮筋就可以开始运动,效果图如下:

在这里插入图片描述

绘制小球和小球动画

.ball {position: relative;width: 60px;height: 60px;background-color: #fff;border-radius: 50%;box-shadow: inset 0 -15px 20px rgba(0, 0, 0, 0.5);animation: animateBall 2.5s linear infinite;
}@keyframes animateBall {0%,100% {/* 控制小球的动画起始位置和结束位置,必须和皮筋开始时的位置保持一致,具体可以调整参数来实现 */transform: translateY(-72.5px);}10%,11.5% {transform: translateY(-40px);}50% {transform: translateY(-350px);}
}

完成上述代码后就可以完成所有效果。

完整代码下载

完整代码下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/304546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nodejs 第六十二章(短链接)

短链接介绍 短链接是一种缩短长网址的方法&#xff0c;将原始的长网址转换为更短的形式。它通常由一系列的字母、数字和特殊字符组成&#xff0c;比起原始的长网址&#xff0c;短链接更加简洁、易于记忆和分享。 短链接的主要用途之一是在社交媒体平台进行链接分享。由于这些…

人工智能:更多有用的 Python 库

​ 目录 推荐 JupyterLab 入门 复杂的矩阵运算 其它人工智能和机器学习的 Python 库 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 在进入主题之前&#xff0c;我们先讨论几个人…

利用Sentinel解决雪崩问题(二)隔离和降级

前言&#xff1a; 虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。而要将这些故障控制在一定范围避免雪崩&#xff0c;就要靠线程隔离(舱壁模式)和熔断降级手段了&#xff0c;不管是线程隔离还是熔断降级&#xff0c;都是对客户端(调…

太赫兹探测器是太赫兹技术应用核心器件之一 我国研究成果不断增多

太赫兹探测器是太赫兹技术应用核心器件之一 我国研究成果不断增多 太赫兹探测器&#xff0c;是太赫兹&#xff08;THz&#xff09;应用的基础&#xff0c;是太赫兹成像、太赫兹通信等系统的核心器件&#xff0c;其性能直接决定太赫兹系统的优劣&#xff0c;地位极为重要&#x…

2024年同城网总流量全新生态,个人工作室落地式游戏玩法,单账户月入3万

我要为大家解读的是本地生活新项目&#xff0c;这个业务模式中&#xff0c;即使是低收入的玩法&#xff0c;一个月赚取万儿八千也是完全可行的。而高收入的玩法&#xff0c;一单的收入甚至能超过一万。目前&#xff0c;你的圈子里已经有一些同行业的人开始以个人工作室的形式去…

【机器学习】数学基础详解

线性代数&#xff1a;构建数据的骨架 数学对象 标量&#xff08;Scalar&#xff09; 标量是最基本的数学对象&#xff0c;代表了单个的数值&#xff0c;无论是整数还是实数。在机器学习中&#xff0c;标量可以用来表示一个模型的单个参数&#xff0c;如偏差&#xff08;bias&…

Collection与数据结构 Stack与Queue(二):队列与Queue

1. 队列 1.1 概念 只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾&#xff08;Tail/Rear&#xff09; 出队列&#xff1a;进行删除操作…

免费https详细教程

简单叙述一下https的定义和实现https的一些基本作用&#xff0c;然后会给到申请SSL证书的方式以及安装部署流程&#xff0c;最终实现网站的https访问。 随着互联网的快速发展&#xff0c;网络安全问题日益凸显。在互联网上传输敏感信息、进行在线交易和共享个人数据时&#xf…

09 Php学习:数组和排序

数组概念 在PHP中&#xff0c;数组是一种复合数据类型&#xff0c;用于存储多个值。以下是关于PHP数组的详细解释&#xff1a; 索引数组&#xff1a;索引数组是最基本的数组类型&#xff0c;其中每个元素都有一个唯一的数字索引&#xff0c;从0开始递增。 关联数组&#xff…

Qt for MCUs 2.7正式发布

本文翻译自&#xff1a;Qt for MCUs 2.7 released 原文作者&#xff1a;Qt Group高级产品经理Yoann Lopes 翻译&#xff1a;Macsen Wang Qt for MCUs的新版本已发布&#xff0c;为Qt Quick Ultralite引擎带来了新功能&#xff0c;增加了更多MCU平台的支持&#xff0c;并且我们…

概率论基础——拉格朗日乘数法

概率论基础——拉格朗日乘数法 概率论是机器学习和优化领域的重要基础之一&#xff0c;而拉格朗日乘数法与KKT条件是解决优化问题中约束条件的重要工具。本文将简单介绍拉格朗日乘数法的基本概念、应用以及如何用Python实现算法。 1. 基本概念 拉格朗日乘数法是一种用来求解…

Golang 开发实战day08 - Multiple Return values

&#x1f3c6;个人专栏 &#x1f93a; leetcode &#x1f9d7; Leetcode Prime &#x1f3c7; Golang20天教程 &#x1f6b4;‍♂️ Java问题收集园地 &#x1f334; 成长感悟 欢迎大家观看&#xff0c;不执着于追求顶峰&#xff0c;只享受探索过程 Golang 教程08 - Multiple R…

第⑬讲:OSD硬盘故障处理实战:从诊断到恢复的全流程指南

文章目录 1.OSD坏盘更换操作2.判断OSD是否出现故障的思路3.模拟osd.5故障4.OSD故障更换硬盘流程4.1.将故障的osd.5从集群中删除4.1.1.从OSD Map中将故障的OSD删除4.1.2.从Crush Map中将故障的OSD删除4.1.3.在OSD列表中将故障的OSD删除4.1.4.将故障的OSD认证信息删除4.1.5.验证集…

羊大师带你了解春季喝羊奶有什么好处

在春季&#xff0c;随着大自然的苏醒&#xff0c;人们的生活方式也逐渐转向更加活跃和健康的模式。在众多健康习惯中&#xff0c;饮用羊奶成为了一个流行的选择&#xff0c;因其独特的营养价值和健康益处受到了广泛关注。羊奶不仅富含高质量的蛋白质和必需氨基酸&#xff0c;还…

用html实现一个动态的文字框

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>一个动态的文字框动画</title><link rel"stylesheet" href"./style.css"></head> <body> <link rel…

计算机视觉 | 基于 ORB 特征检测器和描述符的全景图像拼接算法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本项目实现了基于 ORB 特征检测器和描述符的全景图像拼接算法&#xff0c;能够将两张部分重叠的图像拼接成一张无缝连接的全景图像。 文章目录 一、随机抽样一致算法二、功能实现三、代码解析四、效果展示五、完整代码 一、随机…

MySQL-创建和管理表:基础知识、创建和管理数据库、创建表、修改表、重命名表、删除表、清空表、拓展

创建和管理表 1. 基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 MySQL中的数据类型 2. 创建和管理数据库2.1 创建数据库2.2 使用数据库2.3 修改数据库2.4 删除数据库 3. 创建表3.1 创建方式13.2 创建方式23.3 查看数据表结构 4. 修改表4.1 追加一个列4.2 修改一个列4.3…

卷积神经网络(CNN)的数学原理解析

文章目录 前言 1、介绍 2、数字图像的数据结构 3、卷积 4、Valid 和 Same 卷积 5、步幅卷积 6、过渡到三维 7、卷积层 8、连接剪枝和参数共享 9、卷积反向传播 10、池化层 11、池化层反向传播 前言 本篇主要分享卷积神经网络&#xff08;CNN&#xff09;的数学原理解析&#xf…

解决 OpenERP v7 中的报告问题

在 OpenERP v7 中&#xff0c;报告问题可能涉及多个方面&#xff0c;包括报告模板的设计、数据源的配置、报告生成的逻辑等。然后再我们日常使用中还是会遇到各种各样的问题&#xff0c;那么如果出现下面的错误&#xff0c;可以尝试用我的解决方案。 1、问题背景 在使用 OpenE…

微服务-2 Eureka

Eureka 启动页面&#xff1a; 同理再注册完order-service后&#xff0c;刷新启动页面&#xff1a; userservice 启动多台服务&#xff1a; [ 代码 ]&#xff1a;orderService.java&#xff08;用 RestTemplate 调其他服务&#xff0c;用 userservice 代替 localhost:8081&…