css3 - 图标元素动画效果5 - 弹性动画效果

最新推荐文章于 2021-11-04 17:34:21 发布

erdouzhang

最新推荐文章于 2021-11-04 17:34:21 发布

阅读量1.1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/71405074

版权

本文介绍了如何使用CSS3创建一种图标元素动画效果，即图标在达到终点后不会立即停止，而是会继续超过终点并反向回到终点，形成弹性往复的动画。通过速度曲线（贝塞尔曲线）可以更简便地实现这种效果。

摘要由CSDN通过智能技术生成

在线演示（刷新一下动画效果明显）

让图标运动到终点时，并非减速停止在终点，而是到达终点后继续向上运动，超过一定距离后再反方向运动到终点，形成一种往复的效果。
我们可以使用帧动画来实现这样的效果，但是如果使用速度曲线（贝塞尔曲线）将更为简便。

这里写图片描述

html：

<div class="box icon1">
 <i class="fa fa-home fa-4x"></i>
</div>
<div class="box  icon2">
  <i class="fa fa-search fa-4x"></i>
</div>
<div class="box icon3">
  <i class=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

erdouzhang

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

一. CSS3 动画效果和弹性伸缩布局以及页面制作

Night_798的博客

05-15

675

一．属性详解 1. 在讲解动画属性之前，先创建一个基本的样式。 //一个 div 元素 <div>我是 HTML5</div> //设置 CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步，先...

CSS3弹性展开动画导航菜单代码.zip

07-04

CSS3弹性展开动画导航菜单代码是一款动画效果不错的网站导航菜单特效下载。

参与评论您还未登录，请先登录后发表或查看评论

css弹性动画效果

hello_realWorld的博客

09-15

1502

需要使用到贝塞尔：：：transition:.55s cubic-bezier(0.6, 4, 0.3, 0.8) all;

html弹跳特效,有趣的纯CSS3弹性卡通小怪物弹跳动画特效

weixin_29122445的博客

06-07

274

这是一款使用纯CSS3制作的非常有趣的卡通小怪物弹跳动画特效。该CSS3特效中有三个卡通小怪物，它们在不停的上下弹跳，并且各自的身体也带有一些弹性效果。使用方法HTML结构每一个卡通小怪物的HTML结构都基本相似，使用嵌套来构成怪物的身体。例如蓝色怪物的HTML结构为：CSS样式所有的小怪物都会执行一个bounce帧动画，该动画用于制作小怪物身体的弹性动画效果。.item {width: 200p...

CSS3可展开收缩的弹性动画菜单

08-23

这次我们要为大家分享一款炫酷实用的CSS3菜单，这款菜单的特点是可以展开和收缩菜单项，并且在展开和收缩的过程中伴随弹性的动画特效，而且展开和收缩的按钮也会出现一些炫酷的动画特效。这款CSS3弹性动画菜单比较适合个性化的个人博客中使用。

CSS3 动画效果

Yan 小铁匠

07-30

720

CSS3 @keyframes 规则要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 CSS3的...

纯CSS3弹性果冻动画特效.zip

07-11

在实际应用中，"纯CSS3弹性果冻动画特效"可以被用在各种网页元素上，如按钮、图标或者背景，以提升用户体验，吸引用户的注意力。然而，需要注意的是，虽然CSS3动画能增强网站的视觉吸引力，但过度使用或不恰当使用...

纯CSS3 Loading动画图标.rar_css loading 动画_nounva4_纯CSS3 Loading动画图标_蓝

09-15

纯CSS3 Loading动画图标是一种利用CSS3特性实现的动态加载效果，主要应用于网站或应用的加载界面，以展示数据正在加载的过程，同时增加用户界面的交互性和视觉吸引力。本资源包含10组不同设计风格的蓝色Loading动画...

jquery和CSS3带弹性动画效果的工具栏菜单特效代码

03-22

这是一款使用jquery和CSS3制作的带弹性动画效果的工具栏菜单特效。该工具栏菜单默认只显示一个圆形按钮，单点击按钮时，子菜单项会以弹性动画展开，效果非常炫酷。使用方法在页面中引入jquery和字体图标文件font-...

CSS3弹性展开网站动画导航菜单特效.zip

07-11

CSS3弹性展开网站动画导航菜单特效

css3动画图标效果

10-31

css3动画图标效果 css3动画图标效果 css3动画图标效果

HTML5CSS3图片左右切换弹性动画

10-20

这个一个使用HTML5、CSS3、javascript实现图片左右切换弹性动画的代码，动画切换时很酷炫，适合新手学习，欢迎下载，有什么疑问，可以私聊我哟~~~~~~~

不可错过的16个纯CSS3动画小图标

08-23

一提起图标，大家可能第一个会想到PS、美工等词语，你是否相信所有的小图标都可以使用CSS3实现，不管是简单的图标还是复杂带动画的图标，对CSS3来说都不是问题。这次我们给大家分享16个基于纯CSS3绘制的小图标，有几个还带有鼠标滑过动画特效，喜欢CSS3喜欢前端的你一定不可以错过，也可以分享给你的朋友。

纯CSS3鼠标经过按钮背景填充动画特效

09-08

纯CSS3鼠标经过按钮背景填充动画特效

纯CSS3弹性果冻动画特效特效代码

03-20

【CSS3弹性果冻动画特效】是一种利用现代浏览器支持的CSS3特性实现的创新视觉效果。这个特效通过结合CSS3的动画（Animations）和变换（Transforms）属性，创造出一种仿佛果冻般的动态效果，物体在屏幕上进行圆周运动...

CSS元素Q弹动画效果

qq_42031498的博客

06-18

489

.my-div:hover { animation: elasticity 1s linear; } /* Q弹动画关键帧 */ @keyframes elasticity { 0% { transform: matrix3d(0.92, 0, 0, 0, 0, 0.92, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { transform: matrix3d(0.938, 0, 0, 0, 0, 0.9..

CSS3.0（过渡、动画、弹性盒、响应式）总结（2）

m0_63851202的博客

11-04

203

过渡属性 transition:属性时间延迟时间效果 property duration delay timing-function 过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all 动画属性定义动画： @keyframes 动画名｛from{} 50%{} to{}｝使用动画： animation:动画名时间延迟时间效果次数交替停止停在哪一帧动画时间及延迟 animation-duration/delay：s/ms 动画效果属...

css弹性动画

qq_39148344的博客

07-10

1790

通过css让生硬的动画变得更加自然效果图：我们知道没一个物体运动都有一个运动轨迹，例如上面的小球是模拟的弹簧运动从而让动画更加自然，而上图的运动轨迹图如下：（easeOutElastic）我们就可以根据这个动画曲线得到他每个时间点的位置就形成了动画常用的运动曲线 https://easings.net/好像是要安全上网才可以访问我们随便点击一个（easeOutElastic）进去注意：参数x表示运行的进度我们会得到这样的一个公式，我们就可以通过这个公.