Js特效旋转图片展示加图片虚化cid1058-html css 网页前端设计

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="glide.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="glide.core.min.css">
    <link rel="stylesheet" href="glide.theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="images glide">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          <li class="glide__slide">
            <img src="images/1.png" alt="">
          </li>

          <li class="glide__slide">
            <img src="images/2.png" alt="">
          </li>

          <li class="glide__slide">
            <img src="images/3.png" alt="">
          </li>

          <li class="glide__slide">
            <img src="images/4.png" alt="">
          </li>

          <li class="glide__slide">
            <img src="images/5.png" alt="">
          </li>

          <li class="glide__slide">
            <img src="images/6.png" alt="">
          </li>
        </ul>
      </div>

      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fas fa-arrow-left"></i></button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fas fa-arrow-right"></i></button>
      </div>
    </div>

    <script>
      new Glide(".images",{
        type: 'carousel',
        perView: 5,
        focusAt: 'center',
        gap: 40,
        breakpoints: {
          1200:{
            perView: 3
          },
          800:{
            perView: 2
          }
        }
      }).mount();
    </script>
  </body>
</html>

css

body{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #333;
}

.glide__slide img{
  width: 100%;
}

.glide__slide{
  filter: blur(6px);
  opacity: .7;
  transition: .3s linear;
}

.glide__slide--active{
  opacity: 1;
  filter: none;
  transform: scale(1.1);
}

.glide__slides{
  overflow: visible;
}

在线演示


让链接同时具备两种打开方式
获取源码: Images Carousel
下载数:171人次, 文件大小: 3.0 MB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,831 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付