CSS3动画遮罩特效,当你把鼠标放在图片上的时候,可看到图片上出现动态效果的文字提示效果,不要以为使用了JavaScript生成了本效果,其实它是用CSS3技术实现的页面动画,虽然没有那么流畅,但用CSS来实现,已经很难得了。
-
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
-
<html>
-
<head>
-
<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=\"/images/m01.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>
-
<div class=\"twoDemo\">
-
<img class=\"transform\" src=\"/images/m02.jpg\" />
-
<div class=\"content\">
-
-
<h3>写给未来——我的Mr right</h3>
-
<p>我不知道你会在什么时间 什么地点 什么场合?出现可是 我想你遇到我的时候可以一眼就把我认出来,就像我一直坚信我会在见到你的第一眼就认出你一样。</p>
-
<a href=\"#\">Mr right</a>
-
</div>
-
</div>
-
</li>
-
<li>
-
-
<div class=\"threeDemo\">
-
<img class=\"transform\" src=\"/images/m03.jpg\" />
-
<div class=\"content\">
-
<h3>EURO2012</h3>
-
<p>舍不得你离开,但是不得不离开。这不是无奈,这是竞技体育的残酷。英雄般的倒下让我更加难过,但是很欣慰,哎哟喂,太矛盾了。精彩的比赛,我却不敢看上一遍,只怕。。。”</p>
-
<a href=\"#\">EURO</a>
-
</div>
-
-
</div>
-
</li>
-
</ul>
-
</body>
-
</html>
-
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
-
<html>
-
<head>
-
<title>超酷的CSS3动画遮罩效果的图片文字说明丨芯晴网页特效丨CsrCode.CN</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=\"/images/m01.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>
-
<div class=\"twoDemo\">
-
<img class=\"transform\" src=\"/images/m02.jpg\" />
-
<div class=\"content\">
-
-
<h3>写给未来——我的Mr right</h3>
-
<p>我不知道你会在什么时间 什么地点 什么场合?出现可是 我想你遇到我的时候可以一眼就把我认出来,就像我一直坚信我会在见到你的第一眼就认出你一样。</p>
-
<a href=\"#\">Mr right</a>
-
</div>
-
</div>
-
</li>
-
<li>
-
-
<div class=\"threeDemo\">
-
<img class=\"transform\" src=\"/images/m03.jpg\" />
-
<div class=\"content\">
-
<h3>EURO2012</h3>
-
<p>舍不得你离开,但是不得不离开。这不是无奈,这是竞技体育的残酷。英雄般的倒下让我更加难过,但是很欣慰,哎哟喂,太矛盾了。精彩的比赛,我却不敢看上一遍,只怕。。。”</p>
-
<a href=\"#\">EURO</a>
-
</div>
-
-
</div>
-
</li>
-
</ul>
-
</body>
-
</html>
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29737856/viewspace-1214538/
,如需转载,请注明出处,否则将追究法律责任。