我有一個動畫球，當它滾到右側時，我需要文本淡入，當球滾回左側時，我需要文本淡出。我無法讓這個東西同步。我嘗試弄亂動畫的不同秒數并執行 1、2、4、6、8 秒的計時，但沒有一個可以同步。我究竟做錯了什么？body { background: #fff; padding: 0; margin: 0; overflow-x: hidden; } .loader { position: fixed; z-index: 999; top: 0; left: 0; width: 0; height: 100vh; transition: width 0s 1.4s ease; } .loading_overlap{ background: #007AE5; width: 100%; position: fixed; height: 100%; } .loading_overlap_float{ width: 100%; overflow-x: hidden; overflow-y: hidden; height: 92px; } .bar { position: relative; height: 2px; width: 500px; margin: 0 auto; background: #fff; margin-top: 90px; } .circle { position: absolute; top: -30px; margin-left: -30px; height: 60px; width: 60px; left: 0; background: #fff; border-radius: 30%; -webkit-animation: move 4s infinite; opacity: 0; } .bar p { position: absolute; top: -35px; right: -85px; text-transform: uppercase; color: #007AE5; font-family: helvetica, sans-serif; font-weight: bold; } @-webkit-keyframes move { 0% {left: 0; opacity: 0;} 50% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;} 75% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;} 100% {right: 100%;} } .bar span { position: absolute; top: -40px; text-transform: uppercase; font-family: cursive; font-weight: bold; font-size: 30px; left:0; color: #fff !important; } .fade-in { -webkit-animation: fadeinout 8s infinite; animation: fadeinout 8s infinite; opacity: 0; } @-webkit-keyframes fadeinout { 50% { opacity: 1; } } @keyframes fadeinout { 50% { opacity: 1; } }
1 回答
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
使用 2 秒作為持續時間，將不透明度更改為 100%，然后考慮替代方案：
body {
background: #fff;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.loader {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 0;
height: 100vh;
transition: width 0s 1.4s ease;
}
.loading_overlap {
background: #007AE5;
width: 100%;
position: fixed;
height: 100%;
}
.loading_overlap_float {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
height: 92px;
}
.bar {
position: relative;
height: 2px;
width: 500px;
margin: 0 auto;
background: #fff;
margin-top: 90px;
}
.circle {
position: absolute;
top: -30px;
margin-left: -30px;
height: 60px;
width: 60px;
left: 0;
background: #fff;
border-radius: 30%;
-webkit-animation: move 4s infinite;
opacity: 0;
}
.bar p {
position: absolute;
top: -35px;
right: -85px;
text-transform: uppercase;
color: #007AE5;
font-family: helvetica, sans-serif;
font-weight: bold;
}
@-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
50% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
75% {
left: 100%;
-webkit-transform: rotate(450deg);
width: 170px;
height: 170px;
opacity: 1;
}
100% {
right: 100%;
}
}
.bar span {
position: absolute;
top: -40px;
text-transform: uppercase;
font-family: cursive;
font-weight: bold;
font-size: 30px;
left: 0;
color: #fff !important;
}
.fade-in {
animation: fadeinout 2s infinite alternate;
opacity: 0;
}
@keyframes fadeinout {
100% {
opacity: 1;
}
}
<div class="loader loader--active">
<!-- loading spinning div -->
<div id="loader-bl">
<div class="loading_overlap d-flex align-items-center">
<div class="loading_overlap_float">
<div class="bar">
<div class="circle"></div>
<span class="fade-in">Fade IN Out</span>
<p>Loading</p>
</div>
</div>
</div>
</div>
</div>
- 1 回答
- 0 關注
- 195 瀏覽
添加回答
舉報
0/150
提交
取消