CSS3动画遮罩文字特效_html/css_WEB-ITnose

CSS3动画遮罩 /*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);} }

http://www.999jiujiu.com/

标题1

内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示

标题2 内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示。

Mr right

标题3 内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示

EURO

CSS3动画遮罩文字特效_html/css_WEB-ITnose

标题1

标题2

标题3

관련 기사