css实现文字裁切效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
@keyframes tit-ani-1 {
0% {
clip: rect(7px, 820px, 39px, 0); }
5.8823529412% {
clip: rect(40px, 820px, 9px, 0); }
11.7647058824% {
clip: rect(105px, 820px, 37px, 0); }
17.6470588235% {
clip: rect(53px, 820px, 17px, 0); }
23.5294117647% {
clip: rect(57px, 820px, 29px, 0); }
29.4117647059% {
clip: rect(47px, 820px, 21px, 0); }
35.2941176471% {
clip: rect(45px, 820px, 39px, 0); }
41.1764705882% {
clip: rect(4px, 820px, 21px, 0); }
47.0588235294% {
clip: rect(6px, 820px, 63px, 0); }
52.9411764706% {
clip: rect(30px, 820px, 52px, 0); }
58.8235294118% {
clip: rect(41px, 820px, 59px, 0); }
64.7058823529% {
clip: rect(86px, 820px, 107px, 0); }
70.5882352941% {
clip: rect(112px, 820px, 76px, 0); }
76.4705882353% {
clip: rect(103px, 820px, 13px, 0); }
82.3529411765% {
clip: rect(17px, 820px, 6px, 0); }
88.2352941176% {
clip: rect(13px, 820px, 72px, 0); }
94.1176470588% {
clip: rect(70px, 820px, 85px, 0); }
100% {
clip: rect(38px, 820px, 9px, 0); } } @keyframes tit-ani-2 {
0% {
clip: rect(66px, 820px, 81px, 0); }
5.8823529412% {
clip: rect(29px, 820px, 26px, 0); }
11.7647058824% {
clip: rect(61px, 820px, 1px, 0); }
17.6470588235% {
clip: rect(70px, 820px, 50px, 0); }
23.5294117647% {
clip: rect(51px, 820px, 93px, 0); }
29.4117647059% {
clip: rect(31px, 820px, 32px, 0); }
35.2941176471% {
clip: rect(36px, 820px, 53px, 0); }
41.1764705882% {
clip: rect(100px, 820px, 100px, 0); }
47.0588235294% {
clip: rect(105px, 820px, 102px, 0); }
52.9411764706% {
clip: rect(20px, 820px, 22px, 0); }
58.8235294118% {
clip: rect(75px, 820px, 4px, 0); }
64.7058823529% {
clip: rect(13px, 820px, 14px, 0); }
70.5882352941% {
clip: rect(23px, 820px, 93px, 0); }
76.4705882353% {
clip: rect(53px, 820px, 70px, 0); }
82.3529411765% {
clip: rect(42px, 820px, 114px, 0); }
88.2352941176% {
clip: rect(43px, 820px, 78px, 0); }
94.1176470588% {
clip: rect(54px, 820px, 76px, 0); }
100% {
clip: rect(108px, 820px, 17px, 0); } }
.tit-ani {
position: relative;
font-weight:normal;
width: 300px;
margin: 20px auto;
}
.tit-ani:before, .tit-ani:after {
content: "三月初一";
position: absolute;
top: 0;
left: 0;
width: 100%;
clip: rect(0, 0, 0, 0); }
.tit-ani:after {
left: 2px;
text-shadow: -1px 0 red;
animation: tit-ani-1 2s infinite linear alternate-reverse;
}
.tit-ani:before {
left: -2px;
text-shadow: 2px 0 #000;
animation: tit-ani-2 3s infinite linear alternate-reverse;
}
</style>
</head>
<body>
<h1 class="tit-ani">
三月初一
</h1>
</body>
</html>
css实现文字裁切效果的更多相关文章
- （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- CSS环绕球体的旋转文字-3D效果
代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...
- html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- JS 黑客帝国文字下落效果
黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- css实现气泡框效果
前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种 ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
随机推荐
- 利用jquery的ajax实现跨域，内部其实是jsonp协议了，不是XHRhttp协议
一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...
- HA_Ship Transcation Log 事务日志传送
环境准备: 虚拟机3台,INTER-DC, INTER-SQLA, INTER-SQLB 创建域帐户 INTER\MSSQLSERVER.SERVICE,INTER\AGENT.SERVICE,分别添 ...
- ssh 远程拷贝文件到本地
scp userA@192.168.0.205:/home/xinshang-toolkit/wwwroot/macheng/tianxiaohuanew-mc.dsceshi.cn/public/ ...
- 高并发系列之——MQ消息中间件Kafka
1.前言 1.1 包路径和源码 下载链接 基于发布订阅的分布式消息系统,使用scala语言编写. 特点:采用分区机制,每个分区可以放到不同的服务器上,提高了吞吐率,同时基于磁盘存储,以及副本机制可以确 ...
- centos 安装cloud foundry CLI
步骤: 1.wget -O /etc/yum.repos.d/cloudfoundry-cli.repo https://packages.cloudfoundry.org/fedora/cloudf ...
- lumen配置日志daily模式
默认的日志保存模式是single 也就是单文件模式 要想改成每日的daily模式可以在bootstrap/app.php下添加: /* * 配置日志文件为每日 */ $app->configur ...
- Server 2008 r2 多用户远程桌面配置
参考资料链接: http://blog.163.com/fan_yishan/blog/static/476922132013018594951/ 按照以上链接的博文一步步进行配置,因为我是英文操作系 ...
- asp.net WebService的一个简单示例
不同的系统之间经常会需要数据的交换对接,而Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范 ...
- python中logging日志基本用法，和进程安全问题
低配版 import logging logging.debug('debug message') # 调试模式 logging.info('info message') # 正常运转模式 loggi ...
- Spring Data MongoDB 环境搭建
一.开发环境 spring版本:4.0.6.RELEASE spring-data-mongodb版本:1.4.1.RELEASE junit版本 4.11 maven版本:3.0.5 二.pom.x ...