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.........完整代码请登录后点击上方下载按钮下载查看