웹 애플리케이션을 개발하는 동안 개발자는 항상 CSS 스타일링 속성을 효과적으로 구현하는 경향이 있습니다. CSS는 색상, 위치, 정렬 등과 같은 여러 스타일 속성을 제공합니다. 이러한 속성 외에도 요소에 대한 애니메이션 작업을 설정할 수 있습니다. 이를 위해 “ @키프레임 에스 ” 규칙이 사용됩니다.
이 기사에서는 CSS로 깜박이는 텍스트를 만드는 방법을 보여줍니다.
CSS로 깜박이는 텍스트를 만드는 방법?
텍스트를 깜박이게 하려면 CSS ' 불투명 ' 속성이 ' @키프레임 ” 규칙을 적용할 수 있습니다. 아래 예를 확인하십시오.
예제 1: 깜박이는 텍스트 만들기
HTML에서 ' <사업부> ' 요소를 지정하고 ' 깜박임 스타일 ' 수업. 다음으로 ' ” 요소를 사용하여 div 요소 사이의 제목을 지정합니다.
< 사업부 수업 = '깜박임 스타일' >
< h3 > 리눅스 h3 >
사업부 >
계속해서 HTML 요소의 스타일을 지정해 보겠습니다.
스타일 'blink-style' div
.blink 스타일 {배경: rgb ( 0 , 0 , 0 ) ;
}
CSS ' 배경 ” 속성은 클래스가 있는 div 요소에 적용됩니다. 깜박임 스타일 '.
스타일 'h3' 요소
h3 {텍스트 정렬: 가운데;
font-family: Verdana;
색깔: #ffc310;
애니메이션: 깜박임 텍스트 1.9초 선형 무한;
글꼴 크기: 6em;
}
HTML ' ” 요소는 다음 CSS 속성으로 장식됩니다.
- “ 텍스트 정렬 ” 속성은 요소 텍스트의 정렬을 설정합니다.
- “ 글꼴 모음 ”는 텍스트의 글꼴 스타일을 정의합니다.
- “ 색깔 ” 요소의 텍스트를 색칠하는 데 사용됩니다.
- “ 생기 ”는 애니메이션 이름, 애니메이션 기간, 애니메이션 타이밍 함수 및 animation-iteration-count 속성 값을 지정하는 속기 속성입니다.
- “ 글꼴 크기 ” 속성은 주로 “px” 및 “em” 단위로 글꼴 크기를 조정합니다.
'blink-text' 애니메이션에 '@keyframe 규칙' 적용
@ 키프레임 깜박임 텍스트 {0 % {
불투명: 0 ;
}
오십 % {
불투명: 하나 ;
}
100 % {
불투명: 0 ;
}
애니메이션 이름 ' 깜박임 텍스트 ”는 애니메이션 속성에 지정되어 있습니다. “ @키프레임 ” 규칙은 아래와 같이 서로 다른 간격으로 애니메이션 동작을 나타내는 애니메이션 이름 앞에 추가됩니다.
- 에 ' 0% ” 애니메이션에서 텍스트 불투명도는 0으로 설정됩니다.
- 에 ' 오십% ” 애니메이션에서 텍스트 불투명도는 1로 설정됩니다.
- 에 ' 100% ” 애니메이션, 텍스트 불투명도는 0으로 설정됩니다.
산출
예 2: 여러 번 깜박이는 텍스트 만들기
HTML에서 여러 개의 깜박이는 텍스트를 만들려면 아래 단계를 따르십시오.
- 먼저 ' <사업부> ” 요소에 클래스를 지정하고 “ 텍스트 사업부 '.
- 그런 다음 두 개의 '를 추가하십시오. ” 일부 텍스트를 포함하는 요소.
- 첫 번째 '
' 요소에는 ' 섬광 '.
- 두 번째 클래스에는 두 개의 클래스가 할당됩니다. 섬광 ' 그리고 ' 하나 '. 스타일 지정 속성을 선언하기 위해 두 클래스 모두 CSS에서 액세스됩니다.
< 피 수업 = '섬광' > 반짝 반짝 피 >
< 피 수업 = '번쩍이는 것' > 작은 별 * 피 >
사업부 >
이제 CSS 섹션을 확인하여 HTML ' ” 요소.
스타일 'text-div' div
.텍스트-div {너비: 400px;
여백: 자동차;
배경색: rgb ( 42 , 49 , 49 ) ;
패딩: 8px;
}
“ .텍스트-div ”는
- “ 너비 ” 속성은 요소의 너비를 조정합니다.
- “ 여유 ” 요소 주위에 공간을 추가합니다.
- “ 배경색 ” 배경색을 설정합니다.
- “ 심 ” 요소의 경계 내에 공간을 생성합니다.
스타일 '깜박이는' 클래스
.섬광 {색상: 노란색;
글꼴 크기: 40px;
font-family: 필기체;
글꼴 두께: 굵게;
애니메이션: 깜박이는 스타일의 0.6초 선형 무한;
}
“ .섬광 ”는 HTML
태그에 액세스하는 데 사용됩니다. 다음 속성은 이 클래스에서 구현됩니다.
- “ 글꼴 두께 ”는 글꼴의 두께를 나타냅니다.
- 다른 속성은 위 섹션에서 설명합니다.
'깜박이는 스타일' 애니메이션에 '@keyframe 규칙' 적용
@ 키프레임 깜박임 스타일 {0 % {
불투명: 0 ;
}
}
'의 동작을 조정합니다. 깜박임 스타일 ”를 사용한 애니메이션 @키프레임 ' 규칙. 애니메이션 시작 시 텍스트 불투명도는 0이 되어 요소의 완전한 투명도 수준을 나타냅니다.
두 번째 ' ” 요소가 약간 다른 클래스 “ 하나 ”는 다음 애니메이션 스타일로 선언됩니다.
스타일 '원' 클래스
.하나 {애니메이션: 하나의 1s 선형 무한;
}
@ 키프레임 하나 {
오십 % {
불투명: 0 ;
}
}
산출
다양한 CSS 스타일 속성을 사용하여 깜박이는 텍스트를 만드는 방법을 효과적으로 배웠습니다.
결론
HTML에서는 여러 CSS 속성을 사용하여 텍스트 스타일을 깜박입니다. “ 생기 ' 그리고 ' 불투명 ” 속성은 일반적으로 이 컨텍스트에서 정의됩니다. 깜박임 동작을 조정하려면 ' @키프레임 ” 애니메이션 속성에 대해 규칙이 선언되었습니다. 이 기사에서는 CSS를 사용하여 HTML에서 깜박이거나 깜박이는 텍스트를 만드는 방법을 설명했습니다.