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
下载数:273人次, 文件大小: 3.0 MB, 上传日期: 2020年-11月-26日
公众号回复:gcode 获取解压密码
4,388 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 8元 才能查看此处内容！立即支付
