CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기-CSS 튜토리얼-php.cn

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

青灯夜游

풀어 주다： 2021-09-06 10:15:51

원래의

4435명이 탐색했습니다.

이전 글에서 "초실용성!" "CSS3를 사용하여 두 개의 이미지를 함께 오버레이하고 표시합니다 "에서는 CSS3를 사용하여 두 개의 이미지를 함께 오버레이하고 표시하는 두 가지 특수 효과를 공유했습니다. 이번에는 CSS를 사용하여 텍스트 스윙 애니메이션 효과를 만드는 방법에 대해 소개하겠습니다. 관심이 있으시면 배우시면 됩니다~

텍스트는 웹 페이지의 가장 일반적인 구성 요소입니다. 텍스트에 애니메이션 효과를 추가하면 웹을 만들 수 있습니다. 페이지가 더 매력적입니다. 오늘은 CSS 제목 텍스트 스윙 애니메이션 특수 효과를 공유하겠습니다. 와서 살펴보세요.

먼저 렌더링을 살펴보겠습니다.

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

이 효과를 얻는 방법을 연구해 보겠습니다.

먼저 HTML 부분을 만들고 텍스트가 포함된 h1 제목을 정의합니다.

<h1>Hello World !</h1>

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

그런 다음 정의를 시작합니다. 수정을 위한 CSS 스타일:

배경색

body {
  background: black;
}

로그인 후 복사

h1 제목 텍스트 스타일, text-Stroke 속성을 사용하여 흰색 획 추가

h1 {
text-align: center;
margin: 200px auto;
font-size: 4.5rem;
font-family: arial;
font-weight: 900;
color: transparent;
overflow: hidden;
-webkit-text-stroke: 4px white; 
}

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

h1 제목 텍스트 스타일, 배경 시리즈 속성 및 선형 그라데이션 사용 ()는 텍스트 배경

background: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(-45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(90deg, crimson 30%, transparent 30%, transparent 70%, crimson 70%)red;
background-size: 20px 20px, 20px 20px, 1px 1px;
background-position: 0 0, 0 0, 0 0;
-webkit-background-clip: text;

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

h1 제목 텍스트 스타일을 추가하고, 필터 속성을 사용하여 테두리 그림자를 추가합니다

filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 2px crimson);

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

그런 다음 애니메이션 효과를 추가하여 텍스트가 흔들리고 텍스트 배경도 움직입니다(시프트 효과 구현) ):

애니메이션 애니메이션을 h1 태그에 바인딩하고 두 개의 애니메이션 bg-shifth 및 Swing을 설정합니다. bg-shifth 애니메이션은 텍스트 배경을 제어하고 스윙 애니메이션은 텍스트 스윙을 제어합니다

animation: bg-shift 1s ease-in-out infinite alternate-reverse, swing 2s ease-in-out infinite;

로그인 후 복사

두 개의 @keyframes 규칙을 사용하고 각각에 대한 동작을 설정합니다. 두 애니메이션의 프레임입니다.

@keyframes bg-shift {
  from {
	background-position: 0 50px;
  }
}

@keyframes swing {
  0% {
	transform-origin: top;
	transform: perspective(550px)rotatex(55deg);
  }

  50% {
	transform: perspective(550px)rotatex(-55deg);
  }

  100% {
	transform-origin: top;
	transform: perspective(550px)rotatex(55deg);

  }
}

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

마지막으로 흔들릴 때 하이라이트 효과가 있는 최종 효과를 구현해 보겠습니다.

h1::before {
  content: "Hello World !";
  position: absolute;
  background: linear-gradient(transparent 30%, white, transparent 70%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px red;
}

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기

여기에 애니메이션 효과 bg-shift2를 추가하여 텍스트가 흔들릴 때 위치가 변경되도록 합니다. :

animation: bg-shift2 2s ease-in-out infinite alternate-reverse;

로그인 후 복사

@keyframes 규칙을 사용하여 애니메이션의 각 프레임에 대한 동작을 설정하세요.

@keyframes bg-shift2 {
  0% {
	background-position: 0 50px;
  }

  50% {

	background-position: 0 -50px;

  }

  100% {
	background-position: 0 50px;
  }
}

로그인 후 복사

CSS를 사용하여 흥미로운 텍스트 스윙 애니메이션 효과 만들기