Question

我让这个动画在Chrome和Android中运行，而在Safari和iOS中，铃声并没有消失，而是保持黑色。是什么原因造成的？

有没有办法不使用盒子阴影并达到相同的效果？

<div class="loader">
  <span class="ring ring-1"></span>
  <span class="ring ring-2"></span>
  <span class="ring ring-3"></span>
  <span class="ring ring-4"></span>
</div>

@yellow: #FFD200;
@brown: darken(@yellow, 45%);

body {
  background: fade(@yellow, 90%);
}

.loader {
    position: relative;
    width: 20rem;
    height: 20rem;
    .ring {
        position: absolute;
        border-radius: 50%;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        animation: pulse 8s ease-out infinite;
        &.ring-2 {
            animation-delay: 2000ms
        }
        &.ring-3 {
            animation-delay: 4000ms
        }
        &.ring-4 {
            animation-delay: 6000ms
        }
    }
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 60px @brown;
            transform: scale(0);
            opacity: 0;
        }
        25% {
            box-shadow: 0 0 0 45px rgba(darken(@yellow, 40%), 0.66);
            opacity: 1;
        }
        50% {
            box-shadow: 0 0 0 25px rgba(darken(@yellow, 30%) 0.33);
        }
        100% {
            box-shadow: 0 0 0 1px rgba(darken(@yellow, 20%) 0);
            transform: scale(1);
        }
    }
}

Answer 1

@Turnip指出我缺少逗号。

Safari中的框阴影动画不褪色

1 个答案: