首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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文字闪烁内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

 

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

- Author -

冉冉胜起

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3 rgb and rgba（透明色）的使用详解
Sep 25 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
css3属性选择器 “~”（波浪号） “，”（逗号） “+”（加号）和 “>”（大于号）
Apr 19 HTML / CSS
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
土耳其购物网站(10) 波兰购物网站(52) 卡塔尔购物网站(3) 新西兰购物网站(42) 斯洛伐克购物网站(7) 捷克购物网站(26) 奥地利购物网站(28) 沙特阿拉伯购物网站(9) 智利购物网站(5) 阿联酋购物网站(26)
You might like
在apache下限制每个虚拟主机的并发数！！！！
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）
2014/08/15 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
Python对文件操作知识汇总
2016/05/15 Python
PyQt5实现五子棋游戏（人机对弈）
2020/03/24 Python
pyqt5实现登录界面的模板
2020/05/30 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
俄罗斯设计师家具购物网站：The Furnish
2019/12/01 全球购物
C语言基础笔试题
2013/04/27 面试题
安全保证书范文
2014/04/29 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
服务承诺书
2015/01/19 职场文书
2015教师年度考核评语
2015/03/25 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
学校运动会简讯
2015/07/20 职场文书
运动会广播稿100字
2015/08/19 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
MySQL表的增删改查基础教程
2021/04/07 MySQL
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis