CSS3 アニメーションマスクテキスト効果_html/css_WEB-ITnose

CSS3アニメーション画遮罩 /*base*/ html、body、div、span、アプレット、オブジェクト、iframe、 h1、h2、h3、h4、h5、h6、p、blockquote、pre、 a、abbr 、頭字語、アドレス、ビッグ、引用、コード、 del、dfn、em、フォント、img、ins、kbd、q、s、samp、 small、straight、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; パディング: 0; ボーダー: 0; アウトライン: 0; フォントサイズ: 100%; 垂直配置:ベースライン; 背景:透明; } ボディ{ 行の高さ:標準; フォント-ファミリー:'Microsoft Yahei'、Tahoma、Arial、Helvetica、Simsun、STHeiti; 単語区切り: 通常; }

ol、ul 、li{ リストスタイル: none; } blockquote、q { 引用符: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } pre{ White-space:pre-wrap; } /* フォーカス スタイルを忘れずに定義してください。 */ :focus { summary:0; } /* 何らかの方法で挿入を強調表示することを忘れないでください。 */ ins { text-decoration: none; } del { text-decoration: line-through; } /* テーブルのマークアップにはまだ 'cellspacing="0"' が必要です */ table { border-collapse: 崩壊; border-spacing: 0; } .clearfix:before, .clearfix:after { content: ' 020'; 表示: ブロック; オーバーフロー: 非表示; 可視性: 非表示; 幅: 0; 高さ: 0; } .clearfix:after { クリア: 両方; } .clearfix { ズーム: 1; } h1{font-size:16px} h2, h3{font-サイズ:14px} h4, h5, h6{font-size:12px} small{font-size:11px} 入力、オプション、テキストエリア{font-family:Arial;font-size:12px;} .input- text{border:1px Solid #888888;padding:2px 3px;} /*html5 レイアウトのリセット*/ 記事、脇、ダイアログ、図、フッター、ヘッダー、 hgroup、nav、セクション、figcaption、詳細、概要 {display :block}

/*css3 変換トランジション*/ body {background:#999;} h1 {margin:50px 50px 0 50px;高さ:50ピクセル;行の高さ:50ピクセル;フォントサイズ:28px;カラー:#000;} ul {幅:990px; margin:50px auto 0;} li {width:320px;高さ:200ピクセル;マージン-ボトム:20ピクセル;ボーダー:3px ソリッド #ccc;ボックスシャドウ:0 0 1px #000;表示:インラインブロック;オーバーフロー:非表示;}

/*自動---------------------------------------------- --------------------------------------*/ .oneDemo、.twoDemo、.threeDemo {幅:320ピクセル;高さ:200ピクセル;位置:相対; margin:0 auto;} .transform{height:200px;オーバーフロー:非表示;} .content {位置:絶対;トップ:0;左:0; overflow:hidden;} .content h3, .content p {width:285px;マージン:0 自動;テキスト整列:中央;オーバーフロー:非表示;色:#fff; text-shadow:1px 0 1px #000;} .content h3 {高さ:30px;行の高さ:30px; font-size:16px;} .content p {height:45px;行の高さ:22px;フォントサイズ:14px; } .content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}

/*oneDemo--------------------------------- ------------------------------------------------*/ . oneDemo .mask {位置:絶対;トップ:0;左:0;表示ブロック;幅:360ピクセル;高さ:400ピクセル;不透明度:1;背景:rgba(230, 230, 230, 0.5);} .oneDemo .mask-top {right:0; left:auto; -moz-transform:rotate(58.5deg) translation(-424px, -65px); -webkit-transform:rotate(58.5deg) translation(-424px,-65px); } .oneDemo .mask-bottom {top:0; left:0; -moz-transform:rotate(58.9deg) translation(253px,-45px); -webkit-transform:rotate(58.9deg) translation(253px,-45px); } .oneDemo .mask-top, .oneDemo .mask-bottom {opactiy:1; -moz-transition:all 0.3s easy-インアウト0.6秒。 -webkit-transition:all 0.3s easy-in-out 0.6s; } .oneDemo:hover .mask-top { -moz-transform:rotate(57.9deg) translation(-253px, -65px); -webkit-transform:rotate(57.9deg) translation(-253px,-65px); } .oneDemo:hover .mask-bottom { -moz-transform:rotate(57.9deg) translation(85px, -31px); -webkit-transform:rotate(57.9deg) translation(85px,-31px); } .oneDemo:hover .mask-top、.oneDemo:hover .mask-bottom、.oneDemo:hover .content { -moz-遷移遅延:0.1秒; -webkit 移行遅延:0.1 秒; } .oneDemo .content {高さ:0;幅:320ピクセル;背景:rgba(110, 120, 110, 0.8);色:#fff; font-size:14px; -moz-transform:rotate(-40deg) Translation(-100px, 100px); -webkit-transform:rotate(-40deg) translation(-100px, 100px); -moz-transition:all 0.2 秒イーズインアウト 0.3 秒; -webkit-transition:all 0.2s easy-in-out 0.3s; } .oneDemo:hover .content {width:280px;高さ:60ピクセル;マージントップ:50px;パディング:20px; -moz-transform:rotate(0) translation(0); -webkit-transform:rotate(0) translation(0); }

/*twoDemo---------------------------- -------------------------------------------------- ---*/ .twoDemo .content {高さ:200px;パディング:0 20px;位置:絶対;トップ:0;左:0;表示ブロック;不透明度:0;背景:rgba(130, 130, 130, 0.5); -moz-transform:translate(460px, -100px) 回転(180度); -webkit-transform:translate(460px, -100px)rotate(180deg); -moz-transition:all 0.2 秒イーズインアウト 0.4 秒; -webkit-transition:all 0.2s easy-in-out 0.4s; opacity:0; } .twoDemo:hover .content {opacity:1; -moz-transform:translate(0)rotate(0); -webkit-transform:translate(0) 回転(0); -moz-transition-delay:0s; -webkit-transition-delay:0s; } .twoDemo .content h3 {margin:30px auto 0;背景: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 easy-in-out 0s; -webkit-transtiton:all 0.2s easy-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) 回転(90度); -webkit-transform:translateX(300px)rotate(90deg); -moz-transition:all 0.4s easy-in-out 0s; -webkit-transition:all 0.4s easy-in-out 0s; } .twoDemo .content:hover p {-moz-transform:translateX(0)rotate(0); -webkit-transform:translateX(0)rotate(0);} .twoDemo .content a {display:block;幅:80ピクセル;マージン:20px 0 0 0;高さ:30ピクセル;フォントサイズ:14px;色:#fff;背景:rgba(110, 120, 110, 0.8);テキスト装飾:なし;行の高さ:30px; text-align:center; -moz-transform:translateX(-300px)rotate(-90deg); -webkit-transform:translateX(-300px)rotate(-90deg); -moz-transition:all 0.5s easy-in-out 0s; -webkit-transition:all 0.5s easy-in-out 0s; } .twoDemo .content:hover a {-moz-transform:translateX(0)rotate(0); -webkit-transform:translateX(0) 回転(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

&lt ;/ul＆gt;＆lt;/body＆lt;/html＆gt;

CSS3 アニメーション マスク テキスト効果_html/css_WEB-ITnose

标题1

标题2

タイトル 3

関連記事

CSS3 アニメーションマスクテキスト効果_html/css_WEB-ITnose