ホームページ > 記事 > ウェブフロントエンド > CSS3 を使用して、非常にクールなマウスオーバー画像アニメーションの 8 つのグループを実装します。

CSS3 を使用して、非常にクールなマウスオーバー画像アニメーションの 8 つのグループを実装します。

不言オリジナル: 2018-06-26 11:42:281852ブラウズ

この記事では主に、非常にクールな純粋な CSS3 マウスオーバー画像アニメーション効果の 8 セットを紹介します。各アニメーション効果は非常にエキサイティングで、興味のある方は参考にしてください。

これは非常にクールな純粋な CSS3 マウスです。 - 画像上でのアニメーション効果。マウスを画像上にスライドさせると、マスクレイヤと画像タイトルがさまざまな方法で表示されます。各効果セットは 3 つの異なるマウスオーバー画像効果に分かれています。

マウスが画像上をスライドするときのこれらのアニメーション効果はすべて CSS3 を使用して行われます。これらには、スライド効果、傾斜効果、反転効果、回転効果などが含まれます。以下は GIF のプレビュー画像です。

使用方法

hover-Effects.css ファイルをページに導入します。

<link rel="stylesheet" href="css/hover-effects.css" />

HTML構造

マウスオーバー画像アニメーション効果の1つを例として挙げます。そのHTML構造は次のとおりです:

<p class="effect-1">
   <p class="image-box">
      <img src="img-2.jpg" alt="Image-3">
   </p>
   <p class="text-desc">
      <h3>Your Title</h3>
      <p>......</p>
      <a href="#" class="btn">Learn more</a>
   </p>
</p>

CSSスタイル

.effect-1{   
  float: left;    
  width: 340px;    
  position: relative;    
  overflow: hidden;    
  text-align: center;    
  border: 4px solid rgba(255, 255, 255, 0.9);    
  overflow: visible;   
}   
.effect-1 img{   
  transition: 0.5s;   
}   
.effect-1:hover img{   
  transform: scale(0.3) translateY(-110%);   
  position: relative;    
  z-index: 9;   
} .effect-1 .text-desc{   
  transform: translateY(100%);    
  opacity: 0;    
  padding: 85px 20px 10px;    
  transition: 0.5s;   
} .effect-1:hover .text-desc{   
  transform: translateY(0px);    
  opacity: 1;   
}

上記はこの記事の全内容です。学習に役立つその他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

CSS3 を使用して、非常にクールなマウスオーバー画像アニメーションの 8 つのグループを実装します。

関連記事