[CSS3+HTML] css3实现超酷图片动画遮罩

2014-08-18 07:00:29 -0700

代码1演示（点击几下图看看）

EURO2012

舍不得你离开，但是不得不离开。这不是无奈，这是竞技体育的残酷。英雄般的倒下让我更加难过，但是很欣慰，哎哟喂，太矛盾了。精彩的比赛，我却不敢看上一遍，只怕。。。”

EURO

演示1代码复制

<style type="text/css">
li {width:320px; height:200px; display:inline-block; overflow:hidden; }.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;}/*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;
			}		</style>

<div class="threeDemo">
					<img class="transform" src="http://s.wodemo.net/site/x6/entry/304124/20140818/e89b57ea5b178dfc78a4f5e25e83a928/che.jpg">
					<div class="content">
						<h3>EURO2012</h3>
						<p>舍不得你离开，但是不得不离开。这不是无奈，这是竞技体育的残酷。英雄般的倒下让我更加难过，但是很欣慰，哎哟喂，太矛盾了。精彩的比赛，我却不敢看上一遍，只怕。。。”</p>
						<a href="x6.wodemo.net">EURO</a>
					</div>

</div>
			</li>
		<ul>

che.jpg (43.55 KiB) | Meta

代码2演示（点击几下图看看）

写给未来——我的Mr right

我不知道你会在什么时间什么地点什么场合出现可是我想你遇到我的时候可以一眼就把我认出来,就像我一直坚信我会在见到你的第一眼就认出你一样。

Mr right

演示2代码复制

<style type="text/css">
li {width:320px; height:200px; display:inline-block; overflow:hidden; }.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;}
.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);}
		</style>

<div class="twoDemo">
					<img class="transform" src="http://s.wodemo.net/site/x6/entry/304124/20140818/0449a18488dd1e010cc36e1b208d10e0/qiu.jpg"> 
					<div class="content">

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

qiu.jpg (78.08 KiB) | Meta

代码3演示（点几下看看）

LANCER EVOLUTION

Lancer Evo.X外观造型与概念车Concept X相似度高达90%以上，动力方面名机4G63从此下台一鞠躬，取而代之的是铝合金汽缸盖且新开发4B11引擎，在涡轮增压的加持下，直四2.0升发动机可输出超过300hp。

代码3复制

<style type="text/css">
li {width:320px; height:200px; display:inline-block; overflow:hidden; }
.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);
			}
		</style>

<ul>
			<li>
				<div class="oneDemo">
					<img class="transform" src="http://s.wodemo.net/site/x6/entry/304124/20140818/f476afea0ad78113f9c1f0571bc5213e/MM.jpg">
					<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>

MM.jpg (28.7 KiB) | Meta

«Newer Older»

Back to home

Subscribe | Register | Login | N