animation css 透明度逐渐_基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般。 这里提供另外一个思路,即通过预先定义好的css样式控制图片透明度的过渡, 这种方法过渡平滑,过渡的效果基于css3的animation,所以效率高些。 思路是将淡入,淡出的效果做成预先定义好的样式类,然后用JS改变元素的类来达到图片轮播。(注意:因为是基于CSS3的animation,在移动端做的兼容性测试表现不错,桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好,外链图片有时会有问题。)
基于CSS3淡入淡出效果的图片自动轮播DEMO
关键点在于fadeIn和fadeOut之间的透明度切换:
/* 轮播图片默认的样式*/
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
opacity:0;
filter:alpha(opacity=0);
}
.fadein{
opacity:100;
filter:alpha(opacity=100);
}
PS:轮播图片默认透明度为0,设置一个opacity=100名为fadein的类使用JS控制其与默认透明度的切换,本篇博客的轮播方法是自动的一张张切换,并无交互性, 使用触控左右滑动图片的轮播请猛戳俺的另一篇博客:原生JS实现滑动图片轮播
而JS方面则是通过获取imgs数组,轮播其中存放图片的div, 方法是控制图片div的class。
废话不多说,上代码:
HTML(后插入的图片显示在前):
CSS:
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
opacity:0;
}
#bg1 {
background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
background-size: cover;
}
#bg2 {
background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
background-size: cover;
}
.fadein {
opacity: 100;
filter: alpha(opacity=100);
}
JS:
// 替换class达到淡入淡出的效果
function fadeIn(e) {
e.className = "bg fadein"
};
function fadeOut(e) {
e.className = "bg"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
var imgs = document.getElementById("imgs").children;
if (cur_img == 0) {
fadeOut(imgs[cur_img]);
cur_img = imgs.length - 1;
fadeIn(imgs[cur_img]);
} else {
fadeOut(imgs[cur_img]);
fadeIn(imgs[cur_img - 1]);
cur_img--;
}
}
//设置轮播间隔
setInterval(turnImgs, 3000);
demo中只用了两张图片,如果需要插入更多的图片,可以在id=“imgs”的div中加入一个新的子div ,class加上bg即可,然后在CSS中加入该div的描述,比如HTML中加入
#bg3 {
background: url(图片地址) no-repeat;
background-size: cover;
}
即可。
animation css 透明度逐渐_基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果相关推荐
- 基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般. 这里提供另外一个思路,即通过预先定义好的cs ...
- animation css 透明度逐渐_CSS实现透明度变化的动画 (淡入淡出效果)
本文我们将使用CSS来实现透明度发生变化的动画,可以获得淡入和淡出效果. 要实现CSS中透明度更改的动画,需要使用的是transition属性.由于transition属性是CSS3中的新增属性,因此 ...
- 导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
- 天空飘彩带的css3代码_纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
- python画菊花_使用css3实现小菊花加载效果
使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
- java做橡皮擦效果_基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下 这是基础结构 没什么好说的 ? Document *{padding: 0;margin ...
- animation动画不生效_关于CSS3的animation使用的一些坑,需要注意下!
CSS3的animation实在是让人爱不释手,越用越觉得离不开了.较高的性能以及和js的逻辑无关性,可以专注于动画效果本身,真的很不错,尤其在手机上,只需主要考虑webkit内核的,更是爽,但随着使 ...
- css 边缘闪光_纯css3闪烁动画《发光的边框效果》
纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...
- vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
最新文章
- 月薪 5 万清华姚班 NOI 金牌得主在线征友被群嘲,当代互联网相亲有多难
- SCCM 2012系列1 服务器准备上
- iOS开发UI篇—UITableviewcell的性能优化和缓存机制
- 032_jQuery Ajax的load方法
- vue中使用checkbox
- c++制表符_在Linux命令行中将制表符(tab)转换为空格
- 分析函数在数据分析中的应用
- matlab 传感器的迟滞,MATLAB PI迟滞模型问题
- 5款创业在线学习的工具
- Python模块selenium实例:电影分类排名数据生成json,sqlite和excel(openpyxl)文件(二)
- 如何设计神经网络结构,如何设计一个神经网络
- quartz2.2.3 spring整合遇到的错误,及quartz配置文件说明
- leveldb的sstable-ldb解析
- Oracle数据库基础教程
- 粒子系统模拟-计算机图形学 豆瓣,粒子系统
- 回车符与换行符的区别
- 大四实习两个月的体会
- 有哪一刻你彻底恨上了你的老师?
- C# 文本转语音朗读
- Flutter开发(二十九):Flutter热重启、热加载、调试与发布应用
热门文章
- 盘点CSV文件在Excel中打开后乱码问题的两种处理方法
- 文本超出省略号、css三角形、画虚线边框、修改输入框placeholder样式、修改滚动条样式、css实现优惠券
- 贪心算法-2.找钱问题
- 【Python】《Python网络爬虫权威指南》第三章任务:验证六度分隔理论
- c语言母亲节算法,用Excel推算母亲节日期,能理解最后一种算法的是高手!
- 元宇宙地产演化史:从文本时代到区块链时代
- 数独题 HDU - 1426
- mysql时间自动填充_Mysql自动设置时间(自动获取时间,填充时间)
- 怎么把图片做成pdf文件?
- 如何添加Cydia源?如何通过Cydia下载软件?如何卸载软件?