devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Guff_9hys | 2024-07-27 07:03:29

赞

踩

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>水面倒影</title>
  8. </head>
  9. <style>
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.         background-color: black;
  14.         overflow: hidden;
  15.     }
  16.  
  17.     :root {
  18.         
  19.         --url1: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01ad51c404cedd035b.jpg');
  20.         --url2: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01c1a45e5e8cd59ed1.jpg');
  21.  
  22.         --url4: url('https://p1.ssl.qhimgs1.com/sdr/400__/t0476de4a34f088a8a7.jpg');
  23.         --url5: url('https://p1.ssl.qhimgs1.com/sdr/400__/t04a17109704054cb5b.jpg');
  24.         --url6: url('https://p2.ssl.qhimgs1.com/sdr/400__/t03e8c2d4c1fba3f1c2.jpg');
  25.         --url7: url('https://p0.ssl.qhimgs1.com/sdr/400__/t01801242cf98b4c440.jpg');
  26.         --url8: url('https://p2.ssl.qhimgs1.com/sdr/400__/t0439d69c47c0d7c0e8.jpg');
  27.  
  28.     }
  29.  
  30.     body {
  31.  
  32.         box-sizing: border-box;
  33.         position: relative;
  34.         overflow: hidden;
  35.         z-index: -1;
  36.  
  37.     }
  38.  
  39.  
  40.     .boxa {
  41.         position: relative;
  42.         margin: 0;
  43.         padding: 0;
  44.         width: 100vw;
  45.         height: 500px;
  46.         display: flex;
  47.         justify-content: center;
  48.         align-items: center;
  49.  
  50.         background-color: transparent;
  51.         z-index: 1;
  52.  
  53.  
  54.  
  55.     }
  56.  
  57.     div:not(.boxa):not(.void):hover {
  58.         transform: translateZ(200px) translateY(10px) rotateY(20deg);
  59.         perspective: 1000px;
  60.         -webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  61.         box-shadow: 0 0 20px 0 rgba(225, 136, 41, 0.5),
  62.             0 0 25px 0 rgba(7, 229, 29, 0.5),
  63.             0 0 30px 0 rgba(214, 46, 184, 0.5);
  64.     }
  65.  
  66.  #t1:active {
  67.     transform: translateX(600px) scale(2);
  68.     box-shadow: 0 0 20px 10px rgba(134, 198, 237, 1),
  69.                 0 0 25px 15px rgba(3, 250, 213, 1),
  70.                 0 0 30px 20px rgba(244, 3, 39, 1);
  71.     
  72.    
  73. }
  74.  
  75. #t2:active {
  76.     transform: translateX(400px) scale(2);
  77.     box-shadow: 0 0 20px 10px rgba(255, 165, 0, 1),
  78.                 0 0 25px 15px rgba(255, 0, 255, 1),
  79.                 0 0 30px 20px rgba(0, 255, 0, 1);
  80.    
  81. }
  82.  
  83. #t3:active {
  84.     transform: translateX(200px) scale(2);
  85.     box-shadow: 0 0 20px 10px rgba(0, 0, 255, 1),
  86.                 0 0 25px 15px rgba(255, 0, 0, 1),
  87.                 0 0 30px 20px rgba(0, 255, 255, 1);
  88.    
  89. }
  90.  
  91. #t4:active {
  92.     transform: scale(2);
  93.     box-shadow: 0 0 20px 10px rgba(128, 0, 128, 1),
  94.                 0 0 25px 15px rgba(255, 255, 0, 1),
  95.                 0 0 30px 20px rgba(0, 128, 128, 1);
  96.    
  97. }
  98.  
  99. #t5:active {
  100.     transform: translateX(-200px) scale(2);
  101.     box-shadow: 0 0 20px 10px rgba(128, 128, 0, 1),
  102.                 0 0 25px 15px rgba(128, 0, 0, 1),
  103.                 0 0 30px 20px rgba(0, 128, 0, 1);
  104.     
  105. }
  106.  
  107. #t6:active {
  108.     transform: translateX(-400px) scale(2);
  109.     box-shadow: 0 0 20px 10px rgba(0, 0, 0, 1),
  110.                 0 0 25px 15px rgba(255, 255, 255, 1),
  111.                 0 0 30px 20px rgba(128, 128, 128, 1);
  112.    
  113. }
  114.  
  115. #t7:active {
  116.     transform: translateX(-600px) scale(2);
  117.     box-shadow: 0 0 20px 10px rgba(255, 255, 128, 1),
  118.                 0 0 25px 15px rgba(128, 255, 255, 1),
  119.                 0 0 30px 20px rgba(255, 128, 128, 1);
  120.   
  121. }
  122.  
  123.  
  124.     .test1 {
  125.  
  126.  
  127.         overflow: hidden;
  128.         width: 200px;
  129.         height: 300px;
  130.         background-image: var(--url1);
  131.         background-repeat: no-repeat;
  132.         background-position: center;
  133.         background-size: cover;
  134.         border: 2px solid rgb(255, 255, 255);
  135.  
  136.  
  137.     }
  138.  
  139.     .test2 {
  140.  
  141.  
  142.         overflow: hidden;
  143.         width: 200px;
  144.         height: 300px;
  145.         background-image: var(--url2);
  146.         background-repeat: no-repeat;
  147.         background-position: center;
  148.         background-size: cover;
  149.         border: 2px solid rgb(255, 255, 255);
  150.     }
  151.  
  152.     .test3 {
  153.  
  154.  
  155.  
  156.         overflow: hidden;
  157.         width: 200px;
  158.         height: 300px;
  159.         background-image: var(--url4);
  160.         background-repeat: no-repeat;
  161.         background-position: center;
  162.         background-size: cover;
  163.         border: 2px solid rgb(255, 255, 255);
  164.     }
  165.  
  166.     .test4 {
  167.  
  168.  
  169.         overflow: hidden;
  170.         width: 200px;
  171.         height: 300px;
  172.         background-image: var(--url5);
  173.         background-repeat: no-repeat;
  174.         background-position: center;
  175.         background-size: cover;
  176.         border: 2px solid rgb(255, 255, 255);
  177.     }
  178.  
  179.     .test5 {
  180.  
  181.  
  182.         overflow: hidden;
  183.         width: 200px;
  184.         height: 300px;
  185.         background-image: var(--url6);
  186.         background-repeat: no-repeat;
  187.         background-position: center;
  188.         background-size: cover;
  189.         border: 2px solid rgb(255, 255, 255);
  190.     }
  191.  
  192.     .test6 {
  193.  
  194.  
  195.         overflow: hidden;
  196.         width: 200px;
  197.         height: 300px;
  198.         background-image: var(--url7);
  199.         background-repeat: no-repeat;
  200.         background-position: center;
  201.         background-size: cover;
  202.         border: 2px solid rgb(255, 255, 255);
  203.     }
  204.  
  205.     .test7 {
  206.  
  207.  
  208.         overflow: hidden;
  209.         width: 200px;
  210.         height: 300px;
  211.         background-image: var(--url8);
  212.         background-repeat: no-repeat;
  213.         background-position: center;
  214.         background-size: cover;
  215.         border: 2px solid rgb(255, 255, 255);
  216.     }
  217.  
  218.     .void {
  219.         top: -16vh;
  220.         z-index: 0;
  221.         position: relative;
  222.         width: 100vw;
  223.         height: 500px;
  224.         background-image: url("https://p3.ssl.qhimgs1.com/sdr/400__/t011d51db67bfe62a1d.gif");
  225.         background-repeat: no-repeat;
  226.         background-position: center;
  227.         background-size: cover;
  228.         opacity: 0.5;
  229.  
  230.  
  231.     }
  232. </style>
  233.  
  234. <body>
  235.     <div id="box" class="boxa">
  236.         <div id="t1" class="test1"></div>
  237.         <div id="t2" class="test2"></div>
  238.         <div id="t3" class="test3"></div>
  239.         <div id="t4" class="test4"></div>
  240.         <div id="t5" class="test5"></div>
  241.         <div id="t6" class="test6"></div>
  242.         <div id="t7" class="test7"></div>
  243.  
  244.     </div>
  245.     <div class="void">显示图片</div>
  246.  
  247.  
  248. </body>
  249.  
  250. </html>

效果展示 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/889132
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号