css3 实现文字闪烁效果的三种方式示例代码


Posted in HTML / CSS onApril 25, 2021

1.通过改变透明度来实现文字的渐变闪烁,效果图:

css3 实现文字闪烁效果的三种方式示例代码

<!DOCTYPE html>
<html>
<head>
</head>
<title>文字闪烁</title>
<body>
<div class="blink">
星星之火可以燎原
</div>
</body>
<style>
.myclass{
    	letter-spacing:5px;/*字间距*/
    	color: red;
    	font-weight:bold;
    	font-size:46px;
    }
	
/* 定义keyframe动画,命名为blink */
@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类*/
.blink{
	color: red;
	font-size:46px;
    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>
</html>

如果不需要渐变闪烁效果,我们可以在keyframe动画中定义50%,50.1%的opacity的值。如下:

css3 实现文字闪烁效果的三种方式示例代码

@-webkit-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }

2.利用背景图片或者背景渐变,实现文字颜色的闪烁效果,效果图:

css3 实现文字闪烁效果的三种方式示例代码

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
        .blink{ 
    	display: inline-block;
    	font-size: 46px;
    	margin: 10px;
    	background: linear-gradient(left, #f71605, #e0f513); 
        background: -webkit-linear-gradient(left, #f71605, #e0f513);
        background: -o-linear-gradient(right, #f71605, #e0f513);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation:scratchy 0.253s linear forwards infinite;
		/* 其它浏览器兼容性前缀 */
	    -webkit-animation:scratchy 0.253s linear forwards infinite;
	    -moz-animation: scratchy 0.253s linear forwards infinite;
	    -ms-animation: scratchy 0.253s linear forwards infinite;
	    -o-animation: scratchy 0.253s linear forwards infinite;
    }  
   @keyframes  scratchy {
		0% {
			background-position: 0 0;
		}
		25% {
			background-position: 0 0;
		}
		26% {
			background-position: 20px -20px;
		}
		50% {
			background-position: 20px -20px;
		}
		51% {
			background-position: 40px -40px;
		}
		75% {
			background-position: 40px -40px;
		}
		76% {
			background-position: 60px -60px;
		}
		99% {
			background-position: 60px -60px;
		}
		100% {
			background-position: 0 0;
		}
	}
	/* 添加兼容性前缀 */
	@-webkit-keyframes scratchy {
	    0% {
			background-position: 0 0;
		}
		25% {
			background-position: 0 0;
		}
		26% {
			background-position: 20px -20px;
		}
		50% {
			background-position: 20px -20px;
		}
		51% {
			background-position: 40px -40px;
		}
		75% {
			background-position: 40px -40px;
		}
		76% {
			background-position: 60px -60px;
		}
		99% {
			background-position: 60px -60px;
		}
		100% {
			background-position: 0 0;
		}
	}
	@-moz-keyframes scratchy {
	    0% {
			background-position: 0 0;
		}
		25% {
			background-position: 0 0;
		}
		26% {
			background-position: 20px -20px;
		}
		50% {
			background-position: 20px -20px;
		}
		51% {
			background-position: 40px -40px;
		}
		75% {
			background-position: 40px -40px;
		}
		76% {
			background-position: 60px -60px;
		}
		99% {
			background-position: 60px -60px;
		}
		100% {
			background-position: 0 0;
		}
	}
	@-ms-keyframes scratchy {
	   0% {
			background-position: 0 0;
		}
		25% {
			background-position: 0 0;
		}
		26% {
			background-position: 20px -20px;
		}
		50% {
			background-position: 20px -20px;
		}
		51% {
			background-position: 40px -40px;
		}
		75% {
			background-position: 40px -40px;
		}
		76% {
			background-position: 60px -60px;
		}
		99% {
			background-position: 60px -60px;
		}
		100% {
			background-position: 0 0;
		}
	}
	@-o-keyframes scratchy {
	   0% {
			background-position: 0 0;
		}
		25% {
			background-position: 0 0;
		}
		26% {
			background-position: 20px -20px;
		}
		50% {
			background-position: 20px -20px;
		}
		51% {
			background-position: 40px -40px;
		}
		75% {
			background-position: 40px -40px;
		}
		76% {
			background-position: 60px -60px;
		}
		99% {
			background-position: 60px -60px;
		}
		100% {
			background-position: 0 0;
		}
	}
    </style>  
    </head>  
    <body>  
        <div class="blink">星星之火可以燎原</div>
    </body>  
</html>

3.通过设置text-shadow的值,来实现文字阴影闪烁的效果,效果图:

css3 实现文字闪烁效果的三种方式示例代码

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
        .blink{ 
    	font-size: 46px; 
    	color:#4cc134; 
    	margin: 10px;
    	animation: changeshadow 1s  ease-in  infinite ;
    	/* 其它浏览器兼容性前缀 */
	    -webkit-animation: changeshadow 1s linear infinite;
	    -moz-animation: changeshadow 1s linear infinite;
	    -ms-animation: changeshadow 1s linear infinite;
	    -o-animation: changeshadow 1s linear infinite;
    }  
    @keyframes changeshadow {  
        0%{ text-shadow: 0 0 4px #4cc134}  
        50%{ text-shadow: 0 0 40px #4cc134}  
        100%{ text-shadow: 0 0 4px #4cc134}  
    }
    /* 添加兼容性前缀 */
	@-webkit-keyframes changeshadow {
	  0%{ text-shadow: 0 0 4px #4cc134}  
          50%{ text-shadow: 0 0 40px #4cc134}  
          100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-moz-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-ms-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-o-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
    </style>  
    </head>  
    <body>  
        <div class="blink">星星之火可以燎原</div>
    </body>  
</html>

感谢博客:https://blog.csdn.net/art_people/article/details/104768666/

到此这篇关于css3 实现文字闪烁效果的三种方式示例代码的文章就介绍到这了,更多相关css3文字闪烁内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python 逐行分割大txt文件的方法
2017/10/10 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python scatter函数用法实例详解
2020/02/11 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
党员思想汇报范文
2013/12/30 职场文书
《我的信念》教学反思
2014/02/15 职场文书
后勤主管岗位职责
2014/03/01 职场文书
应聘会计求职信
2014/06/11 职场文书
语文课外活动总结
2014/08/27 职场文书
求职推荐信范文
2015/03/27 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书