ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS3 のクールな記事カード UI デザイン効果
簡単なチュートリアル
これは、純粋な CSS3 を使用して作成されたクールな記事カード UI デザイン効果です。記事カードには影の効果があり、マウスをカード上でスライドさせると、記事の説明情報がスライドするアニメーションでカード内に表示されます。
使い方
HTML構造
カードのHTML構造は次のとおりです:
<div class="tile"> <img src="img/1.jpg"/> <div class="text"> <h1>文章标题</h1> <h2 class="animate-text">文章子标题</h2> <p class="animate-text">文章的描述信息</p> <div class="dots"> <span></span> <span></span> <span></span> </div> </div> </div>
CSSスタイル
カードラッピングコンテナ全体がフレックスでレイアウトされます。
.wrap{ margin:50px auto 60px auto; width:100%; display:flex; align-items:space-around; max-width:1200px; }
各カードの幅と高さは 380 ピクセルに設定されています。また、box-shadow プロパティを使用してカードに大きな影効果を設定し、すべてのアニメーションのイーズアウト効果にトランジション アニメーションを設定します。
.tile{ width:380px; height:380px; margin:10px; background-color:#99aeff; display:inline-block; background-size:cover; position:relative; cursor:pointer; transition: all 0.4s ease-out; box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44); overflow:hidden; color:white; font-family:'Microsoft YaHei',sans-serif; }
カード内の画像は絶対配置を使用し、幅と高さが 100% でカード全体を占めます。
.tile img{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:0; transition: all 0.4s ease-out; }
カード内のテキスト レイヤー ページでは絶対配置が使用され、テキストは z-index 属性を通じて画像の上に配置されます。 h2 テキストと p テキストは、translateX 関数によって -200% 移動されます。つまり、カードの外側に移動され、最初は表示されません。
rreeeカード上でマウスをスライドさせると、カードの影が変化し、カードが1.05倍に拡大されます。カード内の画像の透明度が 0.2 に設定され、テキストが元の位置に戻り、透明度が 1 に設定されます。
.tile .text{ z-index:99; position:absolute; padding:30px; height:calc(100% - 60px); } .tile h1{ font-weight:300; margin:0; text-shadow: 2px 2px 10px rgba(0,0,0,0.3); } .tile h2{ font-weight:100; margin:20px 0 0 0; font-style:italic; transform: translateX(200px); } .tile p{ font-weight:300; margin:20px 0 0 0; line-height: 25px; transform: translateX(-200px); transition-delay: 0.2s; } .animate-text{ opacity:0; transition: all 0.6s ease-in-out; }
上記は CSS3、記事カード、UI デザインの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。