css上下浮动动画效果

比如有一个非gif的导向箭头，需要微微浮动提示用户具体操作导向，用css去写，实现方法如下：

1、首先创建一个dom元素，controller是包裹导向箭头的容器，img是导向箭头图片

<div class="controller"><img src="xxxx" alt="">
</div>

2、css中创建动画，动画的快慢速度可以通过元素高度与animation中的秒数去调整

.controller {position: absolute;width: 24px;height: 12px;z-index: 100;bottom: 20px;left: 50%;margin-left: -12px;-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite;img {position: absolute;}}@-webkit-keyframes bounce-down {25% {-webkit-transform: translateY(-4px);}50%, 100% {-webkit-transform: translateY(0);}75% {-webkit-transform: translateY(4px);}
}@keyframes bounce-down {25% {transform: translateY(-4px);}50%, 100% {transform: translateY(0);}75% {transform: translateY(4px);}
}

交流

共同进阶学习

学习之余，大家一起来薅羊毛喽，各取所需。

css上下浮动动画效果相关推荐

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
CSS animate动画效果
1.CSS动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它 ...
是谁，在敲打我窗-CSS雨滴动画效果
1.扯闲篇是谁在敲打我窗是谁在撩动琴弦那一段被遗忘的时光渐渐地回升出我心坎是谁在敲打我窗是谁在撩动琴弦记忆中那欢乐的情景慢慢地浮现在我的脑海那缓缓飘落的小雨不停地打在我 ...
前端CSS卡片动画效果的实现
先来看看具体效果图如下: HTML代码如下: <!DOCTYPE html> <html> <head><title>[每日一练]CSS产品卡片动画效果 ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
一文搞懂css 2D动画效果
文章目录前言一.过渡动画效果简述 transition: 1.代码示例 2.效果展示二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
如何在html网页中利用css实现动画效果
animation动画 1.@keyframes 定义关键帧动画以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 1 ...

css上下浮动动画效果

交流

css上下浮动动画效果相关推荐

最新文章

热门文章