animationcss透明度逐渐_基于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;
js控制css3动画触发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-size: cover;
}
#bg2 {
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 = ElementById("imgs").children.length - 1; //图⽚轮播函数
function turnImgs(imgs) {
var imgs = ElementById("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;
}
即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。