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

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

html 复制代码
<!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>

效果展示

相关推荐
西洼工作室4 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
软件技术NINI5 小时前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
前端Hardy7 小时前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF7 小时前
Streamlit:CSS——从基础到实战美化应用
前端·css
Hilaku8 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
Darenm1119 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
小白640210 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
吃饺子不吃馅10 小时前
大家都在找的手绘/素描风格图编辑器它它它来了
前端·javascript·css
Zhencode10 小时前
CSS变量的应用
前端·css
又是忙碌的一天1 天前
前端学习day01
前端·学习·html