html5 css3恐怖灵异动画页面特效



174 693 232



特效描述: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

加群请备注:从官网了解到