資料結構
網路
關係型資料庫管理系統 (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 次瀏覽
