css文字闪烁效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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文字闪烁效果的更多相关文章
- 文字闪烁效果 CSS + HTML
文字闪烁效果 CSS 写在前面 好好学习,天天向上! 效果图 绝美的效果 实现过程 先给没字体添加一些普通的样式,颜色设置为透明 给文字设置一个动画效果,通过text-shadow属性来实现变亮的效果 ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- CSS文字垂直居中的一些问题
说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢 ...
- CSS文字过多显示省略号
CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
随机推荐
- 玩转树莓派《三》——Scratch
今天大姨妈折磨了一整个白天,稍微好点,现在打开实验楼,看到有个朋友回答了关于ubuntu上面操作SQL 的时候到处数据到txt文件,被批评没有思考问题,或许吧,虽然那个权限我现在想起确实是可读可写的, ...
- 版本管控---Visual Source Safe(VSS)和Team Foundation Server(TFS)
Visual Source Safe 是用于软件专业开发人员的源代码管理工具 Team Foundation Server是为开发团队提供集成源代码管理.问题跟踪和进程管理的更改管理系统 相同点 1. ...
- [转]C# 6.0 的新特性
本文的内容包括引入C#6.0中的新的语言特性有哪些. 还有已经被引入的代码名称为 “Roslyn”新编译器. 编译器是开放源码的,并且可以从 codeplex 网站的这个地址下载到源代码: https ...
- WCF 之部署（2010版本之上）
首先,在WIN系统下打开IIS,每种操作系统是不同的,请不要弄混. 1.控制面板---左下放的程序---启用或关闭Windows功能,如图: 2.找到Internet Information Serv ...
- CSS 基础点
Part1:font:inherit 字体的设置 设置所有元素的字体保持一致: 所有元素:*{font:inherit;} /* IE8+ */ body体用percent:body{font:100 ...
- 03-Tomcat服务器
一.Java分类 JavaSE Java的标准版,一般用来开发桌面应用程序, 但是在开发桌面应用程序上相对VB,Delphi,VC++并没有什么优势. JavaEE 也就是Java Enterpris ...
- Generator函数自执行
Generator函数实现 function* gen(x){ var y = yield x + 2; return y } //1.调用g函数会返回一个内部的指针 var g = gen(1); ...
- javascript 理解继承
一.继承-通过原型实现继承 function Father() { this.FatherSkin = "yellow"; }; Father.prototype.getFathe ...
- Ubuntu增加一个用户并给普通用户赋予root权限的方法
1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户#passwd tommy //修改密码Changing pass ...
- C# 读取excel用户列表过滤一个月内未收到外部邮件已离职的员工
1.通过aspose.cells读取excel中的数据并添加到list中 //存储从excel中读取出来的数据 List<UserInfo> lst_userinfo = new List ...