CSS3动画遮罩文字特效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3动画遮罩</title>
<style type=text/css>
/*base*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: normal;
font-family:'Microsoft Yahei',Tahoma,Arial,Helvetica,Simsun,STHeiti;
word-break: normal;
}
ol, ul , li{
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
pre{
white-space:pre-wrap;
}
/* remember to define focus styles! */
:focus {
outline:0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:before, .clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
h1{font-size:16px}
h2, h3{font-size:14px}
h4, h5, h6{font-size:12px}
small{font-size:11px}
input, option, textarea{font-family:Arial;font-size:12px;}
.input-text{border:1px solid #888888;padding:2px 3px;}
/*html5 layout reset*/
article, aside, dialog, figure, footer, header,
hgroup, nav, section, figcaption, details, summary {display:block}
/*css3 transform transition*/
body {background:#999;}
h1 {margin:50px 50px 0 50px; height:50px; line-height:50px; font-size:28px; color:#000;}
ul {width:990px; margin:50px auto 0;}
li {width:320px; height:200px; margin-bottom:20px; border:3px solid #ccc; box-shadow:0 0 1px #000; display:inline-block; overflow:hidden;}
/*auto------------------------------------------------------------------------------------*/
.oneDemo, .twoDemo, .threeDemo {width:320px; height:200px; position:relative; margin:0 auto;}
.transform{height:200px; overflow:hidden;}
.content {position:absolute; top:0; left:0; overflow:hidden;}
.content h3, .content p {width:285px; margin:0 auto; text-align:center; overflow:hidden; color:#fff; text-shadow:1px 0 1px #000;}
.content h3 {height:30px; line-height:30px; font-size:16px;}
.content p {height:45px; line-height:22px; font-size:14px; }
.content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}
/*oneDemo--------------------------------------------------------------------------------*/
.oneDemo .mask {position:absolute; top:0; left:0; display:block; width:360px; height:400px; opacity:1; background:rgba(230, 230, 230, 0.5);}
.oneDemo .mask-top {right:0; left:auto;
-moz-transform:rotate(58.5deg) translate(-424px, -65px); -webkit-transform:rotate(58.5deg) translate(-424px,-65px);
}
.oneDemo .mask-bottom {top:0; left:0;
-moz-transform:rotate(58.9deg) translate(253px,-45px); -webkit-transform:rotate(58.9deg) translate(253px,-45px);
}
.oneDemo .mask-top, .oneDemo .mask-bottom {opactiy:1;
-moz-transition:all 0.3s ease-in-out 0.6s; -webkit-transition:all 0.3s ease-in-out 0.6s;
}
.oneDemo:hover .mask-top {
-moz-transform:rotate(57.9deg) translate(-253px, -65px); -webkit-transform:rotate(57.9deg) translate(-253px,-65px);
}
.oneDemo:hover .mask-bottom {
-moz-transform:rotate(57.9deg) translate(85px, -31px); -webkit-transform:rotate(57.9deg) translate(85px,-31px);
}
.oneDemo:hover .mask-top, .oneDemo:hover .mask-bottom, .oneDemo:hover .content {
-moz-transition-delay:0.1s; -webkit-transition-delay:0.1s;
}
.oneDemo .content {height:0; width:320px; background:rgba(110, 120, 110, 0.8); color:#fff; font-size:14px;
-moz-transform:rotate(-40deg) translate(-100px, 100px); -webkit-transform:rotate(-40deg) translate(-100px, 100px);
-moz-transition:all 0.2s ease-in-out 0.3s; -webkit-transition:all 0.2s ease-in-out 0.3s;
}
.oneDemo:hover .content {width:280px; height:60px; margin-top:50px; padding:20px;
-moz-transform:rotate(0) translate(0); -webkit-transform:rotate(0) translate(0);
}
/*twoDemo----------------------------------------------------------------------------------*/
.twoDemo .content {height:200px; padding:0 20px; position:absolute; top:0; left:0; display:block; opacity:0; background:rgba(130, 130, 130, 0.5);
-moz-transform:translate(460px, -100px) rotate(180deg); -webkit-transform:translate(460px, -100px) rotate(180deg);
-moz-transition:all 0.2s ease-in-out 0.4s; -webkit-transition:all 0.2s ease-in-out 0.4s;
opacity:0;
}
.twoDemo:hover .content {opacity:1;
-moz-transform:translate(0) rotate(0); -webkit-transform:translate(0) rotate(0);
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
.twoDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translateY(-100px); -webkit-transform:translateY(-100px);
-moz-transition:all 0.2s ease-in-out 0s; -webkit-transtiton:all 0.2s ease-in-out 0s;
}
.twoDemo .content:hover h3 {
-moz-transform:translateY(0px); -webkit-transform:translateY(0px);
-moz-tarnsition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.twoDemo .content p {text-align:center; margin-top:20px;
-moz-transform:translateX(300px) rotate(90deg); -webkit-transform:translateX(300px) rotate(90deg);
-moz-transition:all 0.4s ease-in-out 0s; -webkit-transition:all 0.4s ease-in-out 0s;
}
.twoDemo .content:hover p {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}
.twoDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center;
-moz-transform:translateX(-300px) rotate(-90deg); -webkit-transform:translateX(-300px) rotate(-90deg);
-moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s;
}
.twoDemo .content:hover a {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}
/*threeDemo----------------------------------------------------------*/
.threeDemo .transform {-moz-transition:all 1s ease-in 0.1s; -webkit-transition:all 1s ease-in 0.1s;}
.threeDemo:hover .transform {-moz-transform:rotate(720deg) scale(0); -webkit-transform:rotate(720deg) scale(0);}
.threeDemo .content {height:200px; padding:0 20px; top:-200px; opactiy:0;background-color:rgba(200, 200, 200, 0.5);
-moz-transition:all 0.3s ease-out 0.5s; -webkit-transition:all 0.3s ease-out 0.5s;
}
.threeDemo:hover .content {top:0; opactiy:1;
-moz-animation:0.9s linear 0s normal none 1 bounceY; -webkit-animation:0.9s linear 0s normal none 1 bounceY;
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
.threeDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.6s ease-in-out 0.1s; -webkit-transition:all 0.6s ease-in-out 0.1s;
}
.threeDemo .content:hover h3 {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
.threeDemo .content p {margin-top:20px;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.4s ease-in-out 0.1s; -webkit-transition:all 0.4s ease-in-out 0.1s;
}
.threeDemo .content:hover p {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
.threeDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.2s ease-in-out 0.1s; -webkit-transition:all 0.2s ease-in-out 0.1s;
}
.threeDemo .content:hover a {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-200px);}
40% { -moz-transform: translateY(-180px);}
65% { -moz-transform: translateY(-102px);}
82% { -moz-transform: translateY(-75px);}
92% { -moz-transform: translateY(-32px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-200px);}
40% { -webkit-transform: translateY(-180px);}
65% { -webkit-transform: translateY(-102px);}
82% { -webkit-transform: translateY(-75px);}
92% { -webkit-transform: translateY(-32px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<ul>
<li>
<div class="oneDemo">
<img class="transform" src="http://p8.qhimg.com/t01f085962622ed5302.jpg" />
<div class="mask mask-top"></div>
<div class="mask mask-bottom"></div>
<div class="content">
<h3>标题1</h3>
<p>内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
</div>
</div>
</li>
<li>
<div class="twoDemo">
<img class="transform" src="http://p8.qhimg.com/t01f085962622ed5302.jpg" />
<div class="content">
<h3>标题2</h3>
<p>内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示。</p>
<a href="#">Mr right</a>
</div>
</div>
</li>
<li>
<div class="threeDemo">
<img class="transform" src="http://p8.qhimg.com/t01f085962622ed5302.jpg" />
<div class="content">
<h3>标题3</h3>
<p>内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p>
<a href="#">EURO</a>
</div>
</div>
</li>
</ul>
</body>
</html>
CSS3动画遮罩文字特效的更多相关文章
- 纯CSS3创意loading文字特效
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- 学习笔记 第十四章 使用CSS3动画
第14章 使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1 设计2D动画 CSS2D Transform表 ...
- 分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
- CSS3实现水位充满文字特效
CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的 ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- CSS3动画实现高亮光弧效果,文字和图片（一闪而过）
前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...
- css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
随机推荐
- RESTful 设计理论
RESTful 设计: 1.协议通信协议:https 2.域名部署在API专用域名下,除非API很简单(https://www.example.com/api)https://api.example. ...
- Objective-C——关联对象
动态语言 OC是一种动态语言,它的方法,对象的类型都是到运行的时候才能够确定的.所以这就使得OC存在了关联对象这一强大的机制. 关联对象 所谓关联对象,其实就是我们在运行时对一个已存在的对象上面绑定一 ...
- asp.net——统计输入的字符数目
asp.net——统计输入的字符数目 题目: 在页面中有一个TextBox输入框,一个显示文字用的Label,一个提交按钮Button.在TextBox中输入一段英文字母,点击按钮提交后统计其中字母‘ ...
- java攻城狮之路--复习JDBC(利用BeanUtils、JDBC元数据编写通用的查询方法;元数据;Blob;事务;批量处理)
1.利用BeanUtils的前提得要加入以下两个jar包: commons-beanutils-1.8.0.jar commons-logging-1.1.1.jar package com.shel ...
- iframe监听unload事件
阻止默认事件 event.preventDefault(); 阻止事件冒泡 event.stopPropagation(); event.cancelBubble = true; //IE <a ...
- Oracle、Db2、SqlServer、MySQL 数据库插入当前系统时间
做易买网项目,由于对数据库插入系统时间不了解,常常遇到的问题: 1.java.sql.SQLException: ORA-01861: 文字与格式字符串不匹配.原因:由于获取系统时间类型不对,应为sy ...
- Mysql 之主从复制，mysql-proxy读写分离
准备两台mysql服务器,master(192.168.43.64).slave(192.168.84.129) master配置: log-bin=mysql-bin binlog_format=m ...
- S3C2440时钟体系
注:以下内容学习于韦东山老师arm裸机第一期视频教程 一. 2440时钟简介 1.1 2440是一个SOC(system on chip)系统,不仅有很多CPU,还有很多外设,在2440芯片手册有系统 ...
- PAT (Advanced Level) Practice（更新中）
Source: PAT (Advanced Level) Practice Reference: [1]胡凡,曾磊.算法笔记[M].机械工业出版社.2016.7 Outline: 基础数据结构: 线性 ...
- C#工具帮助类
md5帮助类 .引入库 using System.Security.Cryptography;//引用Md5转换功能 .计算字符串的Md5值 public static string GetMD5Wi ...