星球大战炫酷海报动态效果
代码语言:html
所属分类:动画
代码描述:星球大战炫酷海报动态效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: black; position: relative; --innerVH: 100vh; height: var(--innerVH); } .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: stretch center; } #skywalker { position: relative; height: 100%; overflow: hidden; } svg { display: block; height: 100%; } image { image-rendering: crisp-edges; } #bright--no-cracks, .bright { } #lightsaber-glow--jedi--highlights, #lightsaber-glow--jedi { -webkit-animation: lightside 20s infinite alternate; animation: lightside 20s infinite alternate; } #lightsaber-glow--jedi--highlights { mix-blend-mode: lighten; } #lightsaber-glow--jedi { mix-blend-mode: screen; } #lightsaber-glow--sith { mix-blend-mode: screen; } #lightsaber-glow--sith--highlights { mix-blend-mode: lighten; } #lightsaber-glow--sith, #lightsaber-glow--sith--highlights { -webkit-animation: darkside 1s infinite alternate; animation: darkside 1s infinite alternate; } #lightsaber-glow--sith--turbulence { -webkit-filter: url(#filter--turbulence); filter: url(#filter--turbulence); mix-blend-mode: lighten; } @-webkit-keyframes lightside { 0% { opacity: 0.3; } 10% { opacity: 0.6; } 20% { opacity: 0.4; } 30% { opacity: 1; } 40% { opacity: 0.3; } 50% { opacity: 0.6; } 60% { opacity: 0.4; } 70% { opacity: 0.6; } 80% { opacity: 1; } 90% { opacity: 0.1; } 100% { opacity: 0.3; } } @keyframes lightside { 0% { opacity: 0.3; } 10% { opacity: 0.6; } 20% { opacity: 0.4; } 30% { opacity: 1; } 40% { opacity: 0.3; } 50% { opacity: 0.6; } 60% { opacity: 0.4; } 70% { opacity: 0.6; } 80% { opacity: 1; } 90% { opacity: 0.1; } 100% { opacity: 0.3; } } @-webkit-keyframes darkside { 0% { opacity: 0.3; } 5% { opacity: 0.8; } 15% { opacity: 0.4; } 20% { opacity: 1; } 25% { opacity: 0.3; } 35% { opacity: 0.8; } 45% { opacity: 0.2; } 50% { opacity: 1; } 55% { opacity: 0.3; } 60% { opacity: 0.6; } 65% { opacity: 0.4; } 70% { opacity: 0.2; } 80% { opacity: 0.6; } 85% { opacity: 0.8; } 90% { opacity: 0.4; } 95% { opacity: 0.6; } 100% { opacity: 0.3; } } @keyframes darkside { 0% { opacity: 0.3; } 5% { opacity: 0.8; } 15% { opacity: 0.4; } 20% { opacity: 1; } 25% { opacity: 0.3; } 35% { opacity: 0.8; } 45% { opacity: 0.2; } 50% { opacity: 1; } 55% { opacity: 0.3; } 60% { opacity: 0.6; } 65% { opacity: 0.4; } 70% { opacity: 0.2; } 80% { opacity: 0.6; } 85% { opacity: 0.8; } 90% { opacity: 0.4; } 95% { opacity: 0.6; } 100% { opacity: 0.3; } } #lightspeed-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-image: url(http://repo.bfw.wiki/bfwrepo/image/5e92612117c04.png); mask-image: url(http://repo.bfw.wiki/bfwrepo/image/5e92612117c04.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mix-blend-mode: screen; display: grid; } #lightspeed-mask:after { display: block; content: ''; grid-area: 1 / 1; background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #008aff), to(#e10019)); background-image: linear-gradient(to right, #008aff 30%, #e10019); mix-blend-mode: overlay; } #space { background-color: black; grid-area: 1 / 1; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center center; --perspective: 100px; -webkit-perspective: var(--perspective); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0