hotTea

linear-gradient

1. background: linear-gradient(pink, #9198e5, white, powderblue);

2. background: linear-gradient(90deg, gold, white, powderblue)

3. background: linear-gradient(to left, pink, white, powderblue)

그레디언트 축에서 색상점의 위치를 지정할 수 있다.

4. background: linear-gradient(to right, powderblue 20%, pink 50%, gold);

5. background: linear-gradient(
   210deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%
   ),
   linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
   linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);

---

radial-gradient

• shape : 원 모양인지 타원 모양
  원 : circle, 타원 : ellipse
• size : 크기
• position : 중심의 위치
• color : 색

radial-gradient( shape size at position, color1, color2, ..., color3 )

🌈 그림자로 활용 가능 🌈

radial-gradient(rgba(0, 0, 0, 0.2) 30%, transparent, transparent);

---

가상 선택자

가상 선택자를 통해 다양하게 활용할 수 있다.

  <span style="--i: 5"></span>
  <span style="--i: 13"></span>
  <span style="--i: 20"></span>

animation-delay: calc(var(--i) * -0.5s);

---

keyframe

@keyframes animate {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-150px) scaleX(5);
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateY(-300px) scaleX(10);
  }
}