星球大战炫酷海报动态效果-html代码-BFW代码库

星球大战炫酷海报动态效果

代码语言：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 l.........完整代码请登录后点击上方下载按钮下载查看