2021-06-11

最新推荐文章于 2022-02-14 09:25:29 发布

是酷婷呀～

最新推荐文章于 2022-02-14 09:25:29 发布

阅读量91

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46446321/article/details/117812865

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

制作个人相册

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>我的个人相册</title>    <style>	 *{              padding: 0;              margin: 0;              border: none;              outline: none;              box-sizing: border-box;          }          *:before,*:after{              box-sizing: border-box;          }           html {            height: 100%;            width: 100%;            overflow: hidden;            background: url(images/background2.jpg) no-repeat 0px 0px;            background-repeat: no-repeat;            background-size: 100% 100%;            -moz-background-size: 100% 100%;        }                 body {            height: 85%;            display: flex;            align-items: center;        }         .Container{              margin: 4% auto;              width: 240px;              height: 150px;              position: relative;              perspective: 1000px;          }           #show_jpg{              width: 100%;              height: 100%;              position: absolute;              transform-style:preserve-3d;              animation: rotation 20s infinite linear;          }           #show_jpg:hover{              animation-play-state: paused;          }           img:hover{             filter: grayscale(30%);           transform: scale(-1,1);         }          #show_jpg figure{              display: block;             position: absolute;              width: 140px;              height: 210px;              left: 10px;              top: 10px;                overflow: hidden;              border: solid 1px white;          }                  img{              cursor: pointer;              transition:all 0.3s ease 0s;              width: 140px;              height: 210px;          }           #show_jpg figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}          #show_jpg figure:nth-child(2) { transform: rotateY(50deg) translateZ(288px);}          #show_jpg figure:nth-child(3) { transform: rotateY(100deg) translateZ(288px);}          #show_jpg figure:nth-child(4) { transform: rotateY(150deg) translateZ(288px);}          #show_jpg figure:nth-child(5) { transform: rotateY(200deg) translateZ(288px);}          #show_jpg figure:nth-child(6) { transform: rotateY(250deg) translateZ(288px);}          #show_jpg figure:nth-child(7) { transform: rotateY(300deg) translateZ(288px);}          @keyframes rotation{              from{                  transform: rotateY(0deg);              }              to{                  transform: rotateY(360deg);              }          }   	</style>    <script>        window.οnlοad=function(){            var showimg = document.getElementById('show');        }    </script></head><body >    <p id="show"></p>	 <div class="Container">        <div id="show_jpg">             <figure><img src="images/1.jpg" ></figure>			<figure><img src="images/2.jpg"></figure>              <figure><img src="images/3.jpg" ></figure>              <figure><img src="images/4.jpg" ></figure>              <figure><img src="images/5.jpg"></figure>              <figure><img src="images/6.jpg" ></figure>             <figure><img src="images/7.jpg" ></figure>         </div>      </div> </body></html>