Rumah >hujung hadapan web >tutorial css >怎么纯用css代码使文字展示闪动效果？（代码示例）
怎么纯用css代码使文字展示闪动效果？（代码示例）
- 藏色散人asal
- 2018-08-10 10:04:0111588semak imbas
在网页中，通常设计师们为了凸显自己的产品主题，总会让文字或者加点特效，比如使文字不停的闪动，或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外，还有哪些方法可以实现这样的功能特效呢？对于略懂代码的朋友们来说，我们都知道css中文字体样式是有很多种的，例如倾斜、加粗等等。那么这里就给大家介绍一下，如何用css代码做出文字闪动效果，本篇有两种闪动方式可供大家参考。
一、css字体闪动（波浪闪动）具体示例代码如下：
<!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>以上代码可直接复制在本地测试，测试效果如下截图：
二、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 blink{} 定义keyframe动画，命名为blink 。
@-webkit-keyframes blink 添加兼容性前缀
.blink{}定义blink类
-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 其它浏览器兼容性前缀
本篇文章介绍了两种文字闪动特效方法，希望对有需要的朋友有所帮助。
【相关内容推荐】
一个网页标题title的闪动提示效果实现思路_javascript技巧
Atas ialah kandungan terperinci 怎么纯用css代码使文字展示闪动效果？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用CSS 和D3实现摆线摇摆的效果动画Artikel seterusnya：css3的动画(animation)属性的详解（附代码）