方法:1、使用“图像元素{动画:名称和时间}”语句将滑动动画绑定到图像元素上; 2、使用“@keyframes name{0%{transform:translateX(-sliding distance)}}”语句设置滑动动画让图片逐渐滑入并出现。
本教程的运行环境:windows10系统,CSS3&&HTML5版本,DellG3笔记本。
如何用css使图片滑动
在css中可以利用animation属性和@keyframes规则来实现滑动图片的效果。 只有通过@keyframes规则才能创建动画。
动画属性句型如下:
animation: name duration timing-function delay iteration-count direction;
在:
创建动画的原理就是将一组CSS样式逐渐改变为另一组样式。 您可以在动画过程中多次更改这组 CSS 样式。
以比率或通过关键字“from”和“to”指定发生变化的时间css3图片闪动,它们相当于 0% 和 100%。 0%是动画的开始时间css3图片闪动,100%是动画的结束时间。 为了获得最佳的浏览器支持,您仍然应该定义 0% 和 100% 选择器。
还有一个transform属性,用来设置滑动图片的动作。 变换属性将 2D 或 3D 变换应用于元素。 该属性允许我们旋转、缩放、移动或倾斜元素。
示例如下:
Document img{ animation:fadenum 5s; } @keyframes fadenum{ 0%{transform:translateX(-420px);} }
输出结果: