js+css实现滚动图片模糊至清晰filter效果代码
代码语言:html
所属分类:加载滚动
代码描述:js+css实现滚动图片模糊至清晰filter效果代码
代码标签: js css 滚动 图片 模糊 清晰 filter
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> body { background: #212121; } .image-gallery { padding-top: 10svh; } .item { display: grid; place-items: center; margin-bottom: 10svh; --filter: drop-shadow(0 0 10px #000); } @supports (animation-timeline: view()) { .item { view-timeline-name: --img-timeline; -webkit-animation: move-and-fade both; animation: move-and-fade both; animation-timeline: view(y); animation-range: cover 0% cover 120%; } } .item > img { width: 80svh; height: 80svh; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; } @supports (animation-timeline: view()) { .item > img { view-timeline-name: --img-timeline; -webkit-animation: clippy both; animation: clippy both; animation-timeline: view(y); animation-range: cover 0% cover 120%; } } @-webkit-keyframes move-and-fade { from, to { filter: var(--filter) blur(100px) saturate(20); } 45%, 65% { filter: var(--filter) blur(0) saturate(1); transform: rotateY(0deg); } } @keyframes move-and-fade { from, to { filter: var(--filter) blur(100px) saturate(20); } 45%, 65% { filter: var(--filter) blur(0) saturate(1); transform: rotateY(0deg); } } @-webkit-keyframes clippy { from { -webkit-clip-path: var(--clip-i); clip-path: var(--clip-i); } to { -webkit-clip-path: var(--clip-f); clip-path: var(--clip-f); } } @keyframes clippy { from { -webkit-clip-path: var(--clip-i); clip-path: var(--clip-i); } to { -webkit-clip-path: var(--clip-f); clip-path: var(--clip-f); } } </style> </head> <body translate="no"> <div class="image-gallery"> <div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png" alt="A bicycle leaning against a wall in a dark room. .........完整代码请登录后点击上方下载按钮下载查看
网友评论0