我有一些影片可以在 chrome 中完美運行，但在 safari 上卻不行。是不是很奇怪？好的，這是我的代碼：
<header>
<div class="ripple-1"></div>
<div class="ripple-2"></div>
<div class="ripple-3"></div>
<div class="ripple-4"></div>
<div class="ripple-5"></div>
</header>
好的，正如我所說，這在 Safari 和移動設備中不起作用，沒有任何動作。此外，仍然并且僅在 Safari 和移動設備中，在 Safari 上它成為邊界廣場我做錯了什么？
這是我的CSS
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
bottom: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate3d(-50%, 50%, 0);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity;
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
@keyframes ripple{
0%{
transform: translate3d(-50%, 50%, 0) scale(0);
opacity: .33;
}
100%{
transform: translate3d(-50%, 50%, 0) scale(2000);
opacity: 0;
}
}
我試過-webkit-，但沒有用:(
uj5u.com熱心網友回復：
使用下面的 css 它也可以在 safari 上正常作業。
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
top: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate(-50%, -50%);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity, width;
r
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
@keyframes ripple{
0%{
opacity: .33;
}
100%{
opacity: 0;
height: 2000px;
width: 2000px;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525672.html
標籤：css