css动画动态箭头

其实非常简单,在CSS3中提供了animation属性,专门用于动画。要使用这个属性,需要先了解@keyframes的创建规则,在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
在这个动画中,我们能够看出在整个动画中改变的是箭头的位置,所以我们在创建动画时,只需要给定箭头的起始位置,利用animation让他动起来就可以了。
接下来,我们一步一步完成。
1、 首先找到你所需要的箭头图片,将他利用定位的方式放在首屏的底部。
a) html代码(将图片以背景或者插入图片的形式放入标签内,demo以背景形式展示)

HTML代码

b) css代码(利用定位将箭头放在首屏的底部适当位置,网站中大部分情况会进行左右居中)

CSS定位


2、 然后进行动画创建,最简单的方式就是只给定初始的以及结束的css样式即可。
css 代码

CSS创建动画

标注出来的为动画的自定义名称,可以根据你的动画行为来定义。
0%为初始状态,即刚开始动画时。
100%为结束状态,即动画进行到100%时。
动画改变了箭头的底部位置,由距离底部80像素变到了距离底部0像素。

3、 接下来利用animation属性让他具有动画效果
css代码:

第一个参数表示你所使用的动画的名称(即我们创建的动画的动画名称),
第二个参数表示动画完成的时间(即由0%到100%所用的时间),
第三个参数表示动画执行的次数(可以为任意数字,infinite表示规定动画无限次播放),因此造成了一个动态的箭头的视觉效果。


通过以上三个步骤即可完成这个简单的动画效果,很多的动画效果都可以通过创建动画的方式来实现。

猜你喜欢

转载自blog.csdn.net/ToBeBestPlayer/article/details/83653117