下载鸥 > 网站下载 > 开发教程 > JS/JQuery

css实现图片从左到右滑入并淡入的特效

191 2022-08-10 02:36:45

收藏
css实现图片从左到右滑入并淡入的特效要怎么实现呢?

如果直接通过css3的left属性,实现的滑动效果并不丝滑。此时,如果给图片加入父级,效果就变得流畅。
 

html代码

<div class="slidepro-container>
	<img src="static/images/pic2-1.png" alt="">
	<div class="slidepro-show">
		<img src="static/images/pic2-2.png" alt="">
	</div>
</div>
 

css代码

.slidepro-container{
    position:relative;
}
.slidepro-container .slidepro-show{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    height:100%;
    overflow: hidden;
}
.slidepro-container .slidepro-show img{
    width:auto;
    height:100%;
}
.slidepro-container:hover .slidepro-show{
    animation: loading .3s linear forwards;
    -webkit-animation:loading .3s linear forwards;
    -moz-animation:loading .3s linear forwards;
    -o-animation:loading .3s linear forwards;
    -ms-animation:loading .3s linear forwards;
}
@keyframes loading {
    0% {left:0;width:0; opacity:0}
   100% {left: 0;width:100%;opacity:1}
}
 

实现原理

图片宽度跟随爷爷集,初始即为100%,父级宽度为0,并隐藏图片。随着动画展开,父级宽度加宽,图片随之展示实现动画效果。
 

附注

注意多个图片的尺寸问题。

这样,就通过css3实现了图片滑入的效果。

本文地址:https://xzo.com.cn/develop/js/1103.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 433
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 339
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 265
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 280
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 292
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 352
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1301
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 334
随机JS/JQuery开发教程
swiper.js轮播时自动切换对应信息模块
swiper.js轮播时自动切换对应信息模块

swiper是一款非常好用的兼容pc+手机端轮播插件。大多数时候,如果要做视觉切...

0 162
CSS3怎样简单实现循环旋转效果?
CSS3怎样简单实现循环旋转效果?

css3动画已经走进了大大小小的网站,曾经只能用js实现的动画,也可以通过css3实...

0 174
键盘左右键进行上一页下一页翻页
键盘左右键进行上一页下一页翻页

上一页下一页按钮如果用鼠标点击,由于位置一直变化,体验不是很好。今天鸥哥就...

0 228
animate.css在线调试,支持直接复制样式名
animate.css在线调试,支持直接复制样式名

animate.css在线调试,支持直接复制样式名...

0 339
怎样用css3让多行文字垂直居中于父元素?
怎样用css3让多行文字垂直居中于父元素?

我们都知道,css属性vertical-align:middle的作用是垂直居中。但前提是单行文...

0 184
jQuery点击按钮触发表单提交
jQuery点击按钮触发表单提交

在常见的form表单中,我们可以通过button进行表单提交,也可以使用input提交,此...

0 220
js判断图片加载失败时自动显示默认图片onerror
js判断图片加载失败时自动显示默认图片onerror

页面图片加载失败是一个比较常见的bug,图片位置挪动、图片服务器过期、链接...

0 217
js输入页码并跳转到指定分页怎么做?
js输入页码并跳转到指定分页怎么做?

网站分页用于将数据分开,但在一些极端的场景,如用户需要找到指定时间段的信息...

0 94
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入