css故障文字动画
免费分享95套java实战项目,不仅有源码还有对应的开发视频,关注公众号『勾玉技术』回复“95”即可获取
首先给内容上hover和before,
.glitch:hover:before {
text-shadow: 4px 0 #ff3f1a;
animation: glitch-loop-1 .8s infinite ease-in-out alternate-reverse;
}
然后是hover和after:
.glitch:hover:after {
text-shadow: -5px 0 #00a7e0;
animation: glitch-loop-2 .8s infinite ease-in-out alternate-reverse;
}
定义好动画glitch-loop-1:
@-webkit-keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}
@keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}
单独的before:
.glitch:before {
left: -1px;
text-shadow: 1px 0 #ff3f1a;
}
单独的after:
.glitch:after {
left: 1px;
text-shadow: -1px 0 #00a7e0;
}
共同:
.glitch:after, .glitch:before {
content: attr(data-text);
position: absolute;
top: 0;
width: 100%;
background: rgba(0,0,0,0);
clip: rect(0,0,0,0);
}
css故障文字动画的更多相关文章
- [UWP]抄抄《CSS 故障艺术》的动画
1. 前言 什么是故障艺术(Glitch Art 风)?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球.故障艺术它模拟了画面信号 ...
- 奇思妙想 CSS 文字动画
之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...
- CSS 故障艺术
本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟 ...
- [UWP]使用AlphaMaskEffect提升故障艺术动画的性能(顺便介绍怎么使用性能探测器分析UWP程序)
前几天发布了抄抄<CSS 故障艺术>的动画这篇文章,在这篇文章里介绍了如何使用Win2D绘制文字然后配合BlendEffect制作故障艺术的动画.本来打算就这样收手不玩这个动画了,但后来又 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- 简单CSS实现闪烁动画(+1白话讲解)
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- 使用veloticy-ui生成文字动画
前言 最近要实现一个类似文字波浪线的效果,使用了velocity-ui这个动画库,第一个感觉就是使用简单,代码量少,性能优异,在此简单介绍一下使用方法,并实现一个看上去不错的动画.具体使用方法可以点击 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
随机推荐
- ubuntu 安装新版的qq,可支持下载文件等常用功能
说明:此版本的QQ基本完美,但是有个缺点就是历史记录有些会显示乱码! 注意:此方法能完美解决这篇文章http://www.cnblogs.com/EasonJim/p/7118693.html的所有问 ...
- OpenStack (neutron 网络服务)
neutron介绍 提供 OpenStack 虚拟网络服务,也是 OpenStack 重要的核心模块之一,该模块最开始是 Nova 的一部分,叫 nova-network,后来从 Nova 中分离出来 ...
- 算法-迪杰斯特拉算法(dijkstra)-最短路径
迪杰斯特拉算法(dijkstra)-最短路径 简介: 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中 ...
- 从官方文档中探索MySQL分页的几种方式及分页优化
概览 相比于Oracle,SQL Server 等数据库,MySQL分页的方式简单得多了,官方自带了分页语法 limit 语句: select * from test_t LIMIT {[offset ...
- 设计模式(七)——适配器模式(SpringMVC框架分析)
适配器模式 1 现实生活中的适配器例子 泰国插座用的是两孔的(欧标),可以买个多功能转换插头 (适配器) ,这样就可以使用了. 2 基本介绍 1) 适配器模式(Adapter Pattern)将某个类 ...
- Codeforces Round #627 (Div. 3) D - Pair of Topics(双指针)
题意: 有长为n的a,b两序列,问满足ai+aj>bi+bj(i<j)的i,j对数. 思路: 移项得:(ai-bi)+(aj-bj)>0,i<j即i!=j,用c序列保存所有ai ...
- GPLT L2-010 排座位 (并查集)
Tips: 数据范围较小时可把二维数组当做map<pair<int,int>,int>使用. #include <bits/stdc++.h> using name ...
- priority_queue()大根堆和小根堆(二叉堆)
#include<iostream> #include <queue> using namespace std; int main() { //对于基础类型 默认是大顶堆 pr ...
- Educational DP Contest E - Knapsack 2 (01背包进阶版)
题意:有\(n\)个物品,第\(i\)个物品价值\(v_{i}\),体积为\(w_{i}\),你有容量为\(W\)的背包,求能放物品的最大价值. 题解:经典01背包,但是物品的最大体积给到了\(10^ ...
- linux搭建网站
CentOS 1.安装 yum -y install nginx *或者安装指定版本,版本网址:http://nginx.org/packages/centos/7/x86_64/RPMS/ rpm ...