不用JS，只用CSS3实现图片轮播、悬停、蒙版等效果

最新推荐文章于 2022-10-26 10:53:25 发布

finedayforu

最新推荐文章于 2022-10-26 10:53:25 发布

阅读量340

点赞数 1

本文链接：https://blog.csdn.net/finedayforu/article/details/104154622

版权

做蒙版时遇到点小问题，既如何选择非hover的兄弟元素；几经折腾才发现，原来:not（x）选择器不仅可以传class和ID 还可以传伪类选择器 (不错的收获)

最终效果：

Document

5秒平滑轮播（图片随便找的，很渣）

鼠标悬停蒙版

此页面还画了一个立方体，可以删除掉

代码：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: cadetblue;
        }
        .cube{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotate3d(1,1,0,-30deg);

        }
        .cube>div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.8;
        }
        .front{
            background-color: red;
            transform: translate3d(0,0,100px);
        }
        .back{
            background-color: #bbb;
            transform: translate3d(0,0,-100px) rotate3d(0,1,0,180deg);
        }
        .left{
            background-color: hotpink;
            transform: rotate3d(0,1,0,90deg) translate3d(0,0,-100px);
        }
        .right{
            background-color: green;
            transform: rotate3d(0,1,0,90deg) translate3d(0,0,100px);
        }
        .top{
            background-color: skyblue;
            transform: rotate3d(1,0,0,90deg)  translate3d(0,0,100px);
        }
        .bottom{
            background-color: orange;
            transform: rotate3d(1,0,0,270deg)  translate3d(0,0,100px);
        }
        .ad{
            width: 600px;
            height: 200px;
            background-color: black;
            animation-name: addRoll;
            animation-duration: 10s;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .ul{
            width: 2000px;
        }
        .ul>img{
            float: left;
            height: 200px;
        }
        .ad>.ul{
            animation-name: roll;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        @keyframes roll{
            0%{
                transform:translate(0px);
            }
            100%{
                transform:translate(-800px);
            }
        }
        .ad:hover>.ul{
            animation-play-state: paused;
        }
        
        .ad:hover>.ul>img:not(:hover){
            opacity:0.5;
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
    <div class="ad">
        <div class="ul">
                <img src="image/1.jpg" alt="">
                <img src="image/2.jpg" alt="">
                <img src="image/3.jpg" alt="">
                <img src="image/4.jpg" alt="">
                <img src="image/1.jpg" alt="">
                <img src="image/2.jpg" alt="">
                <img src="image/3.jpg" alt="">
                <img src="image/4.jpg" alt="">
        </div>

    </div>
</body>
</html>