HTML5全屏图片文字过渡切换特效代码

森淼留学 2019-11-19 100 阅读

特效描述:利用HTML5实现 全屏图片 文字过渡 切换特效,利用HTML5实现全屏图片文字过渡切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />

<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

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

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

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

<script src="js/demo.js"></script>

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

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

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

<script src="js/demo.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading demo-1">
<main>
<div class="deco deco--bg"></div>
<div class="deco deco--shape deco--shape-hor deco--shape-1"></div>
<div class="deco deco--shape deco--shape-hor deco--shape-2"></div>
<div class="slideshow">
<div class="slide">
<div class="slide__image" style="background-image:url(img/1.jpg)"></div>
<h2 class="slide__title">Masupitami</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/2.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Waldorfian</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/3.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Hindsberg</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/4.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Kitschmas</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/5.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Friendlein</h2>
</div>
<nav class="nav">
<button class="nav__button nav__button--pvious">Previous</button>
<button class="nav__button nav__button--next">Next</button>
</nav>
</div>
</main>
</body>
</html>

演示地址下载地址

最新游戏