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

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

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

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

猜你喜欢

转载自blog.csdn.net/weixin_44538151/article/details/86636503