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>

时间： 2024-11-06 04:07:16

CSS3动画遮罩文字特效的相关文章

纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

CSS3实现水位充满文字特效

CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的水位又会渐渐退去,动画效果和上升类似,这样周而复始,从而达到很酷HTML5 Loading动画效果.JQuery特效 源代码:http://www.huiyi8.com/sc/8898.html CSS3实现水位充满文字特效,布布扣,bubuko.com

css3动画应用-音乐唱片旋转播放特效

css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击图片,音乐播放,图片开始旋转. 1.动设置图片为圆形居中,使图片一直不停旋转. 核心代码: #xuanzhuan{ -webkit-animation: play 10s linear infinite; -moz-animation: play 10s linear infinite; anima

css3动画特效集合

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <!--<link rel="stylesheet" type="text/css" href="animation.css">--> <style type="text/cs

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

CSS3伪类nth-child结合transiton动画实现文字若影若现

css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I,,J先看下效果图: 看HTML5代码: <div class="box"> <span>A</span> <span>B</span> <span>C</span> <span>D</s

css3动画特效：上下晃动的div

css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环

Android自定义组件系列【8】——遮罩文字动画

遮罩文字的动画我们在Flash中非常常见,作为Android的应用开发者你是否也想将这种动画做到你的应用中去呢?这一篇文章我们来看看如何自定义一个ImageView来实现让一张文字图片实现文字的遮罩闪烁效果,下面先来看看效果吧. (录屏幕延时导致效果看起来不是很好) 一.实现原理 实现原理是重写View的onCreate方法,获取图片资源后对每个像素的透明度进行修改来实现,再启动一个线程来循环改变某个区域中的像素透明度. RGBA基础知识:(下面几段介绍文字引用自维基百科) RGBA是代表Red

一款纯css3实现的超炫动画背画特效

之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class='fake-gif'> <span class='stripe'></span><span class='stripe'></span><span class='stripe'&