CSS3图片上下移动的动画效果

                             CSS3图片上下移动的动画效果

开发工具与关键技术:Adobe Dreamweaver CC 2018
作者:昨夜星辰
撰写时间:2019年1月17日

下面我们使用Adobe Dreamweaver CC 2018来实行CSS3中的动画效果,
以及输出的截图:
一.实现CSS3上下移动的效果的,首先创建一个div把你要移动的样式放进去,再设计div的宽度,大小,移动的距离。
CSS3图片上下移动的动画效果_第1张图片
二.给div设计基本的样式,宽度,高度,基本的样式,opacity是图片的透明样式,animation是移动动画的样式,在多少秒时间内完成,animation-direction:alternate是设计图片是否应该轮流反向播放动画。
CSS3图片上下移动的动画效果_第2张图片
三.创建动画必须用的动画函数,实现动画的左右或上下移动的代码。Transform:translateY是顺着y轴的方向移动, Transform:translateX是顺着x轴的方向移动.
CSS3图片上下移动的动画效果_第3张图片

你可能感兴趣的:(技术总结)