Home > Developer > Web Develop
CSS3 animation mask text effects, css3 mask text effects
<! 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 animation mask </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 scaling ------------------------------------------------------------------------------------*/
. 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 (-pixel PX,-65px);-webkit-transform: rotate (58.5deg) translate (-pixel PX,-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.3 s bytes-in-out 0.6 s;-webkit-transition: all 0.3 s bytes-in-out 0.6 s;
}
. 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.1 s;-webkit-transition-delay: 0.1 s;
}
. 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.2 s bytes-in-out 0.3 s;-webkit-transition: all 0.2 s bytes-in-out 0.3 s;
}
. 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.2 s bytes-in-out 0.4 s;-webkit-transition: all 0.2 s bytes-in-out 0.4 s;
Opacity: 0;
}
. TwoDemo: hover. content {opacity: 1;
-Moz-transform: translate (0) rotate (0);-webkit-transform: translate (0) rotate (0 );
-Moz-transition-delay: 0 s;-webkit-transition-delay: 0 s;
}
. 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.2 s records-in-out 0 s;-webkit-transtiton: all 0.2 s records-in-out 0 s;
}
. TwoDemo. content: hover h3 {
-Moz-transform: translateY (0px);-webkit-transform: translateY (0px );
-Moz-tarnsition-delay: 0.5 s;-webkit-transition-delay: 0.5 s;
}
. 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.4 s bytes-in-out 0 s;-webkit-transition: all 0.4 s bytes-in-out 0 s;
}
. 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.5 s bytes-in-out 0 s;-webkit-transition: all 0.5 s bytes-in-out 0 s;
}
. TwoDemo. content: hover a {-moz-transform: translateX (0) rotate (0);-webkit-transform: translateX (0) rotate (0 );}
/* ThreeDemo ----------------------------------------------------------*/
. ThreeDemo. transform {-moz-transition: all 1 s records-in 0.1 s;-webkit-transition: all 1 s records-in 0.1 s ;}
. 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.3 s bytes-out 0.5 s;-webkit-transition: all 0.3 s bytes-out 0.5 s;
}
. ThreeDemo: hover. content {top: 0; opactiy: 1;
-Moz-animation: 0.9 s linear 0 s normal none 1 bounceY;-webkit-animation: 0.9 s linear 0 s normal none 1 bounceY;
-Moz-transition-delay: 0 s;-webkit-transition-delay: 0 s;
}
. 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.6 s bytes-in-out 0.1 s;-webkit-transition: all 0.6 s bytes-in-out 0.1 s;
}
. 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.4 s bytes-in-out 0.1 s;-webkit-transition: all 0.4 s bytes-in-out 0.1 s;
}
. 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.2 s bytes-in-out 0.1 s;-webkit-transition: all 0.2 s bytes-in-out 0.1 s;
}
. ThreeDemo. content: hover {
-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% {-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% {-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">
<Div class = "mask-top"> </div>
<Div class = "mask-bottom"> </div>
<Div class = "content">
<H3> Title 1
<P> content display </p>
</Div>
</Div>
</Li>
<Li>
<Div class = "twoDemo">
<Div class = "content">
<H3> Title 2 <P> content display. </P>
<A href = "#"> Mr right </a>
</Div>
</Div>
</Li>
<Li>
<Div class = "threeDemo">
<Div class = "content">
<H3> Title 3 <P> content display </p>
<A href = "#"> EURO </a>
</Div>
</Div>
</Li>
</Ul>
</Body>
</Html>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
