纸张撕裂壹号娱乐4幸运赛车投注04错误页面动画效果

css样式

* {	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;	}}

来源分享https://www.liuzhixi.cn/html/293.html

或者根被删除。html页面代码

<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" type="text/css" href="css/style.css"><link rel='stylesheet' href='css/css2.css'></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 poin壹号娱乐ts="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>您要查找的页面可能已被移动，html+css实现纸张撕裂404错误页面动画效果，演示Ripped 404 Page Animati壹号娱乐on (bokequ.幸运赛车投注com)
1、</p>    		<a class="btn-link" href="http://www.bokequ.com/">返回首页</a>    	</div>    </main></body>    </html>

2、

上一篇

jQuery鼠标点击弹出分享按钮代码
下一篇

网站优化之百度快照更新分析

纸张撕裂壹号娱乐4幸运赛车投注04错误页面动画效果

相关推荐

js实现mp3音乐播放器ui界面代码

WordPress插件Simple 301 Redirects重定向v2.0.9

css如何清除浮动clear与float

新年春节网页顶部两侧挂灯笼祝福代码

酷炫html5 canvas全屏背景动画代码

javascript位运算符与赋值运算符