简单方法通过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>
效果展示
