数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用CSS创建响应式堆叠卡片悬停效果？
卡片式设计在功能性和美观性方面优于其他设计。为了适应不同屏幕尺寸的需求，卡片设计可以帮助用户更容易地关注特定内容，并使设计师能够在整个设计过程中合理且清晰地呈现内容。杂乱无章的网站令人头疼。当我们在页面上组织各种类型的元素时，卡片设计可以为这些内容的布局提供良好的秩序。这对设计师和用户都有益。卡片设计非常通用，几乎可以用于任何行业中的任何目的。
在这篇文章中，我们将使用HTML和CSS来构建一个响应式堆叠卡片悬停效果。
步骤
首先，使用HTML创建一个简单的卡片结构。
使用CSS来设置卡片的基本结构样式。
为了创建堆叠效果，我们将使用:before和:after伪类以及CSS position属性。
为了使卡片远离上面的卡片，使用CSS transform属性。
为了实现悬停效果，我们将把transform属性应用于卡片。
示例
在给定的示例中，当用户将鼠标悬停在卡片上时，最上面的卡片将在X轴和Y轴上进行平移，此处为(10px-X轴，10px-Y轴)底部右方向，而最下面的堆叠卡片将朝向(-X)轴和(-Y)轴平移，这将创建多个堆叠底部右效果。这是使用:before和:after伪元素完成的。
<!DOCTYPE html>
<html>
<head>
<title> Stacked Cards hover effect </title>
<style>
body {
font-family: sans-serif;
color: #5c5957;
background: #e2d9d5;;
margin-top: 70px;
}
h1{
text-align: center;
}
.card {
position: relative;
cursor: pointer;
max
-width: 380px;
margin: 70px auto;
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card::before,
.card::after,
.card .card
-inner {
background
-color: white;
border: 2px solid #e2d9d5;
border
-radius: 7px;
transition: transform 0.5s;
}
.card::before,
.card
-inner {
z
-index: 1;
}
.card
-inner {
position: relative;
padding: 60px;
}
.card-top::before {
transform: translate(
calc(-1 * 8px),
calc(-1 * 8px)
);
}
.card-top::after {
transform: translate(
calc(-1 * 16px),
calc(-1 * 16px)
);
}
.card-top:hover::before,
.card-top:hover::after,
.card-top:hover .card-inner {
transform: translate(calc(-1 * 8px), 0);
}
</style>
</head>
<body>
<h1> Stacked Cards Hover Effects </h1>
<div id= "card-wrap">
<div class= "card card-top">
<div class= "card-inner">
<h3 id= "card-heading"> Stacked cards </h3>
<div id= "card-body"> This is an example. </div>
</div>
</div>
</div>
</body>
</html>
示例
这里，我们使用了CSS的box-shadow属性、animation属性和transition属性。
创建一个容器，并向其中添加4个div元素。这4个元素将作为卡片。
在每张卡片中创建一个条形。向条形添加线性渐变。
使用CSS设置卡片的样式。相应地定位它们以便堆叠它们。
悬停时，根据需要放置它们以创建过渡效果。
<!DOCTYPE html>
<html>
<head>
<title> Stacked cards </title>
<style>
body {
background-color: rgba(16, 14, 23, 1);
font-family: 'Times New Roman', sans-serif;
}
#box {
display: flex;
position: absolute;
top: 58px;
left: calc(50% - 300px);
padding: 5px;
height: 280px;
width: 590px;
}
#card {
display: flex;
position: relative;
left: 0px;
height: 290px;
width: 210px;
border-radius: 15px;
box-shadow: -3px 0 6px black;
background-color: rgba(23, 20, 29, 1);
transition: 0.6s ease-out;
}
#card:not(:first-child) {
margin-left: -40px;
}
#card:hover {
transform: translateY(-25px);
transition: 0.7s ease-out;
}
#card:hover ~ #card {
position: relative;
left: 48px;
transition: 0.7s ease-out;
}
.heading {
position: absolute;
left: 21px;
top: 16px;
color: white;
font-family: Georgia;
font-weight: 300;
letter-spacing: 1px;
}
h3{
text-align: center;
position: relative;
top: 80%;
color: white;
}
#bar {
position: absolute;
top: 90px;
left: 16px;
height: 6px;
width: 140px;
}
.emptybar {
background-color: rgba(46, 49, 51, 1);
width: 100%;
height: 100%;
}
.filledbar {
position: absolute;
top: 0px;
z-index: 2;
width: 0px;
height: 100%;
background: rgb(10,158,237);
background: linear-gradient(90deg, #009bd9 0%, #d99345 60%, #ffda00 100%);
transition: 0.7s ease-out;
}
#card:hover .filledbar {
width: 130px;
transition: 0.7s ease-out;
}
</style>
</head>
<body>
<div id= "box">
<div id= "card">
<h3 class= "heading"> Card 1 </h3>
<div id= "bar">
<div class= "emptybar"> </div>
<div class= "filledbar"> </div>
<h3> Hello World </h3>
</div>
</div>
<div id= "card">
<h3 class= "heading"> Card 2 </h3>
<div id= "bar">
<div class= "emptybar"> </div>
<div class= "filledbar"> </div>
<h3> Hello World </h3>
</div>
</div>
<div id= "card">
<h3 class= "heading"> Card 3 </h3>
<div id= "bar">
<div class= "emptybar"> </div>
<div class= "filledbar"> </div>
<h3> Hello World </h3>
</div>
</div>
</div>
</body>
</html>
基于卡片的元素在网页设计中的重要性
卡片美观且简单，允许包含较少的信息。由于移动端的适应性是一个关键因素，它们具有响应性和吸引力。
由于空间限制，卡片比较长的文本更容易阅读，而希望阅读更多内容的读者可以通过点击操作按钮来实现。
卡片可以在各种社交网络和平台上以内容片段的形式共享。
卡片不能根据某些美学标准进行分类，因为它们可以与所有事物和所有类型的设计相辅相成。
在杂志中，卡片可以以分层模式设置，甚至保持完全可滚动。它们确实需要非凡的开发技能，以及大量的交互和可用性。
结论
卡片可以是任何大小、颜色或形状。但是，它们都包含图片、图标和一些基本的文本信息，例如标题、用户名和位置。毫无疑问，卡片类型非常适合PC和移动设备。从在线购物商城到社交媒体网站，卡片设计已成为网页设计中的一个突出趋势。
现实世界中，许多社交媒体平台正在转向卡片。为了将多媒体与推文结合起来，Twitter引入了卡片。内容越来越频繁地以卡片格式显示。Google正在探索一种新的信息传递方式——Google Now，它正在从搜索转向移动设备的使用。
卡片对Pinterest至关重要，而Spotify的Discover功能则使用卡片。为了传递信息，Facebook现在正在使用卡片和信息片段。
781 次浏览
