当前位置：首页 > 技术博客 > HTML > 404错误页源码，纸张撕裂动画效果

404错误页源码，纸张撕裂动画效果

2年前 (2023-07-07)HTML754 

<html>    
<head>    
<meta charset="UTF-8">    
<title>Ripped 404 Page Animation</title>    
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&amp;display=swap'>
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,45%);
	--primary-down: hsl(var(--hue),90%,65%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 Nunito, sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	display: grid;
	grid-gap: 3em 1.5em;
	margin: auto;
	max-width: 40em;
	padding: 3em 0;
	text-align: center;
	width: calc(100% - 3em);
}
h1 {
	font-size: 3em;
	line-height: 1;
	margin: 0 0 1.5rem;
}
p {
	margin: 0 0 1.5em;
}
.btn-link {
	background: var(--primary);
	border-radius: 1.5em;
	display: inline-block;
	outline: transparent;
	padding: 0.75em 1.5em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s linear;
}
.btn-link,
.btn-link:visited {
	color: hsl(0,0%,100%);
}
.btn-link:focus-visible,
.btn-link:hover {
	background: var(--primary-down);
}
.btn-link:hover {
	text-decoration: none;
}
.paper {
	display: block;
	margin: auto;
	overflow: visible;
	width: 100%;
	max-width: 224px;
	height: auto;
}
.paper__fill {
	fill: hsl(0,0%,100%);
}
.paper__outline,
.paper__lines {
	transition: stroke var(--trans-dur);
}
.paper__outline {
	stroke: hsl(var(--hue),10%,10%);
}
.paper__lines {
	stroke: hsl(var(--hue),10%,70%);
}
.paper__shadow {
	fill: hsl(var(--hue),10%,70%);
	transition: fill var(--trans-dur);
}
.paper__top,
.paper__bottom,
.paper__tear,
.paper__tear-fill {
	animation: paperTop 1.25s cubic-bezier(0.77,0,0.18,1);
}
.paper__top,
.paper__bottom {
	transform-origin: 0 148px;
	transition: transform var(--trans-dur) cubic-bezier(0.77,0,0.18,1);
}
.paper__top {
	transform: translate(0,8px);
}
.paper__bottom {
	animation-name: paperBottom;
	transform: translate(0,42px);
}
.paper__tear,
.paper__tear-fill {
	animation-timing-function: cubic-bezier(0.32,0,0.67,0);
}
.paper__tear {
	animation-name: paperTear;
	stroke-dashoffset: 0;
}
.paper__tear-fill {
	animation-name: paperTearFill;
}
.paper__outline:hover .paper__top,
.paper__outline:hover .paper__bottom {
	transform: translate(0,25px);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,25%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.paper__shadow:first-child {
		fill: hsl(var(--hue),10%,15%);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	main {
		grid-template-columns: 1fr 2fr;
		align-items: center;
		text-align: left;
	}
	.paper {
		max-width: 300px;
	}
}

/* Animations */
@keyframes paperTop {
	from,
	40% {
		animation-timing-function: cubic-bezier(0.32,0,0.67,0);
		transform: translate(0,25px) rotate(0);
		transform-origin: 61px 148px;
	}
	70% {
		animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
		transform: translate(0,25px) rotate(-5deg);
		transform-origin: 61px 148px;
	}
	to {
		transform: translate(0,8px) rotate(0);
		transform-origin: 0 148px;
	}
}
@keyframes paperBottom {
	from,
	40% {
		animation-timing-function: cubic-bezier(0.32,0,0.67,0);
		transform: translate(0,25px) rotate(0);
		transform-origin: 61px 148px;
	}
	70% {
		animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
		transform: translate(0,25px) rotate(5deg);
		transform-origin: 61px 148px;
	}
	to {
		transform: translate(0,42px) rotate(0);
		transform-origin: 0 148px;
	}
}
@keyframes paperTear {
	from,
	40% {
		stroke-dashoffset: -198;
	}
	70%,
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes paperTearFill {
	from,
	40% {
		width: 187px;
	}
	70%,
	to {
		width: 0;
	}
}</style>
</head>    
<body>  
<main>    
	<div>    
		<svg class="paper" viewBox="0 0 300 300" width="300px" height="300px" role="img" aria-label="A piece of paper torn in half">    
			<g class="paper__outline" fill="none" stroke="hsl(0,10%,10%)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" transform="translate(61,4)">    
				<g class="paper__top" transform="translate(0,25)">    
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138" transform="translate(-12,12)" />    
					<rect class="paper__tear-fill" fill="hsl(0,0%,100%)" stroke="none" x="0" y="137" width="0" height="23px" />    
					<polygon class="paper__fill" fill="hsl(0,0%,100%)" stroke="none" points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138" />    
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="137 0,132 55,187 50,142 45" />    
					<polyline points="137 0,142 45,187 50" />    
					<polyline points="0 148,0 0,137 0,187 50,187 148" />    
					<g class="paper__lines" stroke="hsl(0,10%,70%)">    
						<polyline points="22 88,165 88" />    
						<polyline points="22 110,165 110" />    
						<polyline points="22 132,165 132" />    
					</g>    
					<polyline class="paper__tear" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148" stroke-dasharray="198 198" stroke-dashoffset="-198" />    
				</g>    
				<g class="paper__bottom" transform="translate(0,25)">    
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148,187 242,0 242" transform="translate(-12,12)" />    
					<polygon class="paper__fill" fill="hsl(0,0%,100%)" stroke="none" points="0 148,31 140,62 148,93 138,124 148,155 138,187 148,187 242,0 242" />    
					<polyline points="187 148,187 242,0 242,0 148" />    
					<g class="paper__lines" stroke="hsl(0,10%,70%)">    
						<polyline points="22 154,165 154" />    
						<polyline points="22 176,165 176" />    
						<polyline points="22 198,94 198" />    
					</g>    
					<polyline class="paper__tear" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148" stroke-dasharray="198 198" stroke-dashoffset="-198" />    
				</g>    
			</g>    
		</svg>    
	</div>    
	<div>    
		<h1>404</h1>    
		<p>您要查找的页面可能已被移动，或者根被删除。</p>    
		<a class="btn-link" href="/">返回首页</a>    
	</div>    
</main>
</body>    
</html>


版权声明：本文由 LzxBlog 发布，如需转载请注明出处。

本文链接：https://www.liuzhixi.cn/html/293.html

返回列表

上一篇：全屏响应式的图文幻灯片轮播特效(淡入淡出效果)

下一篇：拟态登录html模板

相关文章

简洁的牙科整形医院官网HTML5模板

简洁的牙科整形医院官网HTML5模板

一款绿色简约风格的牙科诊所，牙齿整形医院网站响应式模板。使用bootstrap框架搭建，您可以很容易地定制修改这套模板。下载链接: https://pan.ba...

3D炫酷元素周期表源码

3D炫酷元素周期表源码

3D 超炫 化学周期表 可改作信息栏 导航图 以及图片墙！ 左键旋转 滚轮缩放 右键移动下载链接: https://pan.baidu.com/s/1aHJI-...

蓝色系的个人简历HTML5模板

蓝色系的个人简历HTML5模板

一个简单、现代、富有创意和响应式的个人简历介绍HTML5单页模板。这个模板可用于创意设计师，摄影师，开发人员，或任何职业。它是完全定制的，你可以很容易地改变背景...

多用途服装销售电商HTML模板

多用途服装销售电商HTML模板

一款多用途的服装类电子商务HTML模板。它是非常适合销售时装店，时装，T恤店，服装店铺商城模板。此模板包含：首页、博客页、购物车页、个人中心和ui列表页面。设计...

bootstraps响应式健康医疗护理类网站模板

bootstraps响应式健康医疗护理类网站模板

简约大气的jQuery bootstraps响应式健康医疗护理类网站模板下载链接: https://pan.baidu.com/s/11l38ZnQEjcpWQ...

人生倒计时HTML源码

人生倒计时HTML源码

灵感来源于一个叫Joe的emlog主题，强调一下：只是灵感抄袭，代码绝对没有任何抄袭！补充：Joe的主题我也不太确定是哪个程序的原创主题<html>...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

ICP
提供技术支持 赞助云储存