CSS Card Design

2025年3月17日 | 阅读 7 分钟

CSS 卡片设计是呈现信息的一种用户友好且有组织风格的重要方法。卡片已成为现代网页设计中不可或缺的组成部分。它可以从简单、基础的设计到更复杂、动态的卡片设计布局。

我们可以利用独特的性能和设计来创造令人兴奋和有趣的用户体验。CSS 卡片设计通过悬停效果、动画和交互式元素为 Web 开发应用程序服务。

基础 CSS 卡片设计

基础卡片设计使用简单的 CSS 属性来弹出卡片布局。我们可以在一个网页上使用单个或多个卡片。

语法

以下语法有助于创建任何容器或标签的卡片设计。

.card {
  box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
  transition: 0.2s;
  width: 35%;
}

示例

以下示例展示了 CSS 卡片的各种设计和布局。我们可以使用单个、多个和吸引人的卡片设计。

示例 1

基础和简单的 CSS 卡片设计示例展示了其在网页设计中的用法和要求。我们可以在卡片上使用基本信息和一张图片。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 35%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create Basic and Single Card Design </p>
<!-- basic card container tag -->
<div class = "card">
<!-- card information -->
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了一个基础卡片设计。

示例 2

该示例在一页网页中展示了多个卡片，以用户友好的格式显示各种信息。我们可以在卡片上使用基本信息和一张图片。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 45%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
#card1{
float: left;
}
#card2{
float: right;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create multiple Card Designs to display various types of information </p>
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了两个基础卡片设计。

带悬停效果的 CSS 卡片设计

卡片设计使用基本的 CSS 属性来显示卡片布局。我们可以在卡片上使用悬停效果来弹出所需的卡片。

语法

以下语法有助于创建带悬停效果的任何容器的卡片设计。

.card {
  box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
  transition: 0.2s;
}
.card:hover {
/*CSS property design*/
}

示例

以下示例展示了 CSS 卡片的各种设计和布局。我们可以使用单个或多个吸引人的卡片设计。

示例 1

简单的 CSS 卡片设计示例展示了其在网页设计中带悬停效果的用法和要求。在卡片悬停后，我们可以更改 CSS 属性及其值。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 35%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
/* card design with hover effect */
.card:hover {
box-shadow: 5px 8px 16px 5px rgba(0,0,0,0.2);
background-color:aqua;
margin-left:30px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with Hover Effect </h2>
<p> Create Basic and Single Card Design </p>
<!?use single card design -->
<div class = "card">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了 CSS 卡片设计。

示例 2

简单的 CSS 卡片设计示例展示了网页设计中带悬停效果的多个卡片。我们可以为两个卡片的悬停效果更改 CSS 属性及其值。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 45%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
#card1{
float: left;
}
#card2{
float: right;
}
/* card design with hover effect */
#card1:hover {
box-shadow: 5px 8px 16px 5px rgba(0,0,0,0.2);
background-color:aqua;
margin-left:30px;
}
#card2:hover {
box-shadow: 5px 8px 16px 5px rgba(0,0,0,0.2);
background-color:orange;
margin-top:30px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create multiple Card Designs to display various types of information </p>
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了 CSS 卡片设计。

带动画的 CSS 卡片设计

卡片设计使用基本的 CSS 属性来显示卡片布局。我们可以使用悬停效果来弹出数据。我们可以添加动画以实现吸引人和高级的设计。我们可以使用动画属性及其值。@keyframes 对于 CSS 的动画属性至关重要。

语法

以下语法有助于创建带动画的任何容器的卡片设计。

.card {
  box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
  transition: 0.2s;
}
.card:hover {
    animation: popup 2s;
}
@keyframes popup {
  50%{
    Animation property of the CSS tag
  }
}

示例

以下示例展示了 CSS 卡片的各种设计和布局。我们可以使用单个或多个吸引人的卡片设计。

示例 1

简单的 CSS 卡片设计示例展示了其在网页设计中带悬停效果的用法和要求。在卡片悬停后，我们可以更改 CSS 属性及其值。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 45%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
#card1{
float: left;
}
#card2{
float: right;
}
/* CSS card design with hover effect and animation property */
#card1:hover {
animation: popup 2s;
}
/* CSS card design for animation tag property */
@keyframes popup {
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
70%{
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with animation </h2>
<p> Create multiple Card Designs to display various types of information </p>
<!?use multiple card design in a single web page -->
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了一个基础卡片设计。

示例 2

简单的 CSS 卡片设计示例展示了其在网页设计中带悬停效果的用法和要求。在卡片悬停后，我们可以更改 CSS 属性及其值。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width: 45%;
background-color: white;
margin: 10px;
}
.main_div {
background-color: #F9F1F1;
height:380px;
}
.container {
padding: 2px 16px;
}
#card1{
float: left;
}
#card2{
float: right;
}
/* first card design with animation property */
#card1:hover {
position: relative;
    animation: myfirst 3s;
  animation-direction: down;
}
@keyframes myfirst {
  0%   {background: red; left: 0px; top: 0px;}
  50%  {background: yellow; left: 50px; top: 200px;}
  }
/* second card design with animation property */
 #card2:hover {
position: relative;
    animation: myfirst1 5s;
  animation-direction: up;
}

@keyframes myfirst1 {
  0%   {background: red; right: 0px; bottom: 0px;}
  50%  {background: blue; right: 50px; bottom: 200px;}
  }

</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with animation </h2>
<p> Create multiple Card Designs to display various types of information </p>
<!?use multiple card design in a single web page -->
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> JavaTpoint Website </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了一个基础卡片设计。

结论

CSS 卡片设计有助于在网页上创建高级和动画设计。它使卡片功能用户友好、吸引人且易于阅读。

下一主题CSS 元素选择器

CSS Card Design

基础 CSS 卡片设计

语法

示例

带悬停效果的 CSS 卡片设计

语法

示例

带动画的 CSS 卡片设计

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Card Design

基础 CSS 卡片设计

语法

示例

带悬停效果的 CSS 卡片设计

语法

示例

带动画的 CSS 卡片设计

语法

示例

结论

相关帖子

CSS text-orientation

CSS nth selector

上标 & 下标

CSS Variables

CSS top property

CSS 边框

CSS root

CSS Radio Button

CSS Background-color

CSS bottom property

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器