css图片渐显动画效果代码
代码语言:html
所属分类:动画
代码描述:css图片渐显动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import 'https://unpkg.com/open-props/open-props.min.css'; @import 'https://unpkg.com/open-props/normalize.min.css'; * { box-sizing: border-box; } body { display: grid; min-height: 100vh; place-items: center; background: var(--surface-2); } :where(p,ul,ol,dl,h6) { font-size: unset; } img { --base: 0; height: auto; width: 40vmin; aspect-ratio: 1; -webkit-animation: filter-in calc(var(--speed, 1) * 1s) ease-in-out; animation: filter-in calc(var(--speed, 1) * 1s) ease-in-out; border-radius: 1rem; box-shadow: var(--shadow-5); -webkit-animation-name: var(--animation-name, filter-in); animation-name: var(--animation-name, filter-in); } @media (prefers-color-scheme: dark) { img { --base: 2; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } } @keyframes fade-in { 0% { opacity: 0; } } @-webkit-keyframes filter-in { 0% { opacity: 0; filter: brightness(var(--base)) contrast(2); box-shadow: 0; } } @keyframes filter-in { 0% { opacity: 0; filter: brightness(var(--base)) contrast(2); box-shadow: 0; } } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-mi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0