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让一行文字显示在 ...
随机推荐
- BeanPostProcessor接口
BeanPostProcessor接口及回调方法图 1.InstantiationAwareBeanPostProcessor:实例化Bean后置处理器(继承BeanPostProcessor) po ...
- 十：audio 音频
属性名 类型 默认值 说明 id String video 组件的唯一标识符 src String 要播放音频的资源地址 loop Boolean false 是否循环播放 controls ...
- HDU 2084(DP)
http://acm.hdu.edu.cn/showproblem.php?pid=2084 状态转移方程: dp[i][j] = MAX(dp[i+1][j],dp[i+1][j+1])+tower ...
- jenkins学习笔记
Jenkins 是一款流行的开源持续集成(Continuous Integration)工具,广泛用于项目开发,具有自动化构建.测试和部署等功能.本系列博客以 windows 10 环境为例 1 安装 ...
- 内部类 ( Inner Class )
内部类的作用: 1.隐藏内部实现,高内聚. 2.Java多继承的实现. 何为Java的多继承? Java只支持单一继承,所以如果需要多继承,那么可用内部类来实现. 如何实现? 1.父类A public ...
- 轻松学习java可重入锁(ReentrantLock)的实现原理（转 图解）
前言 相信学过java的人都知道 synchronized 这个关键词,也知道它用于控制多线程对并发资源的安全访问,兴许,你还用过Lock相关的功能,但你可能从来没有想过java中的锁底层的机制是怎么 ...
- localStorage跟cookie的使用
最近做了记住密码功能,用localStorage跟cookie都尝试用了一下,感觉都挺好哈,很方便,特此记录 html代码: <input type="text" id=&q ...
- drupal7 自定义登录&找回密码页面，注意事项
1.登录页面的 $form['form_id'] 和 $form['form_build_id'],是这样输出的: <?php print drupal_render($form['form_i ...
- SQL server查找指定表的所有索引
WITH tmp AS ( SELECT indexname = a.name , tablename = c.name , indexcolumns = d.name , a.indid FROM ...
- plan,idea,and dream
自学机器学习/数据分析/前端 目前想法是从前端入手,学会写/分析网页及其内容/数据,然后使用爬虫爬取数据,然后用机器学习算法对数据进行处理.哈哈,想法是不是太天真了. 学习都从网上的资料入手,因此发现 ...