js+css实现view-transition转场动画效果代码-html代码-BFW代码库

js+css实现view-transition转场动画效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现view-transition转场动画效果代码，通过document.startViewTransition来实现转场动画过渡。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
	view-transition-name: none;
}

#container {
	view-transition-name: container;
}

@keyframes slide-out-to-left {
	to {
		translate: -100% 0;
	}
}
@keyframes slide-in-from-right {
	from {
		translate: 100% 0;
	}
}
@keyframes slide-in-from-left {
	from {
		translate: -100% 0;
	}
}
@keyframes slide-out-to-right {
	to {
		translate: 100% 0;
	}
}

::view-transition-group(*) {
	overflow: hidden;
}
::view-transition-old(*) {
	animation-name: slide-out-to-left;
}
::view-transition-new(*) {
	animation-name: slide-in-from-right;
}
.backwards::view-transition-old(*) {
	animation-name: slide-out-to-right;
}
.backwards::view-transition-new(*) {
	animation-name: slide-in-from-left;
}

.browser {
	--red: #ea4336;
	--yellow: #fbbd05;
	--green: #34a853;
	background: linear-gradient(to bottom,#0003 0 0,2.5rem,#0000 0 0),radial-gradient(circle at 2rem 1.25rem,var(--red) 0 0,.5rem,#0000 0 0),radial-gradient(circle at 3.5rem 1.25rem,var(--yellow) 0 0,.5rem,#0000 0 0),radial-gradient(circle at 5rem 1.25rem,var(--green) 0 0,.5rem,#0000 0 0),conic-gradient(from 25deg at 35% 75%,#ffffff09,85%,#fff0);
	border-radius: 0.5rem;
	border: 1px solid #333;
}

#container {
	text-align: center;
	width: 80vw;
	height: 80vh;
	display: grid;
	place-content: center;
	margin: 0 auto;
}

b {
	font-size: 10vmin;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	display: grid;
	place-content: center;
}

a {
	font-weight: bold;
	display: inline-block;
	width: min-content;
	padding: 5px;
	background: blue;
	color: white;
	text-decoration: none;
	margin: 0 auto;
	
	&:hover {
		color: lightblue;
	}
	
	+ a {
		margin-left: 10px;
	}
}
</style>
.........完整代码请登录后点击上方下载按钮下载查看