javascript - 圆圈在 Safari 中看起来参差不齐且不太平滑

Question

我创建了一个圆圈，一旦达到一定比例就会放大和淡出。当我在谷歌浏览器上打开它时，圆圈的边缘看起来完美而清晰。但是在 Safari 上，圆圈的边缘看起来很糟糕并且已经淡出。我添加了“webkit”，它仍然是一样的。难道只是css动画不兼容Safari？这是我的代码。

边缘在 chrome 中的外观图片 https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802

边缘在 Safari 中的外观图片 https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538

HTML

 <ul id="bubbles">

        <li id="firstCircle"></li>



        </ul>

CSS

 #bubbles li{
              position: relative;
                list-style: none;
                display: block;
                border-radius: 100%;
              animation: fadeAndScale 15s ease-in infinite;
              -webkit-animation: fadeAndScale 15s ease-in infinite;
              -ms-animation: fadeAndScale 15s ease-in infinite;
              -moz-animation: fadeAndScale 15s ease-in infinite;
              -o-animation: fadeAndScale 15s ease-in infinite;
          }

          #bubbles li:nth-child(1){
              width: 100px;
              height: 100px;
              background-color: red;
          }
          @keyframes fadeAndScale{
              0%{
                  z-index: 100;
                  transform: scale(0)
              }
              100%{
                  z-index: 0;
                  transform: scale(50);
              }
          }
          @-webkit-keyframes fadeAndScale{
              0%{
                  z-index: 100;
                  -webkit-transform: scale(0)
              }
              100%{
                  z-index: 0;
                  -webkit-transform: scale(50);
              }
          }

Answer 1

我会使用圆点 svg 图像，然后继续使用 css 来动画缩放。

编辑:这就是该网站接近它的方式......

.indiez-fow-bg-wrapper {
  background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 0;
  top: 0;
  left: 0;
  position: absolute;
}

@media (max-width: 600px) {}

.indiez-fow-bg-wrapper>div {
  will-change: transform;
  width: 800px;
  height: 800px;
  position: absolute;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  margin-top: -250px;
  margin-left: -250px;
}

.indiez-fow-bg-wrapper>div:not(._touch) {
  border-radius: 50%;
}

@media (max-width: 600px) {
  .indiez-fow-bg-wrapper>div {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
  }
}

.indiez-fow-bg-wrapper._animate .__violet {
  left: 25%;
  top: 15%;
}

.indiez-fow-bg-wrapper._animate .__violet._touch {
  left: auto;
  right: -10%;
  top: 5%;
  -webkit-animation: scaleUp 16s linear forwards;
  animation: scaleUp 16s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__violet:not(._touch) {
  background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  -webkit-animation: scaleUp 20s linear forwards;
  animation: scaleUp 20s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__red {
  top: 25%;
  right: 5%;
  -webkit-animation: scaleUp 20s 4.5s linear forwards;
  animation: scaleUp 20s 4.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__red:not(._touch) {
  background: -webkit-linear-gradient(45deg, #F14545 0%, #E7219B 100%);
  background: linear-gradient(45deg, #F14545 0%, #E7219B 100%);
}

.indiez-fow-bg-wrapper._animate .__red._touch {
  right: auto;
  left: 25%;
  top: 30%;
  -webkit-animation: scaleUp 16s 3s linear forwards;
  animation: scaleUp 16s 3s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__mint {
  top: 200px;
  left: 20%;
  -webkit-animation: scaleUp 20s 9s linear forwards;
  animation: scaleUp 20s 9s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__mint:not(._touch) {
  background: -webkit-linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
  background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
}

.indiez-fow-bg-wrapper._animate .__mint._touch {
  -webkit-animation: scaleUp 16s 6s linear forwards;
  animation: scaleUp 16s 6s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__sunflower {
  bottom: 0px;
  right: 100px;
  -webkit-animation: scaleUp 20s 13.5s linear forwards;
  animation: scaleUp 20s 13.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__sunflower:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
  background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
}

.indiez-fow-bg-wrapper._animate .__sunflower._touch {
  -webkit-animation: scaleUp 16s 9s linear forwards;
  animation: scaleUp 16s 9s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__purple {
  top: 300px;
  left: 10%;
  -webkit-animation: scaleUp 20s 18s linear forwards;
  animation: scaleUp 20s 18s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__purple:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
  background: linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
}

.indiez-fow-bg-wrapper._animate .__purple._touch {
  -webkit-animation: scaleUp 16s 12s linear forwards;
  animation: scaleUp 16s 12s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__royal-blue {
  top: 10%;
  right: 10%;
  -webkit-animation: scaleUp 20s 22.5s linear forwards;
  animation: scaleUp 20s 22.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__royal-blue:not(._touch) {
  background: -webkit-linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
  background: linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
}

.indiez-fow-bg-wrapper._animate .__royal-blue._touch {
  -webkit-animation: scaleUp 16s 15s linear forwards;
  animation: scaleUp 16s 15s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__orange {
  bottom: 0;
  left: 100px;
  -webkit-animation: scaleUp 20s 27s linear forwards;
  animation: scaleUp 20s 27s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__orange:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
  background: linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
}

.indiez-fow-bg-wrapper._animate .__orange._touch {
  -webkit-animation: scaleUp 16s 18s linear forwards;
  animation: scaleUp 16s 18s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__lime {
  top: 25%;
  right: 200px;
  -webkit-animation: scaleUp 20s 31.5s linear forwards;
  animation: scaleUp 20s 31.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__lime:not(._touch) {
  background: -webkit-linear-gradient(45deg, #79E200 0%, #B2951B 100%);
  background: linear-gradient(45deg, #79E200 0%, #B2951B 100%);
}

.indiez-fow-bg-wrapper._animate .__lime._touch {
  -webkit-animation: scaleUp 16s 21s linear forwards;
  animation: scaleUp 16s 21s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__aqua {
  top: 25%;
  left: 15%;
  -webkit-animation: scaleUp 20s 36s linear forwards;
  animation: scaleUp 20s 36s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__aqua:not(._touch) {
  background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
}

.indiez-fow-bg-wrapper._animate .__aqua._touch {
  -webkit-animation: scaleUp 16s 12s linear forwards;
  animation: scaleUp 16s 12s linear forwards;
}

@-webkit-keyframes scaleUp {
  60% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes scaleUp {
  60% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

<div class="indiez-fow-bg-wrapper  _animate">
  <div class="__violet ">

  </div>
  <div class="__red ">

  </div>
  <div class="__mint ">

  </div>
  <div class="__sunflower ">

  </div>
  <div class="__purple ">

  </div>
  <div class="__royal-blue ">

  </div>
  <div class="__orange ">

  </div>
  <div class="__lime ">

  </div>
  <div class="__aqua ">

  </div>
</div>