所以我想在基本上發生這種情況的地方創建這個影片：當你將滑鼠懸停在一個圖示上時，它會變大，不透明度增加，并且會出現一些文本。除此之外，還有 2 條顏色線從中心向兩側延伸寬度，然后增加高度。底部顏色應向下擴展，而頂部顏色應向上擴展。我創建了這個測驗基地，想知道我將如何從這里著手制作它。我嘗試調整高度、寬度和不透明度，但這些也會編輯圖示，所以我想知道我是采用了錯誤的方法還是只是做錯了。感謝任何幫助和/或指點。
當前代碼：
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
background: #191919;
overflow: hidden;
}
.hoverCard::before {
background: blue;
content: "";
position: absolute;
width: 100%;
height: 50%;
transition: 0.5s;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="../Media/Link-Logos/Discord.png">
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>uj5u.com熱心網友回復：
由于要求在影像懸停時繪制和擴展線條，并且影像本身不能有偽元素，因此此代碼段在 img 之后添加了一個元素，.lines。
這是相對于整個卡片（父）元素絕對定位和調整大小的。
它有 before 和 after 偽元素，它們繪制線條然后使用 CSS 影片垂直擴展。
因為我不清楚你希望線向下發生什么（如果它保持與卡片相同的背景顏色，那么它當然就看不到了）所以這個片段讓它變成粉紅色。
當然，您可能希望更改時間和尺寸以滿足您的特定要求，這只是一個演示一種可能性的簡單示例。
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
overflow: hidden;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
.lines {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
display: flex;
justify-content: center;
background-color: #191919;
}
.lines::before,
.lines::after {
content: '';
margin: 0 auto;
position: absolute;
width: 160px;
height: 10px;
opacity: 0;
}
.lines::before {
background-color: blue;
bottom: 50%;
}
.lines::after {
background-color: pink;
top: 50%;
}
@keyframes expand {
0% {
opacity: 0;
width: 160px;
height: 10px;
}
9.99% {
opacity: 0;
}
10% {
width: 240px;
opacity: 1;
}
50% {
width: 100%;
height: 10px;
}
100% {
opacity: 1;
width: 100%;
height: 100%;
}
}
.mainImg:hover~.lines::before,
.mainImg:hover~.lines::after {
display: block;
animation: expand 3s linear forwards 0.3s;
}
</style>
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="https://picsum.photos/id/1015/200/200">
<div class="lines"></div>
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535497.html
下一篇：：懸停旋轉保持位置懸停