CSS&React: 로고를 어떻게 튕겨요?
16608 단어 animationreactcssjavascript
순수 CSS를 사용하여 매끄러운 반사 로고 애니메이션을 만들고 React에서 사용합니다.내가 짜증나는 친구들은 본문의 어두운 깊이를 아래로 굴려 가치 있는 CSS 부분을 잡을 수 있다.
👵 이야기
내가 드리블과 저주 쓰레기 네트워크 연결에서 영감을 얻기를 갈망했을 때, 나는 보았다.얘는 작지만 예뻐!"알았어, 지칠 줄 모르고 왔다 갔다 하면서 땅에 떨어질 때마다 숨을 죽이게 해."
그때부터 나는 이 임프에게 푹 빠졌다!
자신을 존중하는 전단 엔지니어로서 나는 개발 도구를 열어 애니메이션의 원본 코드를 검사했다.이것은 단지gif일 뿐이라고 누가 생각했겠는가?
나 정말 실망했어!
그때부터 내 마음은 건설의 빌어먹을 반등에 놓여 있었다.
하지만 내 감정이 붕괴된 것만으로도 충분해.좀 사달래요.💩 완성!
🧠 어떻게
우리의 손을 더럽히기 전에, 나는 우리의 목표와 우리가 그것을 어떻게 실현할 것인지를 정의하고 싶다.
우선 밴드 로고는 농구공이기 때문에 점프가 의미가 있다.그러나 반드시 공이 있어야만 애니메이션을 자연스럽게 보일 수 있는 것은 아니다.원형 하나면 충분해, 너를 설득하기 위해서 우리의 물체는 한쪽 눈이 될 거야.
우리 회사Loceye는 눈 추적 기술을 사용하여 사용자의 행위를 이해하는데 현재 이런 눈의 물건은 의미가 있을 것이다.
두 번째는 음영!아마도 이것은 모든 사람에게 뚜렷하지 않을 것이다. 그러나 뛰는 눈은 지면에 접근할 때 그 그림자를 바꿀 것이다.눈이 지면에 가까워지면서 그늘이 점점 커진다.
코드 구현에 관해서는 SVG 로고(PNG도 작은 조정이 가능)와 CSS 애니메이션에 대한 기본적인 이해가 필요합니다.기능적인 반사안이 있을 때, 모든 React 프로젝트에서 그것을 사용하는 방법을 보여 드리겠습니다. 귀찮게 불러올 필요가 없습니다.
👨💻 인코딩 섹션
인코딩 부분을 시작합시다!
배후의 생각을 실시하는 것은 로켓 과학이 아니다!이렇게 간단해.로고와 그림자를 포함하는 용기를 정의합니다.로고와 그림자는 부모 요소를 기준으로 배치됩니다.
교육적 이유로 나는 전체 애니메이션 개념을 네 부분으로 분해할 것이다.
💀 섹션 1 - 정적 뼈대
우리는 애니메이션의 정적 레이아웃을 정의할 것이다.간단하게 말하자면, 로고와 그늘은 각각 원형과 직사각형의 두 요소<div>가 될 것이다.
<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
이제 유용한 CSS 변수를 설명하고 잠시 후 골치 아픈 문제에서 벗어나겠습니다.CSS 변수에 익숙하지 않고 더 많은 것을 알고 싶으면 this link 를 방문하여 잠시 후 논평 부분에서 저에게 감사를 드립니다.
<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
우리의 주요 요소를 포지셔닝할 때가 되었다.비결은 CSS 속성position이다.용기에 정의position: relative하고 position: absolute를 하위 용기에 정의함으로써 우리는 부모 용기에 대한 위치구와 음영을 실현했다.
여기서 주의해야 할 것은 top과left 속성은 왼쪽 상각 원소점의 절대 위치를 계산한다.
예를 들어 우리가 left: 50% 를 설정하고 그 너비의 절반을 줄이면 원소는 용기 안에서 수평으로 가운데에 있을 수 있다.
너는 나의 것을 보고 원인을 이해할 수 있다.
다음 CSS 클래스에서는 간단한 계산을 사용하여 볼과 용기 내의 그림자를 정렬합니다.
.container {
position: relative;
}
.logo {
position: absolute;
top: var(--offset);
left: calc(50% - var(--logo-size) / 2);
}
.shadow {
position: absolute;
top: calc(
var(--offset) +
var(--drop-height) +
var(--logo-size) -
1.5 var(--shadow-height)
);
left: calc(50% - var(--logo-size) / 2);
}
지금까지 우리의 애니메이션은 그 어느 때보다 정적이어야 한다!
🏃섹션 2 - 이동
빌어먹을 공을 움직일 때가 됐어!!!
반의 마력은 @keyframes CSS at 규칙에 있다. 이 규칙은 애니메이션 시퀀스의 키프레임(또는 항로점) 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어한다.
우리의 @keyframes bounceat 규칙은 translateY() 및 scale() CSS 함수를 처리합니다.
함수translateY()는 2D 평면에서 0 픽셀에서 var(--drop-height) 픽셀로 수직으로 위치를 재정의합니다.더 간단한 것은 공이 지정된 픽셀을 아래로 이동한다는 것이다.
@keyframes bounce {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(var(--drop-height)) scale(1, 0.7);
}
}
근데 어떻게 해요?남은 마법이 왔다!animation CSS 속성은 스타일 간에 애니메이션을 적용합니다.우리는 animation-direction 속성 전후교체animation-iteration-count를 무한대로 설정합니다.
Smooth movement is anything and everything!
그러나 가장 중요한 속성은 animation-timing-function 애니메이션이 주기별 지속 시간 내에 어떻게 진행되는지 지정하는 것이다.나는 고도로 맞춤형 제작이 가능하고 필요한 자연스러운 느낌을 제공할 수 있기 때문에 cubic-bezier() 시간 계산 기능을 선택했다.
.logo {
...
animation-name: bounce;
animation-duration: 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
animation-iteration-count: infinite;
}
물론 이 부동점수는 무작위가 아니라 몇 시간 동안 계산한 후에 정확하게 정의된 것이다.그냥 농담이야!
안드레 시트닉과 이반 솔로비프가 놀라운 느슨한 기능 목록easing.net을 만들 수 있기를 바란다.제 일은 easeinfo를 골라서 복사해서 붙여넣기cubic-bezier()easing하는 것입니다.
)
입방 베셀에서 입방 베셀(0.95, 0.05, 0.795, 0.035)을 미리 봅니다.일반 도메인 이름 형식
또 다른 좋은 도구는 Lea Veroucubic-bezier.com다.베셀 곡선을 세 번 가시화할 수 있을 뿐만 아니라 흔히 볼 수 있는 완화 함수와 비교할 수 있습니다.
🕶 #3부분-음영의 탄생은 빛 덕분이다.
우리의 그림자를 돌볼 때가 되었다.단계 #2에 대한 확장 분석을 고려하면 그림자 이동은 파이처럼 간단해야 한다. (파이를 구워 본 적이 없다면.)
@keyframes grow {
from {
transform: scale(0.2, 0.5);
}
to {
transform: scale(1, 0.1);
}
}
보시다시피 우리의 유일한 조정은 그 기능scale()이다.우리의 목표는 공이 점점 가까워질 때 그림자를 스트레칭하는 것이다.
지금까지 우리는 이미 두 개의 가상 대상을 가진 전기능 반등 애니메이션을 가지고 있다.다음 단계에서 마지막 윤색을 합시다.
🏀 4 부분. - Dat 눈동자.
지금은 모든 것이 다 좋지만, 약간의 물건이 부족하다.물론 귀여운 눈과 그 진실한 그림자다.분명히 공에는 직사각형 음영이 있어서는 안 된다.
나는 <svg> 클래스에서 .logo 요소를 사용하여 나의 로고를 정의했다.
<div class="container">
<svg class="logo" ...>....</svg>
<div class="shadow"/></div>
</div>
그러나 <div> 요소를 보존하고 .logo 클래스에 PNG 이미지를 추가하여 background-image 속성을 사용하면 이 기능을 수행할 수 있습니다.그 밖에 우리는 background-size과border-radius를 사용해서 그것을 가운데에 두어야 한다.
.logo {
...
background-image: './path/to/logo.png';
background-size: cover;
border-radius:50% 50% 50% 50%;
}
마지막 터치는 radial-gradient() 기능을 추가하고 우리의 대상에 퇴색된 자연 음영을 만드는 것이다.
.shadow {
...
background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}
🎉🎉🎉 영예로고가 반등하고 있습니다!🎉🎉🎉
만약 당신이 여기서 당신의 CSS 부분을 잡으면, 위의 만년필은 당신을 기쁘게 할 것입니다.저의 엉망진창인 유머 감각을 인내심 있게 대해주셔서 감사합니다. 여기서 다시 뵐 수 있기를 바랍니다.
다른 사람들, 누가 반응 부품을 원하면 나의 나쁜 성질을 좀 더 참아야 한다.
⚛ 이곳은 극객만 반응한다
React 구성 요소에 대해 강력한 styled-components 라이브러리를 사용했습니다. 이것은 실제 CSS 코드를 작성하여 구성 요소의 스타일을 설정할 수 있도록 합니다.물론 전통적인 방법으로 CSS 파일을 구성 요소로 가져올 수 있습니다.
까다로운 문제는 <Logo> 구성 요소가 React 구성 요소로 렌더링된 <svg> 요소라는 것이다.웹 편집기(CLI 도구를 사용할 수도 있음)를 사용하여 svg 요소를 React 구성 요소로 쉽게 변환할 수 있습니다.viewPort 구성 요소에 포함 <Logo> 잊지 마세요!
회사 명
🏃♀️🏃 짜증나는 CSS 애호가
Conclusion
우리의 손을 더럽히기 전에, 나는 우리의 목표와 우리가 그것을 어떻게 실현할 것인지를 정의하고 싶다.
우선 밴드 로고는 농구공이기 때문에 점프가 의미가 있다.그러나 반드시 공이 있어야만 애니메이션을 자연스럽게 보일 수 있는 것은 아니다.원형 하나면 충분해, 너를 설득하기 위해서 우리의 물체는 한쪽 눈이 될 거야.
우리 회사Loceye는 눈 추적 기술을 사용하여 사용자의 행위를 이해하는데 현재 이런 눈의 물건은 의미가 있을 것이다.
두 번째는 음영!아마도 이것은 모든 사람에게 뚜렷하지 않을 것이다. 그러나 뛰는 눈은 지면에 접근할 때 그 그림자를 바꿀 것이다.눈이 지면에 가까워지면서 그늘이 점점 커진다.
코드 구현에 관해서는 SVG 로고(PNG도 작은 조정이 가능)와 CSS 애니메이션에 대한 기본적인 이해가 필요합니다.기능적인 반사안이 있을 때, 모든 React 프로젝트에서 그것을 사용하는 방법을 보여 드리겠습니다. 귀찮게 불러올 필요가 없습니다.
👨💻 인코딩 섹션
인코딩 부분을 시작합시다!
배후의 생각을 실시하는 것은 로켓 과학이 아니다!이렇게 간단해.로고와 그림자를 포함하는 용기를 정의합니다.로고와 그림자는 부모 요소를 기준으로 배치됩니다.
교육적 이유로 나는 전체 애니메이션 개념을 네 부분으로 분해할 것이다.
💀 섹션 1 - 정적 뼈대
우리는 애니메이션의 정적 레이아웃을 정의할 것이다.간단하게 말하자면, 로고와 그늘은 각각 원형과 직사각형의 두 요소<div>가 될 것이다.
<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
이제 유용한 CSS 변수를 설명하고 잠시 후 골치 아픈 문제에서 벗어나겠습니다.CSS 변수에 익숙하지 않고 더 많은 것을 알고 싶으면 this link 를 방문하여 잠시 후 논평 부분에서 저에게 감사를 드립니다.
<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
우리의 주요 요소를 포지셔닝할 때가 되었다.비결은 CSS 속성position이다.용기에 정의position: relative하고 position: absolute를 하위 용기에 정의함으로써 우리는 부모 용기에 대한 위치구와 음영을 실현했다.
여기서 주의해야 할 것은 top과left 속성은 왼쪽 상각 원소점의 절대 위치를 계산한다.
예를 들어 우리가 left: 50% 를 설정하고 그 너비의 절반을 줄이면 원소는 용기 안에서 수평으로 가운데에 있을 수 있다.
너는 나의 것을 보고 원인을 이해할 수 있다.
다음 CSS 클래스에서는 간단한 계산을 사용하여 볼과 용기 내의 그림자를 정렬합니다.
.container {
position: relative;
}
.logo {
position: absolute;
top: var(--offset);
left: calc(50% - var(--logo-size) / 2);
}
.shadow {
position: absolute;
top: calc(
var(--offset) +
var(--drop-height) +
var(--logo-size) -
1.5 var(--shadow-height)
);
left: calc(50% - var(--logo-size) / 2);
}
지금까지 우리의 애니메이션은 그 어느 때보다 정적이어야 한다!
🏃섹션 2 - 이동
빌어먹을 공을 움직일 때가 됐어!!!
반의 마력은 @keyframes CSS at 규칙에 있다. 이 규칙은 애니메이션 시퀀스의 키프레임(또는 항로점) 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어한다.
우리의 @keyframes bounceat 규칙은 translateY() 및 scale() CSS 함수를 처리합니다.
함수translateY()는 2D 평면에서 0 픽셀에서 var(--drop-height) 픽셀로 수직으로 위치를 재정의합니다.더 간단한 것은 공이 지정된 픽셀을 아래로 이동한다는 것이다.
@keyframes bounce {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(var(--drop-height)) scale(1, 0.7);
}
}
근데 어떻게 해요?남은 마법이 왔다!animation CSS 속성은 스타일 간에 애니메이션을 적용합니다.우리는 animation-direction 속성 전후교체animation-iteration-count를 무한대로 설정합니다.
Smooth movement is anything and everything!
그러나 가장 중요한 속성은 animation-timing-function 애니메이션이 주기별 지속 시간 내에 어떻게 진행되는지 지정하는 것이다.나는 고도로 맞춤형 제작이 가능하고 필요한 자연스러운 느낌을 제공할 수 있기 때문에 cubic-bezier() 시간 계산 기능을 선택했다.
.logo {
...
animation-name: bounce;
animation-duration: 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
animation-iteration-count: infinite;
}
물론 이 부동점수는 무작위가 아니라 몇 시간 동안 계산한 후에 정확하게 정의된 것이다.그냥 농담이야!
안드레 시트닉과 이반 솔로비프가 놀라운 느슨한 기능 목록easing.net을 만들 수 있기를 바란다.제 일은 easeinfo를 골라서 복사해서 붙여넣기cubic-bezier()easing하는 것입니다.
)
입방 베셀에서 입방 베셀(0.95, 0.05, 0.795, 0.035)을 미리 봅니다.일반 도메인 이름 형식
또 다른 좋은 도구는 Lea Veroucubic-bezier.com다.베셀 곡선을 세 번 가시화할 수 있을 뿐만 아니라 흔히 볼 수 있는 완화 함수와 비교할 수 있습니다.
🕶 #3부분-음영의 탄생은 빛 덕분이다.
우리의 그림자를 돌볼 때가 되었다.단계 #2에 대한 확장 분석을 고려하면 그림자 이동은 파이처럼 간단해야 한다. (파이를 구워 본 적이 없다면.)
@keyframes grow {
from {
transform: scale(0.2, 0.5);
}
to {
transform: scale(1, 0.1);
}
}
보시다시피 우리의 유일한 조정은 그 기능scale()이다.우리의 목표는 공이 점점 가까워질 때 그림자를 스트레칭하는 것이다.
지금까지 우리는 이미 두 개의 가상 대상을 가진 전기능 반등 애니메이션을 가지고 있다.다음 단계에서 마지막 윤색을 합시다.
🏀 4 부분. - Dat 눈동자.
지금은 모든 것이 다 좋지만, 약간의 물건이 부족하다.물론 귀여운 눈과 그 진실한 그림자다.분명히 공에는 직사각형 음영이 있어서는 안 된다.
나는 <svg> 클래스에서 .logo 요소를 사용하여 나의 로고를 정의했다.
<div class="container">
<svg class="logo" ...>....</svg>
<div class="shadow"/></div>
</div>
그러나 <div> 요소를 보존하고 .logo 클래스에 PNG 이미지를 추가하여 background-image 속성을 사용하면 이 기능을 수행할 수 있습니다.그 밖에 우리는 background-size과border-radius를 사용해서 그것을 가운데에 두어야 한다.
.logo {
...
background-image: './path/to/logo.png';
background-size: cover;
border-radius:50% 50% 50% 50%;
}
마지막 터치는 radial-gradient() 기능을 추가하고 우리의 대상에 퇴색된 자연 음영을 만드는 것이다.
.shadow {
...
background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}
🎉🎉🎉 영예로고가 반등하고 있습니다!🎉🎉🎉
만약 당신이 여기서 당신의 CSS 부분을 잡으면, 위의 만년필은 당신을 기쁘게 할 것입니다.저의 엉망진창인 유머 감각을 인내심 있게 대해주셔서 감사합니다. 여기서 다시 뵐 수 있기를 바랍니다.
다른 사람들, 누가 반응 부품을 원하면 나의 나쁜 성질을 좀 더 참아야 한다.
⚛ 이곳은 극객만 반응한다
React 구성 요소에 대해 강력한 styled-components 라이브러리를 사용했습니다. 이것은 실제 CSS 코드를 작성하여 구성 요소의 스타일을 설정할 수 있도록 합니다.물론 전통적인 방법으로 CSS 파일을 구성 요소로 가져올 수 있습니다.
까다로운 문제는 <Logo> 구성 요소가 React 구성 요소로 렌더링된 <svg> 요소라는 것이다.웹 편집기(CLI 도구를 사용할 수도 있음)를 사용하여 svg 요소를 React 구성 요소로 쉽게 변환할 수 있습니다.viewPort 구성 요소에 포함 <Logo> 잊지 마세요!
회사 명
🏃♀️🏃 짜증나는 CSS 애호가
Conclusion
우리는 애니메이션의 정적 레이아웃을 정의할 것이다.간단하게 말하자면, 로고와 그늘은 각각 원형과 직사각형의 두 요소
<div>가 될 것이다.<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
<div class="container">
<div class="logo"></div>
<div class="shadow"/></div>
</div>
position이다.용기에 정의position: relative하고 position: absolute를 하위 용기에 정의함으로써 우리는 부모 용기에 대한 위치구와 음영을 실현했다.여기서 주의해야 할 것은
top과left 속성은 왼쪽 상각 원소점의 절대 위치를 계산한다. 예를 들어 우리가
left: 50% 를 설정하고 그 너비의 절반을 줄이면 원소는 용기 안에서 수평으로 가운데에 있을 수 있다.너는 나의 것을 보고 원인을 이해할 수 있다.
다음 CSS 클래스에서는 간단한 계산을 사용하여 볼과 용기 내의 그림자를 정렬합니다.
.container {
position: relative;
}
.logo {
position: absolute;
top: var(--offset);
left: calc(50% - var(--logo-size) / 2);
}
.shadow {
position: absolute;
top: calc(
var(--offset) +
var(--drop-height) +
var(--logo-size) -
1.5 var(--shadow-height)
);
left: calc(50% - var(--logo-size) / 2);
}
🏃섹션 2 - 이동
빌어먹을 공을 움직일 때가 됐어!!!
반의 마력은 @keyframes CSS at 규칙에 있다. 이 규칙은 애니메이션 시퀀스의 키프레임(또는 항로점) 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어한다.
우리의 @keyframes bounceat 규칙은 translateY() 및 scale() CSS 함수를 처리합니다.
함수translateY()는 2D 평면에서 0 픽셀에서 var(--drop-height) 픽셀로 수직으로 위치를 재정의합니다.더 간단한 것은 공이 지정된 픽셀을 아래로 이동한다는 것이다.
@keyframes bounce {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(var(--drop-height)) scale(1, 0.7);
}
}
근데 어떻게 해요?남은 마법이 왔다!animation CSS 속성은 스타일 간에 애니메이션을 적용합니다.우리는 animation-direction 속성 전후교체animation-iteration-count를 무한대로 설정합니다.
Smooth movement is anything and everything!
그러나 가장 중요한 속성은 animation-timing-function 애니메이션이 주기별 지속 시간 내에 어떻게 진행되는지 지정하는 것이다.나는 고도로 맞춤형 제작이 가능하고 필요한 자연스러운 느낌을 제공할 수 있기 때문에 cubic-bezier() 시간 계산 기능을 선택했다.
.logo {
...
animation-name: bounce;
animation-duration: 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
animation-iteration-count: infinite;
}
물론 이 부동점수는 무작위가 아니라 몇 시간 동안 계산한 후에 정확하게 정의된 것이다.그냥 농담이야!
안드레 시트닉과 이반 솔로비프가 놀라운 느슨한 기능 목록easing.net을 만들 수 있기를 바란다.제 일은 easeinfo를 골라서 복사해서 붙여넣기cubic-bezier()easing하는 것입니다.
)
입방 베셀에서 입방 베셀(0.95, 0.05, 0.795, 0.035)을 미리 봅니다.일반 도메인 이름 형식
또 다른 좋은 도구는 Lea Veroucubic-bezier.com다.베셀 곡선을 세 번 가시화할 수 있을 뿐만 아니라 흔히 볼 수 있는 완화 함수와 비교할 수 있습니다.
🕶 #3부분-음영의 탄생은 빛 덕분이다.
우리의 그림자를 돌볼 때가 되었다.단계 #2에 대한 확장 분석을 고려하면 그림자 이동은 파이처럼 간단해야 한다. (파이를 구워 본 적이 없다면.)
@keyframes grow {
from {
transform: scale(0.2, 0.5);
}
to {
transform: scale(1, 0.1);
}
}
보시다시피 우리의 유일한 조정은 그 기능scale()이다.우리의 목표는 공이 점점 가까워질 때 그림자를 스트레칭하는 것이다.
지금까지 우리는 이미 두 개의 가상 대상을 가진 전기능 반등 애니메이션을 가지고 있다.다음 단계에서 마지막 윤색을 합시다.
🏀 4 부분. - Dat 눈동자.
지금은 모든 것이 다 좋지만, 약간의 물건이 부족하다.물론 귀여운 눈과 그 진실한 그림자다.분명히 공에는 직사각형 음영이 있어서는 안 된다.
나는 <svg> 클래스에서 .logo 요소를 사용하여 나의 로고를 정의했다.
<div class="container">
<svg class="logo" ...>....</svg>
<div class="shadow"/></div>
</div>
그러나 <div> 요소를 보존하고 .logo 클래스에 PNG 이미지를 추가하여 background-image 속성을 사용하면 이 기능을 수행할 수 있습니다.그 밖에 우리는 background-size과border-radius를 사용해서 그것을 가운데에 두어야 한다.
.logo {
...
background-image: './path/to/logo.png';
background-size: cover;
border-radius:50% 50% 50% 50%;
}
마지막 터치는 radial-gradient() 기능을 추가하고 우리의 대상에 퇴색된 자연 음영을 만드는 것이다.
.shadow {
...
background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}
🎉🎉🎉 영예로고가 반등하고 있습니다!🎉🎉🎉
만약 당신이 여기서 당신의 CSS 부분을 잡으면, 위의 만년필은 당신을 기쁘게 할 것입니다.저의 엉망진창인 유머 감각을 인내심 있게 대해주셔서 감사합니다. 여기서 다시 뵐 수 있기를 바랍니다.
다른 사람들, 누가 반응 부품을 원하면 나의 나쁜 성질을 좀 더 참아야 한다.
⚛ 이곳은 극객만 반응한다
React 구성 요소에 대해 강력한 styled-components 라이브러리를 사용했습니다. 이것은 실제 CSS 코드를 작성하여 구성 요소의 스타일을 설정할 수 있도록 합니다.물론 전통적인 방법으로 CSS 파일을 구성 요소로 가져올 수 있습니다.
까다로운 문제는 <Logo> 구성 요소가 React 구성 요소로 렌더링된 <svg> 요소라는 것이다.웹 편집기(CLI 도구를 사용할 수도 있음)를 사용하여 svg 요소를 React 구성 요소로 쉽게 변환할 수 있습니다.viewPort 구성 요소에 포함 <Logo> 잊지 마세요!
회사 명
🏃♀️🏃 짜증나는 CSS 애호가
Conclusion
@keyframes bounce {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(var(--drop-height)) scale(1, 0.7);
}
}
Smooth movement is anything and everything!
.logo {
...
animation-name: bounce;
animation-duration: 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
animation-iteration-count: infinite;
}
우리의 그림자를 돌볼 때가 되었다.단계 #2에 대한 확장 분석을 고려하면 그림자 이동은 파이처럼 간단해야 한다. (파이를 구워 본 적이 없다면.)
@keyframes grow {
from {
transform: scale(0.2, 0.5);
}
to {
transform: scale(1, 0.1);
}
}
scale()이다.우리의 목표는 공이 점점 가까워질 때 그림자를 스트레칭하는 것이다.지금까지 우리는 이미 두 개의 가상 대상을 가진 전기능 반등 애니메이션을 가지고 있다.다음 단계에서 마지막 윤색을 합시다.
🏀 4 부분. - Dat 눈동자.
지금은 모든 것이 다 좋지만, 약간의 물건이 부족하다.물론 귀여운 눈과 그 진실한 그림자다.분명히 공에는 직사각형 음영이 있어서는 안 된다.
나는 <svg> 클래스에서 .logo 요소를 사용하여 나의 로고를 정의했다.
<div class="container">
<svg class="logo" ...>....</svg>
<div class="shadow"/></div>
</div>
그러나 <div> 요소를 보존하고 .logo 클래스에 PNG 이미지를 추가하여 background-image 속성을 사용하면 이 기능을 수행할 수 있습니다.그 밖에 우리는 background-size과border-radius를 사용해서 그것을 가운데에 두어야 한다.
.logo {
...
background-image: './path/to/logo.png';
background-size: cover;
border-radius:50% 50% 50% 50%;
}
마지막 터치는 radial-gradient() 기능을 추가하고 우리의 대상에 퇴색된 자연 음영을 만드는 것이다.
.shadow {
...
background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}
🎉🎉🎉 영예로고가 반등하고 있습니다!🎉🎉🎉
만약 당신이 여기서 당신의 CSS 부분을 잡으면, 위의 만년필은 당신을 기쁘게 할 것입니다.저의 엉망진창인 유머 감각을 인내심 있게 대해주셔서 감사합니다. 여기서 다시 뵐 수 있기를 바랍니다.
다른 사람들, 누가 반응 부품을 원하면 나의 나쁜 성질을 좀 더 참아야 한다.
⚛ 이곳은 극객만 반응한다
React 구성 요소에 대해 강력한 styled-components 라이브러리를 사용했습니다. 이것은 실제 CSS 코드를 작성하여 구성 요소의 스타일을 설정할 수 있도록 합니다.물론 전통적인 방법으로 CSS 파일을 구성 요소로 가져올 수 있습니다.
까다로운 문제는 <Logo> 구성 요소가 React 구성 요소로 렌더링된 <svg> 요소라는 것이다.웹 편집기(CLI 도구를 사용할 수도 있음)를 사용하여 svg 요소를 React 구성 요소로 쉽게 변환할 수 있습니다.viewPort 구성 요소에 포함 <Logo> 잊지 마세요!
회사 명
🏃♀️🏃 짜증나는 CSS 애호가
Conclusion
<div class="container">
<svg class="logo" ...>....</svg>
<div class="shadow"/></div>
</div>
.logo {
...
background-image: './path/to/logo.png';
background-size: cover;
border-radius:50% 50% 50% 50%;
}
.shadow {
...
background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}
React 구성 요소에 대해 강력한 styled-components 라이브러리를 사용했습니다. 이것은 실제 CSS 코드를 작성하여 구성 요소의 스타일을 설정할 수 있도록 합니다.물론 전통적인 방법으로 CSS 파일을 구성 요소로 가져올 수 있습니다.
까다로운 문제는
<Logo> 구성 요소가 React 구성 요소로 렌더링된 <svg> 요소라는 것이다.웹 편집기(CLI 도구를 사용할 수도 있음)를 사용하여 svg 요소를 React 구성 요소로 쉽게 변환할 수 있습니다.viewPort 구성 요소에 포함 <Logo> 잊지 마세요!회사 명
🏃♀️🏃 짜증나는 CSS 애호가
Conclusion
순수한 CSS를 사용하여 멋진 애니메이션을 만드는 것은 어렵지 않습니다.너는 심호흡을 하고 진정으로 원하는 것을 정의하기만 하면 된다!애니메이션을 실제 세계로 옮기면 기본적인 요구를 이해하는 데 도움을 줄 수 있습니다
기능 반응 샌드박스 검사, 나는 아래의 평론 부분에서 너의 더러운 점프 애니메이션을 기다릴 것이다👇👇👇