CSS 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)
- 藏色散人원래의
- 2018-08-10 10:04:0111539검색
웹 페이지에서 디자이너는 제품 테마를 강조하기 위해 일반적으로 텍스트를 추가하거나 텍스트를 깜박이게 하거나 정기적으로 색상을 변경하는 등의 특수 효과를 추가합니다. 관심을 끌기 위한 목적을 달성하기 위해. 그렇다면 PS로 제작한 GIF 애니메이션 외에 이러한 특수 효과를 얻기 위해 어떤 다른 방법을 사용할 수 있을까요? 코드에 대해 조금 아는 사람들은 CSS에 이탤릭체, 볼드체 등 다양한 유형의 중국어 글꼴 스타일이 있다는 것을 알고 있습니다. 그래서 여기에서는 CSS 코드를 사용하여 텍스트 깜박임 효과를 만드는 방법을 소개합니다. 이 기사에는 참조용으로 두 가지 깜박임 방법이 있습니다.
1. CSS 폰트 플래싱(wave flashing)에 대한 구체적인 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>纯css代码测试文字闪动效果</title>
<style>
body{
background: #000;
}
h1.fb-glitch {
position: relative;
color: #abff79;
}
h1.fb-glitch:before {
left: -2px;
text-shadow: 2px 0 #0b391a;
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
h1.fb-glitch:before, h1.fb-glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
clip: rect(0, 0, 0, 0);
}
h1.fb-glitch:after {
left: 2px;
text-shadow: -1px 0 #1b5c16;
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
0% {
clip: rect(82px, 820px, 98px, 0); }
5.8823529412% {
clip: rect(17px, 820px, 4px, 0); }
11.7647058824% {
clip: rect(24px, 820px, 44px, 0); }
17.6470588235% {
clip: rect(24px, 820px, 111px, 0); }
23.5294117647% {
clip: rect(29px, 820px, 45px, 0); }
29.4117647059% {
clip: rect(114px, 820px, 115px, 0); }
35.2941176471% {
clip: rect(103px, 820px, 22px, 0); }
41.1764705882% {
clip: rect(49px, 820px, 32px, 0); }
47.0588235294% {
clip: rect(2px, 820px, 10px, 0); }
52.9411764706% {
clip: rect(80px, 820px, 44px, 0); }
58.8235294118% {
clip: rect(70px, 820px, 30px, 0); }
64.7058823529% {
clip: rect(27px, 820px, 79px, 0); }
70.5882352941% {
clip: rect(82px, 820px, 112px, 0); }
76.4705882353% {
clip: rect(27px, 820px, 2px, 0); }
82.3529411765% {
clip: rect(47px, 820px, 104px, 0); }
88.2352941176% {
clip: rect(53px, 820px, 102px, 0); }
94.1176470588% {
clip: rect(2px, 820px, 90px, 0); }
100% {
clip: rect(88px, 820px, 56px, 0); } }
@keyframes glitch-anim-2 {
0% {
clip: rect(88px, 820px, 68px, 0); }
5.8823529412% {
clip: rect(75px, 820px, 113px, 0); }
11.7647058824% {
clip: rect(80px, 820px, 40px, 0); }
17.6470588235% {
clip: rect(70px, 820px, 51px, 0); }
23.5294117647% {
clip: rect(47px, 820px, 78px, 0); }
29.4117647059% {
clip: rect(61px, 820px, 7px, 0); }
35.2941176471% {
clip: rect(94px, 820px, 1px, 0); }
41.1764705882% {
clip: rect(26px, 820px, 69px, 0); }
47.0588235294% {
clip: rect(91px, 820px, 62px, 0); }
52.9411764706% {
clip: rect(8px, 820px, 78px, 0); }
58.8235294118% {
clip: rect(17px, 820px, 97px, 0); }
64.7058823529% {
clip: rect(66px, 820px, 48px, 0); }
70.5882352941% {
clip: rect(66px, 820px, 85px, 0); }
76.4705882353% {
clip: rect(46px, 820px, 12px, 0); }
82.3529411765% {
clip: rect(69px, 820px, 68px, 0); }
88.2352941176% {
clip: rect(38px, 820px, 7px, 0); }
94.1176470588% {
clip: rect(83px, 820px, 32px, 0); }
100% {
clip: rect(110px, 820px, 95px, 0); } }
</style>
</head>
<body>
<h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1>
</body>
</html>위 코드를 직접 복사하여 로컬에서 테스트할 수 있습니다. 테스트 효과는 다음과 같습니다.
2. CSS 글꼴 플래싱(그라디언트 플래싱)에 대한 구체적인 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css代码闪动效果测试</title>
</head>
<body>
<div class="main">
文字闪动测试：<span class="blink">文字闪动效果</span>
</div>
<style type="text/css">
.main{
color: #666;margin-top: 50px;
}
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
.blink{
color: #dd4814;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
</style>
</body>
</html>위 코드를 직접 복사하여 로컬에서 테스트할 수 있습니다. 테스트 효과는 다음과 같습니다.
참고 : 두 번째 그라데이션 방법의 주요 아이디어는 투명도를 변경하는 것입니다. 텍스트의 그라데이션 깜박임을 실현하려면
@keyframes 깜박임{}은 키프레임 애니메이션을 정의하고 깜박임이라는 이름을 지정합니다.
@-webkit-keyframes 깜박임 호환성 접두사 추가
.blink{}는 깜박임 클래스 정의
-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 기타 브라우저 호환성 접두사
이 글에서는 텍스트 플래싱 특수 효과의 두 가지 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.
【관련 콘텐츠 추천】
CSS3을 사용하여 3차원 텍스트 동적 텍스트 효과 구현
A 웹 페이지 제목 깜박이는 프롬프트 effect_javascript 기술 구현을 위한 아이디어
위 내용은 CSS 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!