css文字闪烁效果
2024-10-20 16:07:07
<!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>
最新文章
- 简单实用JSTL标签库
- [转]: 两分钟彻底让你明白Android Activity生命周期(图文)!
- STM32固件库3.5+uCOS2.86移植（转自暴走的工程师）
- BZOJ4446: [Scoi2015]小凸玩密室
- SQLite的使用--SQLite语句
- 局域网所有机器都能连接MySQL数据库的设置命令
- POJ_1287_mst
- linux命令行下使用R语言绘图
- Windows 8上强制Visual Studio以管理员身份运行
- 【转】如何开启notepad++函数列表功能
- ural 1020 Rope
- chroot_local_user和chroot_list_enable含义
- The APR based Apache Tomcat Native library tomcat启动错误
- Hadoop分布式存储系统HDFS
- [转]GREP for Windows
- 常见的js算法
- PyQT5速成教程-3 布局管理
- Redis入门高级部分
- 使用hadoop eclipse plugin提交Job并添加多个第三方jar
- js过滤HTML标签以及&nbsp;