特效描述：利用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>

下载地址

立即下载

1.《HTML5全屏图片文字过渡切换特效代码》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《HTML5全屏图片文字过渡切换特效代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/focus/356.html