div+css实现页面滚动镜头聚焦虚化背景效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现页面滚动镜头聚焦虚化背景效果代码
代码标签: div css 页面 滚动 镜头 聚焦 虚化 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); body { height: 150vh; margin: 0; padding: 0; width: 100%; } body * { box-sizing: border-box; font-family: "Varela Round", cursive; } .front-box, .back-box { position: fixed; perspective: 400px; width: 100vw; height: 100vh; overflow: hidden; transform-style: preserve-3d; } .front-box { z-index: 2; } .back-box { z-index: 1; } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; animation: go-front linear both; animation-timeline: scroll(root); } .front-box .front { background-image: url(//repo.bfw.wiki/bfwrepo/icon/6685c3032e3ab.png); background-size: contain; background-position: 100% 50%; } .back-box .back { background-image: url(//repo.bfw.wiki/bfwrepo/image/6685c358a0d6b.png); background-size: cover; background-position: 50% 70%; animation-name: go-back; } @keyframes go-front { 0% { transform: translateZ(0px); } 100% { transform: translateZ(100px); } } @keyframes go-back { 0% { transform: translateZ(150px); filter: blur(0px); } 100% { transform: translateZ(10px); filter: blur(5px); } } /*** SCROLLER ***/ .scroller { position: fixed; z-index: 4; width: 30px; height: 50px; background: radial-gradient(ellipse at 50% 33%, #fff0 0 3px, #fff 4px 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0