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让一行文字显示在 ...
随机推荐
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...
- Unity 动态加载资源的方式。
方式 特点 用法 Resource.load 安装包会比较大 在Asset文件夹下建一个Resources命名的文件夹,在打包安装包时会把 Resources文件夹下的所有文件都打包进去,不管 ...
- [C语言] 数据结构-预备知识结构体
结构体 为什么出现结构体 为了表示一些复杂的数据,而普通的基本类型变量无法满足需求 什么叫结构体 结构体是用户根据实际需要自己定义的复合数据类型 如何使用结构体 1.两种方式 一般使用结构体指针的形 ...
- 三、cent OS安装配置nginx
简介Tengine是淘宝发起的web服务器项目,简单的讲就是对nginx进行了二次开发并提供了更丰富的功能,官网地址:http://tengine.taobao.org/ 下载nginx这里使用淘宝二 ...
- vertical-align属性baseline（转）
图7-34 文字和图片内容默认垂直对齐方式为基线对齐 上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线 ...
- Groovy中each、find跳出循环
在groovy中使用break跳出each或者find的循环会会报错,为什么呢?groovy中each.find方法是一个闭包操作,要想跳出循环要使用 return true,但有几个问题有待研究: ...
- 【转载】windows 下重置 mysql 的 root 密码
今天发现 WordPress 连接不上数据库,登录 window server 服务器查看,所有服务均运行正常. 使用 root 账号登录 mysql 数据库,结果提示密码不匹配.我突然意识到,服 ...
- Tabindex
1.tabindex 属性可以设置键盘中的TAB键在控件中的移动顺序,及焦点的顺序 2. tabindex 属性值范围在1到32767之间 3. 默认的 tabindex 的值为 0 ,将排在所有指定 ...
- C++多线程编程（教程+Demo)
下载地址:C++多线程编程(教程+Demo) Win32 SDK函数支持进行多线程的程序设计,并提供了操作系统原理中的各种同步.互斥和临界区等操作.Visual C++ 6.0中,使用MFC类库也实现 ...
- android资源的诡异问题
最近,新开发版本,正在处于扫BUG的阶段. 发现一个比较诡异的问题,一个控件的颜色,背景色与预先设定的值,发生不一致.其他的类型的控件有同样的设置,但是现实结果正常. 今天,专门解决这个问题. 经过各 ...