react flushSync实现startViewTransition数字点击增加动画翻转效果代码
代码语言:html
所属分类:动画
代码描述:react flushSync实现startViewTransition数字点击增加动画翻转效果代码
代码标签: react flushSync startViewTransition 数字 点击 增加 动画 翻转
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Geist"; src: url("//repo.bfw.wiki/bfwrepo/font/GeistVF.ttf") format("truetype"); } body { font-family: "Geist", arial; font-weight: 100; display: grid; place-items: center; min-height: 100vh; color: hsl(0 0% 98%); background: hsl(0 0% 2%); } body::before { content: ""; position: fixed; inset: 0; --size: 100px; background: linear-gradient( hsl(0 0% 12%) 0 2px, transparent 2px var(--size) ) 50% 50% / var(--size) var(--size), linear-gradient( 90deg, hsl(0 0% 12%) 0 2px, transparent 2px var(--size) ) 50% 50% / var(--size) var(--size); -webkit-mask: linear-gradient(25deg, white, transparent); mask: linear-gradient(25deg, white, transparent); z-index: -1; } #app { display: grid; place-items: center; gap: 2rem; } :root { view-transition-name: none; } .count { width: 4ch; view-transition-name: count; font-size: clamp(2rem, 6vw + 1rem, 8rem); text-align: center; background: linear-gradient(white, gray); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant: tabular-nums; } ::view-transition-new(count), ::view-transition-old(count) { -webkit-animation: scale 0.25s; animation: scale 0.25s; height: 100%; width: 100%; } ::view-transition-new(count) { --scale-start: 0; transform-origin: 50% 0; } ::view-transition-old(count) { --scale-end: 0; transform-origin: 50% 100%; } @-webkit-keyframes scale { 0% { scale: 1 var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0