HTML CSS实现 轮播图 遮罩层

目录

轮播图

 遮罩层

---

轮播图

轮播图：顾名思义，轮流播放的广告图。它是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着互联网的发展，网页中需要推广的信息越来越多，宣传信息都欲占据黄金位置，最后相互妥协，轮播图应运而生。总而言之，轮播图就是可以切换的一块信息。 

//css 代码
.main {
            
             border: 2px solid black;
            position: absolute;
            z-index: -1;
            width: 400px;
            height: 200px;
        }
         .container1{
        width: 100%;
        overflow: hidden;
    }
    .photo{
        width:200%;
        animation: move 3s linear infinite;
        display: flex;
    }
    .photo img{
        width: 100%;
        height: 200px;
    }
     @keyframes move{
        0%{
            margin-left:0;
        }
        50%{
            margin-left: -100%;
        }
        100%{
            margin-left: -100%;
        }
    }

//HTML 代码
<div clas