CSS之按钮过滤,css3遮罩文字特效

CSS3动漫遮罩文字特效,css3遮罩文字特效

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;
<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: ‘020’;
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>;

<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>标题1</h3>

<p>内容体现内容突显内容显示内容呈现内容显示内容显示内容展现内容彰显内容彰显内容体现内容呈现内容显示</p>
</div>
</div>
</li>
<li>
<div class=”twoDemo”>
<img class=”transform”
src=”” />
<div class=”content”>

<h3>标题2</h3>
<p>内容呈现内容呈现内容呈现内容展现内容突显内容体现内容展示内容展现内容显示内容突显内容展现内容显示。</p>
<a href=”#”>Mr right</a>
</div>
</div>
</li>
<li>

<div class=”threeDemo”>
<img class=”transform”
src=”” />
<div class=”content”>
<h3>标题3</h3>
<p>内容体现内容展现内容彰显内容呈现内容体现内容展示内容彰显内容展现内容显示内容展现内容呈现内容展示</p>
<a href=”#”>EURO</a>
</div>

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

!DOCTYPE
HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“” html head meta
http-equiv=”Content-Ty…

<!doctype html> <html> <head> <meta
charset=”utf-8″> <title>CSS之开关过滤</title>
</head> <style type=”text/css”> html,body,.wrapper{
height:100%;} body{ background:#000000; background-size:cover;
font-family:Gotham, “Helvetica Neue”, Helvetica, Arial, sans-serif; }
.wrapper{ width:100%; } .holder { width: 100%; } a.animBtn:link,
a.animBtn:visited { position: relative; display: block; width: 180px;
margin: 30px auto 0; padding: 14px 15px; border: 2px solid #fff;
background: rgba(255, 255, 255, 0.2); color: #fff; text-align: center;
text-decoration: none; text-transform: uppercase; overflow: hidden;
letter-spacing: .08em; /*text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px
0 rgba(0, 0, 0, 0.2);*/ text-shadow:0 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all .3s ease; -moz-transition: all .3s ease;
-o-transition: all .3s ease; transition: all .3s ease; }
a.animBtn:link:after, a.animBtn:visited:after { content: “”; position:
absolute; background: none repeat scroll 0 0 #fff; height: 0%; left:
50%; top: 50%; width: 100%; z-index: -1; -webkit-transition: all .3s
ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease
0s; transition: all .3s ease 0s; } a.animBtn:link:hover,
a.animBtn:visited:hover { color: #333; text-shadow: none; }
a.animBtn:link:hover:after, a.animBtn:visited:hover:after { height:
420%; } a.animBtn.themeA:after { -moz-transform: translateX(-50%)
translateY(-50%) rotate(-45deg); -ms-transform: translateX(-50%)
translateY(-50%) rotate(-45deg); -webkit-transform: translateX(-50%)
translateY(-50%) rotate(-45deg); transform: translateX(-50%)
translateY(-50%) rotate(-45deg); } a.animBtn.themeB:after {
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg); }
a.animBtn.themeC:after { opacity: .5; -moz-transform: translateX(-50%)
translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform:
translateX(-50%) translateY(-50%); } a.animBtn.themeC:hover:after {
height: 140%; opacity: 1; } a.animBtn.themeD:after { width: 0%;
border-radius: 50%; opacity: .5; -moz-transform: translateX(-50%)
translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform:
translateX(-50%) translateY(-50%); } a.animBtn.themeD:hover:after {
height: 450%; width: 110%; opacity: 1; } </style> <body>
<input type=”button” value=”关闭” name=”close”
onclick=”window.close()” /> <div
style=”text-align:center;clear:both;”> </div> <div
class=”wrapper”> <p class=”holder”> <a href=”#”
class=”animBtn themeA”>Discover More A</a> <a href=”#”
class=”animBtn themeB”>Discover More B</a> <a href=”#”
class=”animBtn themeC”>Discover More C</a> <a href=”#”
class=”animBtn themeD”>Discover More D</a> </p>
</div> </body> </html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注