CSS animation에서 놀아 버리기- 눈물- Gooey Effect with SVG filter
이전에 눈물 을 만들었지만, 배경 이미지와의 궁합이 나쁘고, Codepen의 작품이 이상하게 되어 버렸습니다. Gooey Effect가 붙은 배경과 배경 이미지가 서로 간섭했기 때문입니다.
그래서 오늘은 SVG를 사용하여 눈물에 다시 도전하고 싶습니다.
1. 완성판
2. 참고문헌
CSS trick
THE ORTHODOX WORKS
SVG1.1
codorops (꽤 이해하기 쉽습니다!)
3. SVG filter 배우기
❶.
CSS에서 일반 이미지를 흐리게하고 싶을 때 filter : blur ()로 배경을 조작하면 쉽게 할 수있었습니다. ( 마지막 기사, 맨 아래 참조 )
그렇다면 SVG 이미지를 흐리게 만들고 싶다면 어떻게해야합니까?
···
SVG에서는 원시 필터이라는 것을 자식 요소로 설정하고 filter 속성과 함께 사용해야합니다.
원시 필터 요소와는 많이 있으므로, 여기 를 참조 받고 싶습니다만, 자주(잘) 사용하는 것을 발췌하면(자)
흐리게 할 때 : feGaussianBlur
색상을 변경하고 싶을 때 : feColorMatrix
이미지를 합치고 싶을 때 : feBlend
등 있습니다. 실제 코드를 살펴보자.
⑴ fe GaussianBlur
index.html <filter id="filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="20"
result="blur"
/>
</filter>
in = "SourceGraphic"에서 필터가 적용되는 타겟 요소(이미지, 도형 등)를 그래픽 내용으로 이용하겠습니다, 라고 선언합니다.
stdDeviation="20"으로, std(standard)에, X축, Y축에 20px 의 blur를 붙여요, 라고 선언합니다. 그런 다음 결과를 blur라고 명명합니다.
위 이미지의 변화는 feDaussianBlur의 효과입니다.
⑵ feColorMatrix
index.html <feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
in = "blur"로, 방금 전의 feGaussianBlur 의 결과에, 색의 설정을 더할 것이라고 선언하고 있습니다.
matrix, values 에 대한 자세한 내용은 이 기사
컬러 매트릭스에서 중요한 것은 마지막 두 숫자입니다. (표에서 말하면 오른쪽 하단의 2개) 이 두 값에 의해 透過性へコントラスト를 붙여 Gooey Effect를 만듭니다.
투과성의 대비를 증가시켜 Gooey Effect가 가능했습니다.
⑶ feBlend
index.html <feBlend in="SourceGraphic" in2="filter" />
⑵에서 온 것을 SourceGraphic에 합성하여 완성입니다.
4. SVG Filter 정리
CSS trick
THE ORTHODOX WORKS
SVG1.1
codorops (꽤 이해하기 쉽습니다!)
3. SVG filter 배우기
❶.
CSS에서 일반 이미지를 흐리게하고 싶을 때 filter : blur ()로 배경을 조작하면 쉽게 할 수있었습니다. ( 마지막 기사, 맨 아래 참조 )
그렇다면 SVG 이미지를 흐리게 만들고 싶다면 어떻게해야합니까?
···
SVG에서는 원시 필터이라는 것을 자식 요소로 설정하고 filter 속성과 함께 사용해야합니다.
원시 필터 요소와는 많이 있으므로, 여기 를 참조 받고 싶습니다만, 자주(잘) 사용하는 것을 발췌하면(자)
흐리게 할 때 : feGaussianBlur
색상을 변경하고 싶을 때 : feColorMatrix
이미지를 합치고 싶을 때 : feBlend
등 있습니다. 실제 코드를 살펴보자.
⑴ fe GaussianBlur
index.html <filter id="filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="20"
result="blur"
/>
</filter>
in = "SourceGraphic"에서 필터가 적용되는 타겟 요소(이미지, 도형 등)를 그래픽 내용으로 이용하겠습니다, 라고 선언합니다.
stdDeviation="20"으로, std(standard)에, X축, Y축에 20px 의 blur를 붙여요, 라고 선언합니다. 그런 다음 결과를 blur라고 명명합니다.
위 이미지의 변화는 feDaussianBlur의 효과입니다.
⑵ feColorMatrix
index.html <feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
in = "blur"로, 방금 전의 feGaussianBlur 의 결과에, 색의 설정을 더할 것이라고 선언하고 있습니다.
matrix, values 에 대한 자세한 내용은 이 기사
컬러 매트릭스에서 중요한 것은 마지막 두 숫자입니다. (표에서 말하면 오른쪽 하단의 2개) 이 두 값에 의해 透過性へコントラスト를 붙여 Gooey Effect를 만듭니다.
투과성의 대비를 증가시켜 Gooey Effect가 가능했습니다.
⑶ feBlend
index.html <feBlend in="SourceGraphic" in2="filter" />
⑵에서 온 것을 SourceGraphic에 합성하여 완성입니다.
4. SVG Filter 정리
<filter id="filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="20"
result="blur"
/>
</filter>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
<feBlend in="SourceGraphic" in2="filter" />
이제 준비가 완료됩니다! !
그럼 눈물을 만들어 갑니다.
5. 실천
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="gooey">
<div class="circle"></div>
<div class="circle"></div>
</div>
<svg>
<defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
<feBlend in="SourceGraphic" in2="blur" />
</filter>
</defs>
</svg>
</div>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url("https://dl.dropbox.com/s/tordfdhfhazq10s/face.png?dl=0");
background-size: cover;
background-position-y: -200px;
}
.gooey {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
filter: url("#filter");
}
.circle {
position: absolute;
top: 0;
bottom: 0;
width: 120px;
height: 120px;
margin: auto;
background: #8080ff;
border-radius: 50%;
opacity: 1;
}
.circle:first-child {
left: 20%;
top: 30%;
width: 100px;
height: 60px;
}
.circle:nth-child(2) {
left: 26%;
top: 30%;
width: 100px;
height: 60px;
}
.circle:first-child:hover {
animation: move1 2s linear 0.2s infinite;
}
.circle:nth-child(2):hover {
animation: move2 1.5s linear 0.2s infinite;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
20% {
transform: translate(-20px, 50px) scale(1.2, 2) rotateY(20deg);
}
50% {
transform: translate(-20px, 100px) scale(0.6, 1.1) rotateY(30deg);
}
80% {
transform: translate(-20px, 150px) scale(0.6, 1.1) rotateY(50deg);
}
100% {
transform: translate(-20px, 200px) scale(0.6, 1.1) rotateY(90deg);
}
}
@keyframes move2 {
0% {
transform: translateX(0px);
}
20% {
transform: translate(100px, 30px) scale(1.2 0.5);
}
50% {
transform: translateY(100px) scale(0.6, 0.6) rotateY(20deg);
}
80% {
transform: translateY(150px) scale(0.6, 0.6) rotateY(50deg);
}
100% {
transform: translateY(200px) scale(0.6, 0.6) rotateY(90deg);
}
}
완성되었습니다.
CSS 때와 달리 눈물 배경이 흰색이되지 않습니다.
이렇게 간단하게 SVG로 Gooey Effect를 만들 수 있습니다.
앞으로 잠시 동안이 효과를 사용하여 버튼 등을 만들어갑니다.
그럼 또 내일!
Reference
이 문제에 관하여(CSS animation에서 놀아 버리기- 눈물- Gooey Effect with SVG filter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/3ab7be7b52c88e574273
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="gooey">
<div class="circle"></div>
<div class="circle"></div>
</div>
<svg>
<defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
<feBlend in="SourceGraphic" in2="blur" />
</filter>
</defs>
</svg>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url("https://dl.dropbox.com/s/tordfdhfhazq10s/face.png?dl=0");
background-size: cover;
background-position-y: -200px;
}
.gooey {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
filter: url("#filter");
}
.circle {
position: absolute;
top: 0;
bottom: 0;
width: 120px;
height: 120px;
margin: auto;
background: #8080ff;
border-radius: 50%;
opacity: 1;
}
.circle:first-child {
left: 20%;
top: 30%;
width: 100px;
height: 60px;
}
.circle:nth-child(2) {
left: 26%;
top: 30%;
width: 100px;
height: 60px;
}
.circle:first-child:hover {
animation: move1 2s linear 0.2s infinite;
}
.circle:nth-child(2):hover {
animation: move2 1.5s linear 0.2s infinite;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
20% {
transform: translate(-20px, 50px) scale(1.2, 2) rotateY(20deg);
}
50% {
transform: translate(-20px, 100px) scale(0.6, 1.1) rotateY(30deg);
}
80% {
transform: translate(-20px, 150px) scale(0.6, 1.1) rotateY(50deg);
}
100% {
transform: translate(-20px, 200px) scale(0.6, 1.1) rotateY(90deg);
}
}
@keyframes move2 {
0% {
transform: translateX(0px);
}
20% {
transform: translate(100px, 30px) scale(1.2 0.5);
}
50% {
transform: translateY(100px) scale(0.6, 0.6) rotateY(20deg);
}
80% {
transform: translateY(150px) scale(0.6, 0.6) rotateY(50deg);
}
100% {
transform: translateY(200px) scale(0.6, 0.6) rotateY(90deg);
}
}
Reference
이 문제에 관하여(CSS animation에서 놀아 버리기- 눈물- Gooey Effect with SVG filter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/3ab7be7b52c88e574273텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
