CSS3动画遮罩 <br /> /*base*/<br /> html, body, div, span, applet, object, iframe,<br /> h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br /> a, abbr, acronym, address, big, cite, code,<br /> del, dfn, em, font, img, ins, kbd, q, s, samp,<br /> small, strike, strong, sub, sup, tt, var,<br /> b, u, i, center,<br /> dl, dt, dd, ol, ul, li,<br /> fieldset, form, label, legend,<br /> table, caption, tbody, tfoot, thead, tr, th, td {<br /> margin: 0;<br /> padding: 0;<br /> border: 0;<br /> outline: 0;<br /> font-size: 100%;<br /> vertical-align: baseline;<br /> background: transparent;<br /> }<br /> body {<br /> line-height: normal;<br /> font-family:'Microsoft Yahei',Tahoma,Arial,Helvetica,Simsun,STHeiti;<br /> word-break: normal;<br /> }<br /> <br /> ol, ul , li{<br /> list-style: none;<br /> }<br /> blockquote, q {<br /> quotes: none;<br /> }<br /> blockquote:before, blockquote:after, q:before, q:after {<br /> content: '';<br /> content: none;<br /> }<br /> pre{<br /> white-space:pre-wrap;<br /> }<br /> /* remember to define focus styles! */<br /> :focus {<br /> outline:0;<br /> }<br /> /* remember to highlight inserts somehow! */<br /> ins {<br /> text-decoration: none;<br /> }<br /> del {<br /> text-decoration: line-through;<br /> }<br /> /* tables still need 'cellspacing="0"' in the markup */<br /> table {<br /> border-collapse: collapse;<br /> border-spacing: 0;<br /> }<br /> .clearfix:before, .clearfix:after {<br /> content: '\0020';<br /> display: block;<br /> overflow: hidden;<br /> visibility: hidden;<br /> width: 0;<br /> height: 0;<br /> }<br /> .clearfix:after {<br /> clear: both;<br /> }<br /> .clearfix {<br /> zoom: 1;<br /> }<br /> h1{font-size:16px}<br /> h2, h3{font-size:14px}<br /> h4, h5, h6{font-size:12px}<br /> small{font-size:11px}<br /> input, option, textarea{font-family:Arial;font-size:12px;}<br /> .input-text{border:1px solid #888888;padding:2px 3px;}<br /> /*html5 layout reset*/<br /> article, aside, dialog, figure, footer, header, <br /> hgroup, nav, section, figcaption, details, summary {display:block}<br /> <br /> /*css3 transform transition*/<br /> body {background:#999;}<br /> h1 {margin:50px 50px 0 50px; height:50px; line-height:50px; font-size:28px; color:#000;}<br /> ul {width:990px; margin:50px auto 0;}<br /> li {width:320px; height:200px; margin-bottom:20px; border:3px solid #ccc; box-shadow:0 0 1px #000; display:inline-block; overflow:hidden;} <p> /*auto------------------------------------------------------------------------------------*/<br /> .oneDemo, .twoDemo, .threeDemo {width:320px; height:200px; position:relative; margin:0 auto;}<br /> .transform{height:200px; overflow:hidden;}<br /> .content {position:absolute; top:0; left:0; overflow:hidden;}<br /> .content h3, .content p {width:285px; margin:0 auto; text-align:center; overflow:hidden; color:#fff; text-shadow:1px 0 1px #000;}<br /> .content h3 {height:30px; line-height:30px; font-size:16px;}<br /> .content p {height:45px; line-height:22px; font-size:14px; }<br /> .content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}<br /> <br /> /*oneDemo--------------------------------------------------------------------------------*/<br /> .oneDemo .mask {position:absolute; top:0; left:0; display:block; width:360px; height:400px; opacity:1; background:rgba(230, 230, 230, 0.5);}<br /> .oneDemo .mask-top {right:0; left:auto;<br /> -moz-transform:rotate(58.5deg) translate(-424px, -65px); -webkit-transform:rotate(58.5deg) translate(-424px,-65px);<br /> }<br /> .oneDemo .mask-bottom {top:0; left:0;<br /> -moz-transform:rotate(58.9deg) translate(253px,-45px); -webkit-transform:rotate(58.9deg) translate(253px,-45px);<br /> }<br /> .oneDemo .mask-top, .oneDemo .mask-bottom {opactiy:1;<br /> -moz-transition:all 0.3s ease-in-out 0.6s; -webkit-transition:all 0.3s ease-in-out 0.6s;<br /> }<br /> .oneDemo:hover .mask-top {<br /> -moz-transform:rotate(57.9deg) translate(-253px, -65px); -webkit-transform:rotate(57.9deg) translate(-253px,-65px);<br /> }<br /> .oneDemo:hover .mask-bottom {<br /> -moz-transform:rotate(57.9deg) translate(85px, -31px); -webkit-transform:rotate(57.9deg) translate(85px,-31px);<br /> }<br /> .oneDemo:hover .mask-top, .oneDemo:hover .mask-bottom, .oneDemo:hover .content {<br /> -moz-transition-delay:0.1s; -webkit-transition-delay:0.1s; <br /> }<br /> .oneDemo .content {height:0; width:320px; background:rgba(110, 120, 110, 0.8); color:#fff; font-size:14px;<br /> -moz-transform:rotate(-40deg) translate(-100px, 100px); -webkit-transform:rotate(-40deg) translate(-100px, 100px);<br /> -moz-transition:all 0.2s ease-in-out 0.3s; -webkit-transition:all 0.2s ease-in-out 0.3s;<br /> }<br /> .oneDemo:hover .content {width:280px; height:60px; margin-top:50px; padding:20px;<br /> -moz-transform:rotate(0) translate(0); -webkit-transform:rotate(0) translate(0);<br /> } <p> /*twoDemo----------------------------------------------------------------------------------*/<br /> .twoDemo .content {height:200px; padding:0 20px; position:absolute; top:0; left:0; display:block; opacity:0; background:rgba(130, 130, 130, 0.5);<br /> -moz-transform:translate(460px, -100px) rotate(180deg); -webkit-transform:translate(460px, -100px) rotate(180deg);<br /> -moz-transition:all 0.2s ease-in-out 0.4s; -webkit-transition:all 0.2s ease-in-out 0.4s;<br /> opacity:0;<br /> }<br /> .twoDemo:hover .content {opacity:1;<br /> -moz-transform:translate(0) rotate(0); -webkit-transform:translate(0) rotate(0);<br /> -moz-transition-delay:0s; -webkit-transition-delay:0s;<br /> }<br /> .twoDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;<br /> -moz-transform:translateY(-100px); -webkit-transform:translateY(-100px);<br /> -moz-transition:all 0.2s ease-in-out 0s; -webkit-transtiton:all 0.2s ease-in-out 0s;<br /> }<br /> .twoDemo .content:hover h3 {<br /> -moz-transform:translateY(0px); -webkit-transform:translateY(0px);<br /> -moz-tarnsition-delay:0.5s; -webkit-transition-delay:0.5s;<br /> }<br /> .twoDemo .content p {text-align:center; margin-top:20px;<br /> -moz-transform:translateX(300px) rotate(90deg); -webkit-transform:translateX(300px) rotate(90deg);<br /> -moz-transition:all 0.4s ease-in-out 0s; -webkit-transition:all 0.4s ease-in-out 0s;<br /> }<br /> .twoDemo .content:hover p {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}<br /> .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;<br /> -moz-transform:translateX(-300px) rotate(-90deg); -webkit-transform:translateX(-300px) rotate(-90deg);<br /> -moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s;<br /> }<br /> .twoDemo .content:hover a {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);} <p> /*threeDemo----------------------------------------------------------*/<br /> .threeDemo .transform {-moz-transition:all 1s ease-in 0.1s; -webkit-transition:all 1s ease-in 0.1s;}<br /> .threeDemo:hover .transform {-moz-transform:rotate(720deg) scale(0); -webkit-transform:rotate(720deg) scale(0);}<br /> .threeDemo .content {height:200px; padding:0 20px; top:-200px; opactiy:0;background-color:rgba(200, 200, 200, 0.5);<br /> -moz-transition:all 0.3s ease-out 0.5s; -webkit-transition:all 0.3s ease-out 0.5s;<br /> }<br /> .threeDemo:hover .content {top:0; opactiy:1;<br /> -moz-animation:0.9s linear 0s normal none 1 bounceY; -webkit-animation:0.9s linear 0s normal none 1 bounceY;<br /> -moz-transition-delay:0s; -webkit-transition-delay:0s;<br /> }<br /> .threeDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;<br /> -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);<br /> -moz-transition:all 0.6s ease-in-out 0.1s; -webkit-transition:all 0.6s ease-in-out 0.1s;<br /> }<br /> .threeDemo .content:hover h3 {<br /> -moz-transform:translateY(0); -webkit-transform:translateY(0);<br /> -moz-transition-delay:0; -webkit-transition-delay:0;<br /> }<br /> .threeDemo .content p {margin-top:20px;<br /> -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);<br /> -moz-transition:all 0.4s ease-in-out 0.1s; -webkit-transition:all 0.4s ease-in-out 0.1s;<br /> }<br /> .threeDemo .content:hover p {<br /> -moz-transform:translateY(0); -webkit-transform:translateY(0);<br /> -moz-transition-delay:0; -webkit-transition-delay:0;<br /> }<br /> .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;<br /> -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);<br /> -moz-transition:all 0.2s ease-in-out 0.1s; -webkit-transition:all 0.2s ease-in-out 0.1s;<br /> }<br /> .threeDemo .content:hover a {<br /> -moz-transform:translateY(0); -webkit-transform:translateY(0);<br /> -moz-transition-delay:0; -webkit-transition-delay:0;<br /> }<br /> @-moz-keyframes bounceY {<br /> 0% { -moz-transform: translateY(-200px);}<br /> 40% { -moz-transform: translateY(-180px);}<br /> 65% { -moz-transform: translateY(-102px);}<br /> 82% { -moz-transform: translateY(-75px);}<br /> 92% { -moz-transform: translateY(-32px);}<br /> 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}<br /> }<br /> @-webkit-keyframes bounceY {<br /> 0% { -webkit-transform: translateY(-200px);}<br /> 40% { -webkit-transform: translateY(-180px);}<br /> 65% { -webkit-transform: translateY(-102px);}<br /> 82% { -webkit-transform: translateY(-75px);}<br /> 92% { -webkit-transform: translateY(-32px);}<br /> 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}<br /> }<br /> http://www.999jiujiu.com/ 标题1 内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示 标题2 内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示。 Mr right 标题3 内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示 EURO
