css3动画游侠无法正常工作

时间：2018-01-09 06:17:58

标签： html css3

我为网站创建了一个雷达CSS3动画，它几乎所有浏览器都工作正常，除了safari浏览器最新版本它没有显示边框。如果我们添加背景颜色显示但边框不可见。一直在挖掘，但无法找到解决方案。我在谈论0％和100％的关键帧边界。

这里是HTML和CSS3 

.radar-desktop {
	bottom: 0;
	left: 0;
	top: auto;
	right: 0;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px auto;
	flex: unset !important;
	position: relative;
}

.wave-desktop {
	width: 0%;
	padding-top: 0%;
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	max-width: 100%;
	max-height: 100%;
}

.wave-desktop.time1-desktop {
	background-image: none;
	background-repeat: no-repeat;
	background-size: 120px 120px;
	width: 120px;
	height: 120px;
	background-position: center;
}

.wave-desktop.time2-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
}

.wave-desktop.time3-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
}

.wave-desktop.time4-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
}

.wave-desktop.time5-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
}

.wave-desktop.time6-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
}

.wave-desktop.time7-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
}

.wave-desktop.time8-desktop {
	-webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
	animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
	min-width: 150px;
	min-height: 150px;
}

@-webkit-keyframes radardesktop {
	0% {
		width: 0%;
		padding-top: 0%;
		border: 1px solid #000000;
		z-index: 4;
	}
	25% {
		z-index: 3;
	}
	50% {
		z-index: 2;
	}
	75% {
		z-index: 1;
	}
	100% {
		width: 100%;
		padding-top: 100%;
		border: 1px solid #000000;
	}
}

@keyframes radardesktop {
	0% {
		width: 0%;
		padding-top: 0%;
		border: 1px solid #000000;
		z-index: 4;
	}
	25% {
		z-index: 3;
	}
	50% {
		z-index: 2;
	}
	75% {
		z-index: 1;
	}
	100% {
		width: 100%;
		padding-top: 100%;
		border: 1px solid #000000;
	}
}
<div class="radar-desktop">
	<div class="wave-desktop time1-desktop"></div>
	<div class="wave-desktop time2-desktop"></div>
	<div class="wave-desktop time3-desktop"></div>
	<div class="wave-desktop time4-desktop"></div>
	<div class="wave-desktop time5-desktop"></div>
	<div class="wave-desktop time6-desktop"></div>
	<div class="wave-desktop time7-desktop"></div>
	<div class="wave-desktop time8-desktop"></div>
</div>

谢谢

1 个答案:

答案 0 :(得分：0)

找到解决方案。 

.wave-desktop {
    width: 0%;
    padding-top: 0%;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    max-width:100%;
    max-height:100%;
}
    .wave-desktop.time1-desktop {
        background-image: none;
        background-repeat: no-repeat;
        background-size: 120px 120px;
        width:120px;
        height:120px;
        background-position: center;

    }
    .wave-desktop.time2-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
              border:1px solid;
    }
    .wave-desktop.time3-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
              border:1px solid;
    }
    .wave-desktop.time4-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              border:1px solid;
    }
    .wave-desktop.time5-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              border:1px solid;
    }
    .wave-desktop.time6-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              border:1px solid;
    }
    .wave-desktop.time7-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              border:1px solid;
    }
    .wave-desktop.time8-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
              border:1px solid;
              min-width: 150px;
              min-height:150px;
    }

    @-webkit-keyframes radardesktop {
      0% {
        width: 0%;
        padding-top: 0%;
        border-color: #D9D9D9;
        background-color: transparent;
        z-index: 4;
      }
      25% {
        z-index: 3;
      }
      50% {
        z-index: 2;
      }
      75% {
        z-index: 1;
      }
      100% {
        width: 100%;
        padding-top: 100%;
        border-color: #D9D9D9;
        background-color: transparent;
      }
    }

    @keyframes radardesktop {
      0% {
        width: 0%;
        padding-top: 0%;
        border-color: #D9D9D9;
        background-color: transparent;
        z-index: 4;
      }
      25% {
        z-index: 3;
      }
      50% {
        z-index: 2;
      }
      75% {
        z-index: 1;
      }
      100% {
        width: 100%;
        padding-top: 100%;
        border-color: #D9D9D9;
        background-color: transparent;
      }
    }
相关问题
最新问题