怎样使用css动画animation实现静态箭头图片上下摆动

使用css动画animation实现静态箭头图片上下摆动

在项目中我遇到了一个需求，让静态箭头图片上下摆动，一开始我也想过使用transition，但是transition并不满足需求，因为transition是需要手动的触发，而且不能无限次执行下去，所以我用了animation。

要是求这样：

这里的图片是我用视频在线上工具转的，所以有水印（请谅解）

下面是示例：

<style>div{width: 200px;height: 200px;}img{margin: 50px auto;display: block;animation: example .8s infinite linear;}@keyframes example {0% {transform: translateY(0);}25% {transform: translateY(-10px);}50% {transform: translateY(0);}75% {transform: translateY(10px);}100% {transform: translateY(0);}}
</style>
<body><div><img src="./arrows.png" alt=""></div>
</body>

这样就可以完成所需的要求了，本来想备上上面转gif图片的视频，然后它不支持（苦笑）

怎样使用css动画animation实现静态箭头图片上下摆动相关推荐

css动画animation详细解读
以一个小球为例向右匀速运动200px 然后再移动回来,然后再移动到200px处停在那里效果如下 div{width:40px;height:40px;border-radius:50%; ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
HTML5 CSS动画 animation使用
首先看一下页面的布局 <body><div class="box1"><div class="box2"></div& ...
css动画 animation
今天用css做了一个简单的三角上下移动的一个小动画,说白了就是在改变该物体的height值.除了这个方法,还可以用js. 一.在用css写动画时,一定要记住兼容性问题.如何解决该兼容性?在前面加内核前 ...
css动画 animation
1. 线性渐变线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色 ...
css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
使用HTML+CSS动画属性让鼠标放在图片上让图片动起来
效果图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
css动画实现鼠标经过，图片放大效果
浏览器实现效果: 自己在浏览器实现时当鼠标移上图片有放大效果代码实现: <!DOCTYPE html> <html lang="en"> <head ...
CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

怎样使用css动画animation实现静态箭头图片上下摆动

使用css动画animation实现静态箭头图片上下摆动

怎样使用css动画animation实现静态箭头图片上下摆动相关推荐

最新文章

热门文章