순수 CSS를 사용한 동적 텍스트 효과의 예

웹사이트에서 매체 효과를 본 적이 있으실 겁니다. 페이지가 열리면 텍스트와 그림이 모두 지정된 시간에 따라 변경됩니다. 오늘은 순수 CSS를 사용하여 이 효과를 얻는 방법을 소개합니다. 봐.

멋진 웹사이트를 자주 볼 수 있습니다

그런 웹사이트에서는 페이지를 열자마자 지정된 시간에 따라 텍스트와 그림이 모두 바뀌는 것을 볼 수 있습니다. 원리는 매우 간단하며 주로 CSS의 animation 속성을 사용합니다.

다음으로 텍스트와 그림의 애니메이션 효과를 얻기 위해 현재 프로젝트를 예로 들어보겠습니다.

HTML 코드 작성:

코드 복사

코드는 다음과 같습니다.

<section class="rw-wrapper">
<span class="span-title">文字题目</span>
<h2 class="rw-sentence">
</h2>
</section>

현재 일반 프레임워크는 섹션 태그, 스팬(선호에 따라 추가)을 포함하여 작성되었습니다. ) 및 h2 태그입니다. 다음으로 텍스트 코드를 추가하세요. h2에 코드를 입력하세요.

코드 복사

코드는 다음과 같습니다.

<p class="rw-words rw-words-1">
<span>内容1</span>
<span>内容2</span>
...
</p>

첫 번째 텍스트 애니메이션 HTML입니다.

코드 복사

코드는 다음과 같습니다.

<p class="rw-words rw-words-2">
<span>内容1</span>
...
</p>

두 번째 텍스트 애니메이션 HTML입니다.

코드 복사

코드는 다음과 같습니다.

//同理
<p class="rw-words rw-words-3">
<span><img src="图片路径" width="XX" height="XX"></span>
...
</p>

이미지 변형 효과는 위 GIF와 같습니다. 그림이 오른쪽에서 슬라이드되어 변경됩니다.

좋아, 이제 HTML 코드가 완료되었으므로 이제 핵심 부분인 CSS 애니메이션과 글꼴 스타일을 구현해 보겠습니다.

CSS 코드 작성

코드 복사

코드는 다음과 같습니다.

.rw-words{
-webkit-perspective:800px;
-moz-perspective:800px;
-o-perspective:800px;
-ms-perspactive:800px;
perspactive:800px;
}

그런데spective 속성은 뷰에서 3D 요소까지의 거리를 픽셀 단위로 정의합니다. 요소에 대한 관점 속성을 정의하면 해당 하위 요소는 요소 자체가 아닌 관점 효과를 얻습니다. 숫자 800px은 뷰에서 요소까지의 거리를 나타냅니다. -moz는 Firefox 브라우저 개인 속성을 나타내고, -ms는 IE 브라우저 개인 속성을 나타내고, -webkit은 Chrome 및 Safari 개인 속성을 나타내고, -o는 Opera 브라우저 개인 속성을 나타냅니다.

코드를 복사하세요

코드는 다음과 같습니다.

.rw-words span{
white-space:nowrap; //文字不允许换行
overflow:hidden;
}

실제 상황에 따라 구체적인 태그 위치를 설정하세요.

코드 복사

코드는 다음과 같습니다.

.rw-words-1 span{
-webkit-animation: rotateWordsFirst 10s linear infinite 0s;
-o-animation: rotateWordsFirst 10s linear infinite 0s;
-moz-animation: rotateWordsFirst 10s linear infinite 0s;
-ms-animation: rotateWordsFirst 10s linear infinite 0s;
animation:rotateWordsFirst 10s linear infinite 0s;
}

여기서 애니메이션 효과를 사용해보세요! 먼저,rotateWordsFirst는 애니메이션의 이름이고, 10s는 전체 애니메이션이 한 번 완료되는 데 걸리는 시간, 선형은 사용된 시간 곡선, 무한은 무제한으로 반복되는 것입니다.

애니메이션 구문 정보:

코드 복사

코드는 다음과 같습니다.

animation: name duration timing-function delay iteration-count direction;

animation-name: 선택기에 바인딩해야 하는 키프레임 이름을 지정합니다.

animation-duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

animation-timing-function: 애니메이션의 속도 곡선을 지정합니다.

animation-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다.

animation-iteration-count: 애니메이션을 재생해야 하는 횟수를 지정합니다(무한 캐러셀).

animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

자세히 알고 싶으면 CSS 시리즈 animationi로 검색해 보세요.

다음으로 또 다른 유형의 애니메이션입니다.

코드 복사

코드는 다음과 같습니다.

.rw-words-2 span{
-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;
-o-animation: rotateWordsFirst 10s ease-in infinite 0s;
-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;
-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;
animation:rotateWordsFirst 10s ease-in infinite 0s;
}

ease-in 설명:

ease는 느린 속도로 시작해서 빨라졌다가 느린 속도로 끝나는 전환 효과를 지정합니다. 이즈 인은 느린 속도로 시작하도록 지정합니다. 전환 효과는 느린 속도로 끝나는 전환 효과를 지정합니다. 이즈 인 아웃은 느린 속도로 시작하고 끝나는 전환 효과를 지정합니다. 효과)

마찬가지로 .rw-words의 경우 -3 범위도 같은 방식으로 설정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

.rw-words span：nth-child(1){
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}

:nth-child(n) 선택기는 요소 유형에 관계없이 상위 요소에 속한 N번째 하위 요소와 일치합니다. n은 숫자, 키워드 또는 수식일 수 있습니다.

코드 복사

코드는 다음과 같습니다.

.rw-words span:nth-child(n) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
...

텍스트 간 표시 지연을 달성하려면 다른 선택기를 설정하세요.

코드 복사

코드는 다음과 같습니다.

@-webkit-keyframes rotateWordsFirst/second {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
//此属性查看animation
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; } //设置不透明级别
20% { opacity: 0; }
100% { opacity: 0; }
}

keyframes는 각 애니메이션의 타임라인을 정의하며, 특정 시간에 애니메이션이 작동하는 요소의 상태를 설정할 수 있습니다. 애니메이션과 함께 사용됩니다.

그런 다음 -o, -moz, -ms 등과 같이 각 브라우저에 대한 적응을 작성합니다.

애니메이션 속성 외에도 텍스트와 이미지의 회전 및 크기 조정과 같은 효과를 얻을 수 있는 변형 속성을 사용해 볼 수도 있습니다. 위 내용은 동적 텍스트 효과를 얻기 위해 순수한 CSS를 사용하는 것에 관한 것입니다. 모든 사람이 CSS 도움말 사용법을 배우는 데 도움이 될 것입니다.

관련 추천:

CSS 텍스트 글꼴 색상 설정 방법(CSS 색상)

위 내용은 순수 CSS를 사용한 동적 텍스트 효과의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!