animation 으로 놀기 - Conic Gradient -
오늘, 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.scssbody {
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.scssbackground: 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.)
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.scssbody {
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.scssbackground: 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.)
conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop-list>)
background: conic-gradient(from 30deg at 30% 30%, #fff, #000);
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(
red 0deg,
orange 50deg,
yellow 100deg,
green 300deg,
blue 360deg
);
<!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>
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%);
}
radial-gradient(#fff, transparent)
background: radial-gradient(white 40%, transparent 25%),
conic-gradient(#ff5722 0% 35%, #ffeb3b 35% 60%, #2196f3 60% 100%);
Reference
이 문제에 관하여(animation 으로 놀기 - Conic Gradient -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/90b0f0faab10d697f5b2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
