CSS3动画遮罩文字特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
		<h1>CSS3 transform transition animation</h1>

<ul>
			<li>
				<div class="oneDemo">
					<img class="transform" src="" />
					<div class="mask mask-top"></div>
					<div class="mask mask-bottom"></div>
					<div class="content">
						<h3>LANCER EVOLUTION</h3>

<p>Lancer Evo.X外观造型与概念车Concept X相似度高达90%以上，动力方面名机4G63从此下台一鞠躬，取而代之的是铝合金汽缸盖且新开发4B11引擎，在涡轮增压的加持下，直四2.0升发动机可输出超过300hp。</p>
					</div>
				</div>
			</li>
			<li>
				<div class="twoDemo">
					<img class="transform" src="//ku.shouce.ren/files/images/201601/56a3351ca66c5.jpg" />
					<div class="content">

<h3>写给未来——我的Mr right</h3>
						<p>我不知道你会在什么时间 什么地点 什么场合&shy;出现可是 我想你遇到我的时候可以一眼就把我认出来,就像我一直坚信我会在见到你的第一眼就认出你一样。</p>
						<a href="#">Mr right</a>
					</div>
				</div>
			</li>
			<li>

<div class="threeDemo">
					<img class="transform" src="//ku.shouce.ren/files/images/201601/56a3351dc6cc4.jpg" />
					<div class="content">
						<h3>EURO2012</h3>
						<p>舍不得你离开，但是不得不离开。这不是无奈，这是竞技体育的残酷。英雄般的倒下让我更加难过，但是很欣慰，哎哟喂，太矛盾了。精彩的比赛，我却不敢看上一遍，只怕。。。”</p>
						<a href="#">EURO</a>
					</div>

</div>
			</li>
		</ul>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3动画遮罩文字特效

分类

CSS3

描述

CSS3动画遮罩特效，当你把鼠标放在图片上的时候，可看到图片上出现动态效果的文字提示效果，不要以为使用了JavaScript生成了本效果，其实它是用CSS3技术实现的页面动画，虽然没有那么流畅，但用CSS来实现，已经很难得了。