animation 으로 놀기 - Conic Gradient -

CSS animation day 54가 되었습니다.
오늘, 31세의 생일을 맞이했습니다.　

4월부터 BeatFit에서 프런트 엔드 엔지니어로 일합니다.
앞으로도 잘 부탁드립니다.

오늘은 코닉 gradient에 관한 것입니다.

1. 완성판

2. 참고문헌

CSS TRICKS
ICS MEDIA
아아가와 r. 이오

3. 분해해 본다

❶.

conic gradient 는 중심점을 돌면서 방사형으로 그라데이션을 생성하는 속성입니다.

conic은 원뿔이라는 의미입니다. 위에서 보면 원뿔로 보이는 것으로 명명되었습니다. 구문은 다음과 같습니다.

conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)

첫 번째 인수

conic-gradient()는 첫 번째 인수에 그라데이션의 시작 위치와 중심점의 위치를 지정합니다.
예를 들어, from 30deg at 10% 10% 로 설정하면 그라데이션이 30도 위치에서 중심을 10% 10%로 설정됩니다.

background: conic-gradient(from 30deg at 30% 30%, #fff, #000);

덧붙여 이 인수를 생략하는 것도 가능해, 그 경우는 디폴트로, 각도는 0도로 center 를 중심으로 해 만들어집니다.

두 번째 인수

두 번째 인수로 색상을 설정합니다.
시작점과 끝점의 최소 두 가지 유형의 색상을 설정합니다.

conic-gradient(red, orange, yellow, green, blue);

0도부터 시계 방향으로 순서대로, 빨강, 주황, 노랑, 녹색, 파랑으로되어 있습니다.
어디에서 어디까지 색상을 지정하거나 각도를 직접 설정할 수도 있습니다.

conic-gradient(
    red 0deg,
    orange 50deg,
    yellow 100deg,
    green 300deg,
    blue 360deg
  );

디폴트에서는, 360/색의 수에, 균등하게 각도가 할당됩니다.
또한 시작색은 0도, 종료색은 360도입니다.

주의점

MDN에 따르면 현재 (2019.3)에서는 Goodle Chrome 및 Opera 만 지원할 수 있습니다. 앞으로 사용할 수 있는 브라우저는 늘어날 것입니다.

❷.
이제부터 도넛의 그래프를 만들어 갑니다.
마크업하자.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="image"></div>
    </div>
  </body>
</html>

styles.scss

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(#ff5722 0% 35%, #ffeb3b 35% 60%, #2196f3 60% 100%);
}

원형 차트가 생겼습니다.

그렇다면 도넛을 만들려면 어떻게해야합니까?
이전의 기사 의 mask나 clipPath 로 할 수 있을 것 같습니다만, 모처럼이므로, radial gradient를 사용합시다.

radial gradient 은 중앙에서 방사형으로 최종 모양(원이나 타원)을 향해 일련의 동심원의 모양을 곱하는 속성입니다.

radial-gradient(#fff, transparent)

로 설정하면 안쪽에 흰색 원을 바깥쪽에 투명한 모양의 원을 만들 수 있습니다.

방금 전의 conic-gradient와 합성합시다.

styles.scss

background: radial-gradient(white 40%, transparent 25%),
    conic-gradient(#ff5722 0% 35%, #ffeb3b 35% 60%, #2196f3 60% 100%);

프레젠테이션 자료라든지에도 응용할 수 있네요.
conic-gradient는 상당히 깊은 속성이며, 내일부터 애니메이션과 기타 표현 방법을 모색해 나갈 것입니다.
그럼 또 내일~

Reference

이 문제에 관하여(animation 으로 놀기 - Conic Gradient -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/90b0f0faab10d697f5b2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다