純粋な 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) をご覧ください。