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让一行文字显示在 ...
随机推荐
- i.mx6 Android5.1.1 Zygote
0. 总结: 0.1 相关源码目录: framework/base/cmds/app_process/app_main.cppframeworks/base/core/jni/AndroidRunti ...
- PowerDesigner常用设置
使用powerdesigner进行数据库设计确实方便,以下是一些常用的设置 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了 PowerDesigner 快捷工具栏 palette 不见了 ...
- js常用字符处理方法
JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...
- C# 多维数组
int[, ,] shuzu = new int[4, 3, 2]; //有四个二维数组,每个二维数组里面有3个1维数组,每个1维数组里面有2个元素
- win下环境变量的设置
Windows 和 linux 区别 一.查看所有环境变量的名称和值: Linux下:export Windows下:set 二.根据名称查该环境变量的值: Linux下:echo $环境变量名 比如 ...
- ThreadPoolExecutor线程池中线程不能超过核心线程数量的问题
int arg1=2;//核心线程 int arg2=40;//最大线程数量 int arg3=100;//空余保留时间 ThreadPoolExecutor pool=new ThreadPoolE ...
- 自己动手写HashMap
HashMap是结合队列和链表各自的优点,创造的一种在查询和修改间取得性能平衡的一种集合! MyMap接口: package self; //接口 public interface MyMap { p ...
- sql: Oracle simple example table
--Oracle 9i 实例数据脚本地址:$oracle_home/rdbms/admin/utlsampl.sql CREATE TABLE DEPT (DEPTNO NUMBER(2) CONST ...
- 用CSS3 & jQuery创建apple TV海报视差效果
用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...
- mustache 模板，用于构造html页面内容
Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...