HTMLとCSSのみを使用した対応するアニメーションカードのデザイン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Product Card Design - InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="productContainer">
<div class="card">
<div class="header" style="height: 17rem;">
<img src="https://drive.google.com/uc?id=1p-U1HYQRRFKAEDC4JzSqps4YWtpQ8_Pc&export=view" alt="Product">
</div>
<div class="footer">
<div class="title">
<h2>Smart Watch</h2>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
<button class="buyNow">Buy Now</button>
</div>
</div>
<div class="card">
<div class="header" style="height: 17rem;">
<img src="https://drive.google.com/uc?id=19w5IpBg45HXZsUc2cYF-LsyDcoxs_aLZ&export=view" alt="Product">
</div>
<div class="footer">
<div class="title">
<h2>IPhone 13 Pro</h2>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
<button class="buyNow">Buy Now</button>
</div>
</div>
<div class="card">
<div class="header" style="height: 17rem;">
<img src="https://drive.google.com/uc?id=1fkkvLxXRjMTCCtLwUZmWXlKOBOYd3IbM&export=view" alt="Product">
</div>
<div class="footer">
<div class="title">
<h2>Sports Shoe</h2>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
<button class="buyNow">Buy Now</button>
</div>
</div>
</div>
</body>
</html>
マージン: 0
パディング: 0
ボックス・サイジング
}
高さ:100 vh;
表示:屈曲;
アイテムの整列
コンテンツを正当化する
背景色:△△fff;
｝
. productContainer
表示:屈曲;
フレックスラップ:ラップ
アイテムの整列
コンテンツを正当化する
｝
カード{ }
高さ:自動車;
オーバーフロー
最大幅:22レム;
ボーダー半径:1レム
マージン:1レム2レム;
フォント家族:『ポピンズ』、サンセリフ;
トランジション:0.5秒、ボックスの影0.5
ボックスシャドウ:0 px 0 px 20 px 1 px
｝
カード:ホバー
変換: translatey (- 15 px );
ボックスシャドウ:0 px 10 px 20 px 0 px rgb(204 204 204/50 %);
｝
.カード.ヘッダ{
Z - index : 2 ;
表示:屈曲;
位置:相対;
アイテムの整列
コンテンツを正当化する
バックグラウンドカラー:
ボーダー半径:0レム0レム4レム
｝
.カード.ヘッダ::前に
コンテンツ", "
トップ:0
左側:0
Z - index : - 1 ;
幅:100 %;
高さ:100 %;
位置:絶対;
ボーダー半径:0レム0レム4レム
｝
.カード.ヘッダimg {
幅:85 %
｝
.カード.フッター
Z - index : 2 ;
テキストの整列
位置:相対;
パディング: 20 px 20 px 20 px 20 px
｝
.カード.フッター:前に
コンテンツ", "
トップ:0
左側:0
幅:100 %;
Z - index : - 1 ;
高さ:100 %;
位置:絶対;
背景色:△△fff;
ボーダー半径:3レム0レム0レム
｝
.カード.フッター.称号
フォントサイズ:1.4レム
マージンボトム
｝
.カード.フッターP
フォントサイズ:8レム
｝
. ContaintContainer.カード:n番目の子供(2).ヘッダimg {
幅:120 %
｝
. ContaintContainer.カード:n番目の子供(3).ヘッダimg {
幅:120 %
｝
. ContaintContainer.カード:n番目の子供(1).ヘッダ::前に
背景画像:リニアグラデーション(下、2度354 d、磁円23252 c)
｝
. ContaintContainer.カード:n番目の子供(1).フッター
背景:唐突23252 c
｝
. ContaintContainer.カード:n番目の子供(2).ヘッダ::前に
背景画像:リニアグラデーション(下、上)
｝
. ContaintContainer.カード:n番目の子供(2).フッター
背景:延喜011842
｝
. ContaintContainer.カード:n番目の子供(3).ヘッダ::前に
背景画像:リニアグラデーション(下、下、E 93632、Chenang 501823);
｝
. ContaintContainer.カード:n番目の子供(3).フッター
背景:延喜501823
｝
ブイナウ
カーソルポインタ
マージントップ:1レム
フォントサイズ:1レム
ボーダー半径:5レム
パディング:6レム2レム;
背景色:△△fff;
移行:すべての
｝
. ContaintContainer.カード:n番目の子供(1).ブイナウ
カラー:2 F 354 D;
ボーダー:2 pxソリッド
｝
. ContaintContainer.カード:n番目の子供(1).ブイナウ:ホバー
色:英和対訳
背景色:1
｝
. ContaintContainer.カード:n番目の子供(2).ブイナウ
色:角
ボーダー:2 pxソリッド
｝
. ContaintContainer.カード:n番目の子供(2).ブイナウ:ホバー
色:英和対訳
背景色:角
｝
. ContaintContainer.カード:n番目の子供(3).ブイナウ
色:
ボーダー:2 pxソリッド
｝
. ContaintContainer.カード:n番目の子供(3).ブイナウ:ホバー
色:英和対訳
背景色:
｝
メディア(最大幅:1248 px){ }
. productContainer
マージントップ:29レム
｝
｝
メディア(最大幅:832 px){ }
. ProductContainer : n番目の子( 1 ) {
マージントップ:92レム
｝
｝
Reference
この問題について(HTMLとCSSのみを使用した対応するアニメーションカードのデザイン), 我々は、より多くの情報をここで見つけました https://dev.to/kavyargb/responsive-animated-card-design-using-html-and-css-only-source-code-177lテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol