HTML 相册2.0 通过css 获取图片资源 2024/7/22 日志

news2024/11/24 7:25:59

简单方法通过css 绕过同源策略以获取资源

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水面倒影</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        background-color: black;
        overflow: hidden;
    }

    :root {
        
        --url1: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01ad51c404cedd035b.jpg');
        --url2: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01c1a45e5e8cd59ed1.jpg');

        --url4: url('https://p1.ssl.qhimgs1.com/sdr/400__/t0476de4a34f088a8a7.jpg');
        --url5: url('https://p1.ssl.qhimgs1.com/sdr/400__/t04a17109704054cb5b.jpg');
        --url6: url('https://p2.ssl.qhimgs1.com/sdr/400__/t03e8c2d4c1fba3f1c2.jpg');
        --url7: url('https://p0.ssl.qhimgs1.com/sdr/400__/t01801242cf98b4c440.jpg');
        --url8: url('https://p2.ssl.qhimgs1.com/sdr/400__/t0439d69c47c0d7c0e8.jpg');

    }

    body {

        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        z-index: -1;

    }


    .boxa {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: transparent;
        z-index: 1;



    }

    div:not(.boxa):not(.void):hover {
        transform: translateZ(200px) translateY(10px) rotateY(20deg);
        perspective: 1000px;
        -webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
        box-shadow: 0 0 20px 0 rgba(225, 136, 41, 0.5),
            0 0 25px 0 rgba(7, 229, 29, 0.5),
            0 0 30px 0 rgba(214, 46, 184, 0.5);
    }

 #t1:active {
    transform: translateX(600px) scale(2);
    box-shadow: 0 0 20px 10px rgba(134, 198, 237, 1),
                0 0 25px 15px rgba(3, 250, 213, 1),
                0 0 30px 20px rgba(244, 3, 39, 1);
    
   
}

#t2:active {
    transform: translateX(400px) scale(2);
    box-shadow: 0 0 20px 10px rgba(255, 165, 0, 1),
                0 0 25px 15px rgba(255, 0, 255, 1),
                0 0 30px 20px rgba(0, 255, 0, 1);
   
}

#t3:active {
    transform: translateX(200px) scale(2);
    box-shadow: 0 0 20px 10px rgba(0, 0, 255, 1),
                0 0 25px 15px rgba(255, 0, 0, 1),
                0 0 30px 20px rgba(0, 255, 255, 1);
   
}

#t4:active {
    transform: scale(2);
    box-shadow: 0 0 20px 10px rgba(128, 0, 128, 1),
                0 0 25px 15px rgba(255, 255, 0, 1),
                0 0 30px 20px rgba(0, 128, 128, 1);
   
}

#t5:active {
    transform: translateX(-200px) scale(2);
    box-shadow: 0 0 20px 10px rgba(128, 128, 0, 1),
                0 0 25px 15px rgba(128, 0, 0, 1),
                0 0 30px 20px rgba(0, 128, 0, 1);
    
}

#t6:active {
    transform: translateX(-400px) scale(2);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 1),
                0 0 25px 15px rgba(255, 255, 255, 1),
                0 0 30px 20px rgba(128, 128, 128, 1);
   
}

#t7:active {
    transform: translateX(-600px) scale(2);
    box-shadow: 0 0 20px 10px rgba(255, 255, 128, 1),
                0 0 25px 15px rgba(128, 255, 255, 1),
                0 0 30px 20px rgba(255, 128, 128, 1);
  
}


    .test1 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url1);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);


    }

    .test2 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url2);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .test3 {



        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url4);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .test4 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url5);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .test5 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url6);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .test6 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url7);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .test7 {


        overflow: hidden;
        width: 200px;
        height: 300px;
        background-image: var(--url8);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid rgb(255, 255, 255);
    }

    .void {
        top: -16vh;
        z-index: 0;
        position: relative;
        width: 100vw;
        height: 500px;
        background-image: url("https://p3.ssl.qhimgs1.com/sdr/400__/t011d51db67bfe62a1d.gif");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.5;


    }
</style>

<body>
    <div id="box" class="boxa">
        <div id="t1" class="test1"></div>
        <div id="t2" class="test2"></div>
        <div id="t3" class="test3"></div>
        <div id="t4" class="test4"></div>
        <div id="t5" class="test5"></div>
        <div id="t6" class="test6"></div>
        <div id="t7" class="test7"></div>

    </div>
    <div class="void">显示图片</div>


</body>

</html>