基于CSS3实现淡入（fadeIn）淡出（fadeOut）效果

XUI 发布于2019-08-21 10:36 / 2517人阅读

摘要：网上的淡入淡出效果大多是依照中和的方法使用来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。思路是将淡入，淡出的效果做成预先定义好的样式类，然后用改变元素的类来达到图片轮播。

网上的淡入淡出效果大多是依照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中加入

，然后CSS中则加入

#bg3 {
  background: url(图片地址) no-repeat;
  background-size: cover;
}

即可。

云服务器 GPU云服务器淡出淡入淡入淡出淡入淡出显示 html页面淡入淡出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85855.html

jQuery动画特效

摘要：可选的参数规定效果的时长，它可以取以下值，或毫秒。五其他核心方法中停止动画方法用于停止动画或效果，在它们完成之前。默认是，即仅停止活动的动画，运行任何排入队列的动画向后执行。这些动画不会开始，知道第一个完成。本文主要跟大家分享jQuery隐藏与显示（hide，show，toggle）上卷与下拉（slideDown，slideUp,slideToggle）淡入淡出（fadeOut，...

张迁 2019-08-22 10:54 评论0 收藏0
jQuery操作之效果

摘要：，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的事件。用选择器选中第二个，给它绑定事件，现在是显示的，它会在一秒钟之内慢慢的隐藏，实现淡出效果。，通过不透明度的变化来实现所有匹配元素的淡出效果。效果如下，，关闭页面上所有的动画。 jQuery操作之效果效果操作一共分五类：1.基本，2.滑动，3.淡入淡出，4.自定义，5.设置showImg(https://segmentfa...

seal_de 2019-08-21 11:47 评论0 收藏0
回味jQuery系列（2）-动画效果

摘要：参数代表回调函数。参数为变化样式的对象必传，速度可选，回调函数可选。这是，肯定会想到采用回调函数来解决。确实可以解决问题，但是当列队动画变多时，回调函数的可读性大大降低确实一个非常烦人的问题。提供了一个类似于回调函数的方法。 jQuery-动画效果浅析动画可以给网站的用户体验加分，让网页更加活泼。不过，什么东西都需要适量，简易快捷的动画会给网站加分不少。比如购物网站的个人中心按钮ho...

IamDLY 2019-08-20 10:33 评论0 收藏0
自己整理的css3动画库，附下载链接

摘要：动画以低速开始，然后加快，在结束前变慢。在函数中自己的值。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数：动画名称如：bounceIn 一周期所用时间如：0.3s 速度曲线如：ease 值描述 linear 动画从头...

Darkgel 2019-04-23 14:38 评论0 收藏0
读Zepto源码之fx_methods模块

摘要：所以模块依赖于模块，在引入前必须引入模块。原有的方法分析见读源码之样式操作方法首先调用原有的方法，将元素显示出来，这是实现动画的基本条件。如果没有传递，或者为值，则表示不需要动画，调用原有的方法即可。 fx 模块提供了 animate 动画方法，fx_methods 利用 animate 方法，提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块，在引入 fx_m...

junbaor 2019-08-21 16:59 评论0 收藏0