css实现三维立体照片墙流动动画效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现三维立体照片墙流动动画效果代码,鼠标悬浮停顿。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; /********************************************/ /********************************************/ /* Please ❤ this if you like it! */ /* Follow Me https://codepen.io/designfenix */ /********************************************/ /********************************************/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ :root { --duration: 15s; } body { background: #f7f7f7; overflow: hidden; } .wrapper-images { display: flex; flex-direction: column; height: 150vh; justify-content: center; left: 50%; position: absolute; top: 50%; opacity: 0.8; transform: translate3d(-50%, -50%, 0) perspective(800px) rotatey(-10deg) rotate(10deg); } .images-line { -webkit-animation: runner var(--duration) linear infinite; animation: runner var(--duration) linear infinite; display: flex; transform: translateX(23%); } .images-line:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .images-line .line { background-position: 50% 50%; background-size: cover; flex: none; height: 20vh; margin: clamp(15px, 3vw, 30px); width: 20vh; position: relative; transition: ease-in-out all 0.3s; } .images-line .line .img { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background-position: 50% 50%; background-size: cover; transition: ease-in-out all 0.3s; } .images-line .line:hover .img { cursor: pointer; transform: scale(1.1) translatez(0px); } .images-line .line:hover:after { filter: blur(35px) opacity(0.8); } .images-line .line:after { content: ""; background: inherit; display: block; width: 100%; height: 100%; border-radius: 50%; top: 3vh; position: absolute; background-size: cover; z-index: -1; transition: ease-in-out all 0.3s; filter: blur(25px) opacity(0.8); } @-webkit-keyframes runner { to { transform: translateX(-10.4%); } } @keyframes runner { to { transform: translateX(-10.4%); } } </style> </head> <body> <div class="wrapper-images"> <!-- 5 images by row --> <div class="images-line"> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> </div> <!-- 5 images by row --> <div class="images-line"> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> </div> <!-- 5 images by row --> <div class="images-line"> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)">as</div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"> <div class="img" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90)"></div> </div> <div class="line" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m.........完整代码请登录后点击上方下载按钮下载查看
网友评论0