Svi volimo Star Wars filmove. Zadnji film je tek i izašao I sudeći po komenatrima izgleda da se fanovi neće razočarati ni ovaj put. Ja ga idem gledati danas. Od svega najviše volim svjetlosne mačeve stoga sam u ovom tutorialu za vas napravio Star Wars svjetlosni mač sa CSS animacijom.

Svjetlosni mač sam podijelio na nekoliko elemenata.  Prvi element je <div> sa light_saber klasom preko koje kasnije možemo upravljati pozicijom mača na web stranici. Zatim sam dodao element <div> sam klasom back u kojoj se nalaze svi djelovi mača. Komponente mača sam podijelio na sljedeći način:

• handle - u kojem se nalazi slika ručke mača. Vi uvijek možete staviti proizvoljno neku svoju.
• core_glow - je bijela svijetlost mača u sredini zrake 
• middle_glow - je blaga svijetlost boje koju želimo dodjeliti maču i stavljamo je inline
• outer_glow - je dio gdje se boja mača najviše izražava. Nju također stavljamo inline

<div class="light_saber">
  <div class="back">
    <div class="outer_glow" style="background-color: #ff1d1d;"></div>
    <div class="middle_glow" style="background-color: #faccd2;"></div>
    <div class="core_glow"></div>
    <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
  </div>
</div>

Što se tiče css-a, light_saber klasu sam postavio sredinu ekrana s visinom od 460px i debljinom 10px. Back klasu sam postavio na visinu od 460px i debljinu 10px, te je rotirao za 180 stupnjeva I postavio u uspravni položaj. outer_glow klasa postavljena je na apsolutnu rezoluciju sa blur filterom I tranzicijom te visinom od 0 px i širinom 26px s radiusom od 5px. Slično sam napravio i sa middle_glow i core_glow klasom. Handle klasu postavio sam na dno mača s visinom 30px i širinom 55px.

.light_saber {
  height: 460px;
  width: 10px;
  margin-left: auto;
  margin-right: auto;
}
.back{
  height: 460px;
  width: 10px;
  position: relative;  
  transform: rotate(180deg);
}
.outer_glow{
  height: 0px;
  width: 26px;
  border-radius:5px;
  filter: blur(10px);
    position: absolute;
    left: -8px;
    top:85px;
    transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.middle_glow{
  height: 0px;
  width: 10px;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(2px);
  transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.core_glow{
  height: 0px;
  width: 6px;
  background-color: #fff;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(1px);
  transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  left: 2px;
}

.handle{
  height: 30px;
  width: 55px;
  position: absolute;
  top:0;
  left: -22px;
  cursor:pointer;
}
.handle img{
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

Kako bi animacija i uključivanje mača radili ispravno, koristio sam klasu open i keyframe animaciju glow_animation sa open klasom dajem maču visinu i dodjeljujem mu glow animaciju.

.open .outer_glow{ height: 370px; animation: glow_animation 0.8s infinite ;}
.open .middle_glow{ height: 350px; animation: glow_animation 0.8s infinite ;}
.open .core_glow{ height: 347px;}

@keyframes glow_animation {
  0% {
   transform: scaleX(1);
  }
  20% {
   transform: scaleX(1.1);
  }
  30% {
    transform: scaleX(1.2);
  }
  60% {
    transform: scaleX(1.05);
  }
  80% {
    transform: scaleX(1.1);
  }
  100% {
    transform: scaleX(1);
  }
}

Dodao sam i klik funkciju u jQuery-u s kojom se mač otvara.

$(".handle").click(function(){
    $(".back").toggleClass("open");
});

Ispod je završen rezultat sa nekoliko još primjera.