html5 css3恐怖靈異動畫頁面特效



180 719 240



特效描述:html5 css3動畫頁面特效,html5 css3頁面故障恐怖靈異動畫效果。適用于404頁面動畫特效。

代碼結構

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/demo1.css" />
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/demo1.css" />

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/imagesloaded.pkgd.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>CSS Glitch Effect | Demo 1</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="demo-1 loading">
		<main>
			<div class="message">Sorry, your browser does not support clip-path on HTML elements!</div>
			<div class="content content--fixed">
				<nav class="demos">
					<a class="demo demo--current" href="index.html"><span>Demo 1</span></a>
					<a class="demo" href="index2.html"><span>Demo 2</span></a>
					<a class="demo" href="index3.html"><span>Demo 3</span></a>
				</nav>
			</div>
			<div class="content">
				<div class="glitch">
					<div class="glitch__img"></div>
					<div class="glitch__img"></div>
					<div class="glitch__img"></div>
					<div class="glitch__img"></div>
					<div class="glitch__img"></div>
				</div>
				<h2 class="content__title">Haunted</h2>
				<p class="content__text">Evening was in the wood, louring with storm. A time of drought had sucked the weedy pool  and baked the channels; birds had done with song.</p>
			</div>
		</main>
	</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片切換 圖片選項卡 圖標選項卡 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子