SVG图像变形过渡轮播图

1、新建html文档。

2、书写hmtl代码。

<main>

<div class="content content--fixed">

<header class="codrops-header">

<h1 class="codrops-header__title">Animated Frame Slideshow</h1>

</header>

<nav class="demos">

<svg class="icon icon--keyboard"><use xlink:href="#icon-keyboard"></use></svg>

<a class="demo" href="#"><span>Demo 1</span></a>

<a class="demo demo--current" href="index2.html"><span>Demo 2</span></a>

<a class="demo" href="#"><span>Demo 3</span></a>

<a class="demo" href="#"><span>Demo 4</span></a>

<a class="demo" href="#"><span>Demo 5</span></a>

<a class="demo" href="#"><span>Demo 6</span></a>

</nav>

</div>

<div class="slideshow">

<div class="slides">

<div class="slide slide--current">

<div class="slide__img" style="background-image: url(img/9.jpg);"></div>

<h2 class="slide__title">Relax</h2>

<p class="slide__desc">Find out why so many travelers always come back.

<a class="slide__link" href="#">Explore destinations</a>

</div>

<div class="slide">

<div class="slide__img" style="background-image: url(img/10.jpg);"></div>

<h2 class="slide__title">Unwind</h2>

<p class="slide__desc">Untouched natural beauty makes this place unique.

<a class="slide__link" href="#">Adventure yourself</a>

</div>

<div class="slide">

<div class="slide__img" style="background-image: url(img/11.jpg);"></div>

<h2 class="slide__title">Wallow</h2>

<p class="slide__desc">Leave society behind and indulge yourself in tranquility.

<a class="slide__link" href="#">Discover calmness</a>

</div>

<div class="slide">

<div class="slide__img" style="background-image: url(img/12.jpg);"></div>

<h2 class="slide__title">Revel</h2>

<p class="slide__desc">Discover great activities with breathtaking views.

<a class="slide__link" href="#">Find out more</a>

</div>

</div>

<nav class="slidenav">

<button class="slidenav__item slidenav__item--prev">Previous</button>

<span>/</span>

<button class="slidenav__item slidenav__item--next">Next</button>

</nav>

</div>

</main>

3、书写css代码。

 @media screen and (min-width: 55em) {

.demos { display: flex; justify-self: end; }

.demo { display: block; width: 17px; height: 17px; margin: 0 4px; border-radius: 50%; background: var(--color-link); }

a.demo--current { background: var(--color-link-hover); }

.demo span { line-height: 1; position: absolute; right: 100%; display: none; margin: 0 1em 0 0; }

.demo--current span { display: block; }

}

 @media screen and (max-width: 55em) {

body { padding: 0 0 4em 0; }

.content { flex-direction: column; height: auto; min-height: 0; padding-bottom: 10em; }

.content--fixed { position: relative; z-index: 1000; display: block; padding: 0.85em; }

.codrops-header { flex-direction: column; align-items: center; }

.codrops-header__title { font-weight: bold; padding-bottom: 0.25em; text-align: center; }

.github { display: none; }

.codrops-links { margin: 0; }

.slide__desc { font-size: 1em; }

.slide__link { font-size: 0.85em; }

}

4、书写并添加js代码。

<script src="js/imagesloaded.pkgd.min.js"></script>

<script src="js/ani.min.js"></script>

5、代码整体结构。

6、查看效果。