我正在為卡片制作影片。我想知道如何在沒有影片的情況下對卡片影片產生相同的效果z-index。影片應該只使用transform和opacity屬性。
我想在不使用影片的情況下達到相同的效果（如下所示）z-index，因為它會導致繪畫發生。
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite
cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
@keyframes AnimateCard {
0% {
transform: translateY(-72px);
z-index: 1;
opacity: 0;
}
26% {
transform: translateY(-72px);
z-index: 1;
opacity: 0.2;
}
34% {
transform: translateY(-36px);
z-index: 1;
opacity: 0.3;
}
51% {
transform: translateY(-36px);
z-index: 1;
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 0;
}
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>uj5u.com熱心網友回復：
為了在 4 和 1 之間實作更顯著的淡入淡出效果，我應用了兩個更改：
- 從關鍵幀中洗掉 z-index
- 將 100% 關鍵幀更改為 83%，使其在 100% 之前消失。
這是完整的片段：
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite
cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
@keyframes AnimateCard {
0% {
transform: translateY(-72px);
opacity: 0;
}
26% {
transform: translateY(-72px);
opacity: 0.2;
}
34% {
transform: translateY(-36px);
opacity: 0.3;
}
51% {
transform: translateY(-36px);
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
83% {
transform: translateY(0);
opacity: 0;
}
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>uj5u.com熱心網友回復：
我們可以將最底部的矩形剪裁到高度 0，因為頂部的矩形折疊在它上面：
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
@keyframes AnimateCard {
0% {
transform: translateY(-72px);
opacity: 0;
}
26% {
transform: translateY(-72px);
opacity: 0.2;
}
34% {
transform: translateY(-36px);
opacity: 0.3;
}
51% {
transform: translateY(-36px);
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
76% {
clip: rect(0px, 32px, 32px, 0px);
}
85% {
clip: rect(32px, 32px, 32px, 0px);
}
100% {
transform: translateY(0);
opacity: 0;
}
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>uj5u.com熱心網友回復：
我從關鍵幀中洗掉了z-index并對您現有的 CSS 樣式代碼進行了一些小改動，因此請查看下面的代碼片段。
*,::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.container {
position: relative;
box-shadow: 0 0 0 1px red;
height: 200px;
width: 64px;
overflow: hidden;
}
.item {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background-color: blue;
color: white;
height: 60px;
width: 64px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
@keyframes AnimateCard {
0% {
transform: translateY(-210px);
opacity: 0;
}
26% {
transform: translateY(-140px);
opacity: 0.5;
}
34% {
transform: translateY(-70px);
opacity: 0.2;
}
51% {
transform: translateY(-70px);
opacity: 0.2;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
91% {
transform: translateY(140px);
opacity: 1;
}
100% {
transform: translateY(210px);
opacity: 0;
}
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473955.html
下一篇：方法回傳NoneType物件