念念不忘
必有回响

B站网页特效学习 — 自适应相册

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

自适应相册演示:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自适应相册</title> <link href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <style> * { margin: 0; padding: 0; font-family: 'montserrat', sans-serif; box-sizing: border-box; } .gallery-section { width: 100%; padding: 60px 0; background: #f1f1f1; } .inner-width { width: 100%; max-width: 1200px; margin: auto; padding: 0 20px; } .gallery-section h1 { text-align: center; text-transform: uppercase; color: #333; } .border { width: 180px; height: 4px; background: #333; margin: 60px auto; } .gallery-section .gallery { display: flex; flex-wrap: wrap-reverse; justify-content: center; } .gallery-section .image { flex: 25%; overflow: hidden; cursor: pointer; } .gallery-section .image img { width: 100%; height: 100%; transition: 0.4s; } .gallery-section .image:hover img { transform: scale(1.4) rotate(15deg); } @media screen and (max-width: 960px) { .gallery-section .image { flex: 33.33%; } } @media screen and (max-width: 768px) { .gallery-section .image { flex: 50%; } } @media screen and (max-width: 480px) { .gallery-section .image { flex: 100%; } } </style> </head> <body> <div class="gallery-section"> <div class="inner-width"> <h1>My Gallery</h1> <div class="border"></div> <div class="gallery"> <a href="../images/71.jpg" class="image"> <img src="../images/71.jpg" alt="" /> </a> <a href="../images/93.jpg" class="image"> <img src="../images/93.jpg" alt="" /> </a> <a href="../images/104.jpg" class="image"> <img src="../images/104.jpg" alt="" /> </a> <a href="../images/114.jpg" class="image"> <img src="../images/114.jpg" alt="" /> </a> <a href="../images/156.jpg" class="image"> <img src="../images/156.jpg" alt="" /> </a> <a href="../images/171.jpg" class="image"> <img src="../images/171.jpg" alt="" /> </a> <a href="../images/264.jpg" class="image"> <img src="../images/264.jpg" alt="" /> </a> <a href="../images/265.jpg" class="image"> <img src="../images/265.jpg" alt="" /> </a> </div> </div> </div> <script> $('.gallery').magnificPopup({ delegate: 'a', type: 'image', gallery: { enabled: true } }) </script> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 自适应相册
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址