网页特效--图片淡入淡出效果

1.通过CSS实现图片淡入淡出效果：

主要是应用到了CSS3的动画特效中的animation-delay来打一个时间差，首先将第一张图片的opacity(透明度)设置为1，其他的图片则设置为0，在设置动画时长时根据你要显示的时间(如2s)，则设置动画时长为2s x 图片张数，我的则是10s，相应的animation-delay则是从第一张为0开始，依次+2递增；

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{padding: 0;margin: 0;}
        #wrapper{width: 170px;height: 120px;margin: 30px auto;}
        .imgList li{position: absolute;list-style: none;}
        .imgList li img{width: 170px; height: 120px;}
        #image1{
            opacity: 1;
            z-index: 5;
            animation: turn 10s linear infinite;
            -webkit-animation: turn 10s linear infinite;
            -o-animation: turn 10s linear infinite;
            -moz-animation: turn 10s linear infinite;
            }
        #image2{
            opacity: 0;
            z-index: 4;
            animation: turn 10s linear 2s infinite;
            -webkit-animation: turn 10s linear 2s infinite;
            -o-animation: turn 10s linear 2s infinite;
            -moz-animation: turn 10s linear 2s infinite;
        }
        #image3{
            opacity: 0;
            z-index: 3;
            animation: turn 10s linear 4s infinite;
            -webkit-animation: turn 10s linear 4s infinite;
            -o-animation: turn 10s linear 4s infinite;
            -moz-animation: turn 10s linear 4s infinite;
        }
        #image4{
            opacity: 0;
            z-index: 2;
            animation: turn 10s linear 6s infinite;
            -webkit-animation: turn 10s linear 6s infinite;
            -o-animation: turn 10s linear 6s infinite;
            -moz-animation: turn 10s linear 6s infinite;
        }
        #image5{
            opacity: 0;
            z-index: 1;
            animation: turn 10s linear 8s infinite;
            -webkit-animation: turn 10s linear 8s infinite;
            -o-animation: turn 10s linear 8s infinite;
            -moz-animation: turn 10s linear 8s infinite;
        }
        /*淡入淡出动画*/
        @keyframes turn{
            10%{opacity: 1;}
            20%{opacity: 0.2;}
            25%{opacity: 0;}
            100%{opacity: 0;}
        }
        @-o-keyframes turn{
            10%{opacity: 1;}
            20%{opacity: 0.2;}
            25%{opacity: 0;}
            100%{opacity: 0;}
        }
        @-moz-keyframes turn{
            10%{opacity: 1;}
            20%{opacity: 0.2;}
            25%{opacity: 0;}
            100%{opacity: 0;}
        }
        @-webkit-keyframes turn{
            10%{opacity: 1;}
            20%{opacity: 0.2;}
            25%{opacity: 0;}
            100%{opacity: 0;}
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="banner">
            <ul class="imgList">
                <li><a href="javascript:void(0)"><img src="./img/01.jpg" id="image1"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/02.jpg" id="image2"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/03.jpg" id="image3"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/04.jpg" id="image4"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/05.jpg" id="image5"/></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

2.通过JavaScript来实现淡入淡出：

主要是通过js中的setTimeout()函数与setInterval()函数实现的，通过setTimeout()函数不同的延迟时间来调用改变透明度的函数startMove()，而在startMove()函数中则有setInterval()函数定时地减小透明度；

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{padding: 0;margin: 0;}
        #wrapper{width: 170px;height: 120px;margin: 30px auto;}
        .imgList li{position: absolute;list-style: none;}
        .imgList li img{width: 170px; height: 120px;}
        #image1{opacity: 1;}
        #image2,#image3,#image4,#image5{opacity: 0;}       
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="banner">
            <ul class="imgList">
                <li><a href="javascript:void(0)"><img src="./img/01.jpg" id="image1"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/02.jpg" id="image2"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/03.jpg" id="image3"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/04.jpg" id="image4"/></a></li>
                <li><a href="javascript:void(0)"><img src="./img/05.jpg" id="image5"/></a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        function startMove(img, source, target) {
            var speed = -0.1 ;
            var flag = source;
            var obj = document.getElementById(img);
            obj.timer = null;
            //初始化,清除定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (flag <= target) {
                    clearInterval(obj.timer);
                    setTimeout(function () {
                        startMove(img,1,0);
                    }, 7000);
                } else {
                    flag +=speed
                    obj.style.opacity =  flag;
                }
            }, 200);
        }
        setTimeout(function () {startMove('image1', 1, 0.1);}, 0);
        setTimeout(function () { startMove('image2', 1, 0.1); }, 1800);
        setTimeout(function () { startMove('image3', 1, 0.1); }, 3600);
        setTimeout(function () { startMove('image4', 1, 0.1); }, 5400);
        setTimeout(function () { startMove('image5', 1, 0.1); }, 7200);
    }
</script>
</html>

实现效果的GIF图如下：

网页特效--图片淡入淡出效果

猜你喜欢