字体出现闪烁效果html,CSS3实现文字闪烁效果的多种形式代码
文字闪烁效果一
通过改变透明度来实现文字的渐变闪烁,代码如下:
文字闪烁:闪烁效果
如果不需要渐变闪烁效果,我们可以在keyframe动画中定义50%,50.1%的opacity的值。如下:@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
文字闪烁效果二
通过设置text-shadow的值,来实现文字阴影闪烁的效果,代码如下:
文字闪烁效果三
利用背景图片或者背景渐变,实现文字颜色的闪烁效果,代码如下:闪烁效果
.box{
display: inline-block; font-size: 20px; 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;
}
}
字体出现闪烁效果html,CSS3实现文字闪烁效果的多种形式代码相关推荐
- html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁 星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
- css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...
- css3实现文字闪烁效果的三种展示方式
转载自:http://www.fly63.com/article/detial/616 文字闪烁效果一: 通过改变透明度来实现文字的渐变闪烁,效果如下: 文字带渐变效果的闪烁: <div cla ...
- html字体悬浮效果,CSS 3.0文字悬停跳动特效代码
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0文字悬停跳动特效 * { margin: 0; padding: 0; } b ...
- css3 实现文字闪烁效果的三种方式
1.通过改变透明度来实现文字的渐变闪烁,效果图: <!DOCTYPE html> <html> <head> </head> <title> ...
- 文字闪烁效果 CSS + HTML
文字闪烁效果 CSS 写在前面 好好学习,天天向上! 效果图 绝美的效果 实现过程 先给没字体添加一些普通的样式,颜色设置为透明 给文字设置一个动画效果,通过text-shadow属性来实现变亮的效果 ...
- openlayers通过overlay html5 css3设置图标闪烁效果
openlayers通过overlay html5 css3设置图标闪烁效果 http://www.giserdqy.com/gis/opengis/ol4/115
- CSS3发光文字字体切换特效
index.html代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset=& ...
- html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
- android 文字闪烁效果,Android Shader应用开发之霓虹闪烁文字效果
本文实例为大家分享了android霓虹闪烁文字效果的具体代码,供大家参考,具体内容如下 package com.example.apple.shaderdemo; import android.con ...
最新文章
- windows10下,from skimage import morphology 报错的解决办法
- python打开文件并读取内容-Python实现的读取文件内容并写入其他文件操作示例
- HDU - 2389 Rain on your Parade(Hopcroft-Krap算法求二分图最大匹配)
- kirin710f是什么处理器_麒麟710a与麒麟710f哪个好?对比区别哪款性能更好一些
- 比较Spring AOP和AspectJ
- Ansible1:简介与基本安装【转】
- 阶段3 2.Spring_02.程序间耦合_7 分析工厂模式中的问题并改造
- 设计模式-建造者模式(Builder)2种实现方式(经典Builder模式、链式Builder模式)
- viper12a电源电路图_VIPER22A VIPER12A工作原理引脚功能应用电路图纸与分析
- 旋转的描述【1】——方向余弦矩阵
- [C#][原创]Magick.NET使用时一些弱点简介
- 谷歌图形化HTML5网页编辑器Google Web Designer
- 一个屌丝程序猿的人生(四十)
- Android双目三维重建:Android双目摄像头实现双目测距
- Windows--如何使用PE安装官方ISO镜像
- 普通打印机如何才能实现双面打印呢
- 三、Oracle/支付宝/旺旺
- 【转】Guide to Elliptic Curve Cryptography(ECC椭圆曲线算法1)
- 马云用大数据力证女性让世界更美好
- html右侧有白边,html5有白边解决办法