정보실

웹학교

정보실

css CSS로 구현하는 멋진 애니메이션 - 크리스마스 트리

본문

https://codepen.io/danwilson/pen/WYqapK


HTML : 

<main>

  <ul class="star" style="--v: 1; --t: 1;">

    <li style="--i: 0"></li>

  </ul>

  <ul style="--v: 2; --t: 8; --direction:reverse">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

  </ul>

  <ul style="--v: 3; --t: 12">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

  </ul>

  <ul style="--v: 4; --t: 18; --direction:reverse">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

    <li style="--i: 12"></li>

    <li style="--i: 13"></li>

    <li style="--i: 14"></li>

    <li style="--i: 15"></li>

    <li style="--i: 16"></li>

    <li style="--i: 17"></li>

  </ul>

  <ul style="--v: 5; --t: 22">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

    <li style="--i: 12"></li>

    <li style="--i: 13"></li>

    <li style="--i: 14"></li>

    <li style="--i: 15"></li>

    <li style="--i: 16"></li>

    <li style="--i: 17"></li>

    <li style="--i: 18"></li>

    <li style="--i: 19"></li>

    <li style="--i: 20"></li>

    <li style="--i: 21"></li>

  </ul>

  <ul style="--v: 6; --t: 26; --direction:reverse">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

    <li style="--i: 12"></li>

    <li style="--i: 13"></li>

    <li style="--i: 14"></li>

    <li style="--i: 15"></li>

    <li style="--i: 16"></li>

    <li style="--i: 17"></li>

    <li style="--i: 18"></li>

    <li style="--i: 19"></li>

    <li style="--i: 20"></li>

    <li style="--i: 21"></li>

    <li style="--i: 22"></li>

    <li style="--i: 23"></li>

    <li style="--i: 24"></li>

    <li style="--i: 25"></li>

  </ul>

  <ul style="--v: 7; --t: 32">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

    <li style="--i: 12"></li>

    <li style="--i: 13"></li>

    <li style="--i: 14"></li>

    <li style="--i: 15"></li>

    <li style="--i: 16"></li>

    <li style="--i: 17"></li>

    <li style="--i: 18"></li>

    <li style="--i: 19"></li>

    <li style="--i: 20"></li>

    <li style="--i: 21"></li>

    <li style="--i: 22"></li>

    <li style="--i: 23"></li>

    <li style="--i: 24"></li>

    <li style="--i: 25"></li>

    <li style="--i: 26"></li>

    <li style="--i: 27"></li>

    <li style="--i: 28"></li>

    <li style="--i: 29"></li>

    <li style="--i: 30"></li>

    <li style="--i: 31"></li>

  </ul>

  <ul style="--v: 8; --t: 36; --direction:reverse">

    <li style="--i: 0"></li>

    <li style="--i: 1"></li>

    <li style="--i: 2"></li>

    <li style="--i: 3"></li>

    <li style="--i: 4"></li>

    <li style="--i: 5"></li>

    <li style="--i: 6"></li>

    <li style="--i: 7"></li>

    <li style="--i: 8"></li>

    <li style="--i: 9"></li>

    <li style="--i: 10"></li>

    <li style="--i: 11"></li>

    <li style="--i: 12"></li>

    <li style="--i: 13"></li>

    <li style="--i: 14"></li>

    <li style="--i: 15"></li>

    <li style="--i: 16"></li>

    <li style="--i: 17"></li>

    <li style="--i: 18"></li>

    <li style="--i: 19"></li>

    <li style="--i: 20"></li>

    <li style="--i: 21"></li>

    <li style="--i: 22"></li>

    <li style="--i: 23"></li>

    <li style="--i: 24"></li>

    <li style="--i: 25"></li>

    <li style="--i: 26"></li>

    <li style="--i: 27"></li>

    <li style="--i: 28"></li>

    <li style="--i: 29"></li>

    <li style="--i: 30"></li>

    <li style="--i: 31"></li>

    <li style="--i: 32"></li>

    <li style="--i: 33"></li>

    <li style="--i: 34"></li>

    <li style="--i: 35"></li>

  </ul>

