<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片切换效果</title>
<link rel="stylesheet" href="static/css/normalize.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="static/picture/photo-1498307833015-e7b400441eb8.jpg" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Postcards From Italy</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="static/picture/photo-1491900177661-4e1cd2d7cce2.jpg" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Bunker</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="static/picture/photo-1482192505345-5655af888cc4.jpg" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Small Mountain</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="static/picture/photo-1564604761388-83eafc96f668.jpg" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Walking On a Dream</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
<div class="slider-buttons">
<button class="swiper-button-prev">Prev</button>
<button class="swiper-button-next">Next</button>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- partial -->
<script src='static/js/swiper-bundle.min.js'></script>
<script src="static/js/script.js"></script>
</body>
</html>
html卡片切换动画效果.rar
版权申诉
72 浏览量
2023-10-01
23:41:02
上传
评论
收藏 3.41MB RAR 举报
html卡片切换动画效果.rar （15个子文件） 
hjiaoben158 
index.html 2KB static picture 
photo-1482192505345-5655af888cc4.jpg 764KB photo-1564604761388-83eafc96f668.jpg 739KB photo-1491900177661-4e1cd2d7cce2.jpg 918KB photo-1498307833015-e7b400441eb8.jpg 928KB font 
JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2 23KB JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2 8KB JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2 25KB JTUSjIg1_i6t8kCHKm459Wlhyw.woff2 30KB JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2 20KB js swiper-bundle.min.js 137KB script.js 386B css style.css 4KB css2.css 3KB normalize.min.css 2KB资源评论