</main>



CSS : 

:root {

  --unit: 1.6vmin;

  --width: calc(var(--unit) * 6);

  --height: calc(var(--unit) * 8);

}


ul, li {

  position: absolute;

  width: var(--width);

  height: var(--height);

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) var(--transform, translate(0,0));

  transform-style: preserve-3d;

  z-index: -1;

}

li {

  background: hsl(calc(var(--i) * 360 / var(--t)), 100%, 53%);

  background: radial-gradient(circle, hsl(216, 88%, 86%) 22%, hsl(216, 88%, 26%) 22%) top center;

  background-size: calc(var(--unit) * 1.5) calc(var(--unit) * 1.5);

  --clip-path: polygon(0% 100%, 50% 0%, 100% 100%);

  --transform: rotateY(calc(var(--i) * calc(360deg / var(--t)))) translateZ(calc(var(--width) * .09 * var(--t))) rotateX(0deg);

  transform-origin: 50% 100%;

  

  -webkit-clip-path: var(--clip-path);

  clip-path: var(--clip-path);

}

li:nth-of-type(even) {

  --clip-path: polygon(0% 0%, 50% 100%, 100% 0%);

}

li:nth-of-type(6n + 2) {

  background: linear-gradient(to right, hsl(343, 88%, 56%) 50%, hsl(343, 88%, 36%) 50%);

}

li:nth-of-type(6n + 3) {

  background-image: linear-gradient(to bottom, hsl(143, 70%, 18%) 0vmin, hsl(143, 70%, 18%) 1.8vmin, hsl(143, 70%, 78%) 1.8vmin, hsl(143, 70%, 78%) 2vmin);

}

li:nth-of-type(6n + 4) {

  background:

    repeating-linear-gradient(135deg, hsla(347, 88%, 76%, 0) 0, hsla(347, 88%, 76%, 0) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * 1.5)),

    repeating-linear-gradient(45deg, hsl(347, 88%, 46%) 0, hsl(347, 88%, 46%) var(--unit), hsl(143, 38%, 36%) var(--unit), hsl(143, 38%, 36%) calc(var(--unit) * 1.5));

  background-size: contain;

}

li:nth-of-type(6n + 5) {

  background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%);

}

li:nth-of-type(6n + 6) {

  --color: hsl(243, 8%, 86%);

  --alt: hsl(342, 88%, 46%);

  background: linear-gradient(to right, var(--color) 50%, hsl(243, 8%, 66%) 50%);

}

@supports ( background-image: repeating-conic-gradient(at 50% 36%, red 30deg, red 45deg, green 45deg, green 60deg)) {

  li:nth-of-type(6n + 6) {

    background-image: 

      repeating-conic-gradient(at 50% 36%,

        var(--color) 30deg,

        var(--color) 45deg,

        var(--alt) 45deg,

        var(--alt) 60deg);

  }

}

ul {

  top: 8vmin;

  animation: display-case calc(var(--t) * 1000ms) infinite linear;

  animation-direction: var(--direction, normal);

  animation-delay: -10000ms;

}

.star {

  animation-duration: calc(var(--t) * 4000ms);

}

.star li {

  --clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

  --transform: translateY(-4vmin);

  background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%);

}


@keyframes display-case {

  0% {

    transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit)));

  }

  100% {

    transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit)));

  }

}



@keyframes topsy-turvy {

  0% {

    transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg);

  }

  50% {

    transform: translate(-50%, -100%) rotateY(180deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(5deg);

  }

  100% {

    transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg);

  }

}


main {

  width: 100vmin;

  height: 100vmin;

  transform-style: preserve-3d;

}


body {

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  perspective: 120vmin;

  background: hsl(216, 80%, 12%);

  background-image: radial-gradient(circle at 50% 55%, hsl(216, 80%, 32%), hsl(216, 80%, 22%) 24vmin, hsl(216, 80%, 12%) 44vmin);

}

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 101회 ]  작성일18-12-11 11:31

웹학교