Ios CSS微调器/加载图标不显示在Safari/iPhone上
我正在开发一个移动web应用程序,需要合并一个加载微调器 我从一个有用的网站上找到了一个,可以在IE、FF和Chrome上使用,但由于某些原因,我的iPhone4不能在Safari上使用 HTML:Ios CSS微调器/加载图标不显示在Safari/iPhone上,ios,html,css,Ios,Html,Css,我正在开发一个移动web应用程序,需要合并一个加载微调器 我从一个有用的网站上找到了一个,可以在IE、FF和Chrome上使用,但由于某些原因,我的iPhone4不能在Safari上使用 HTML: Plunker:解决方案需要前缀,例如: .loader > div { width: 6px; height: 20px; position: absolute; left: -10px; bottom: 15px; border-radius: 5px; -we
Plunker:解决方案需要前缀,例如:
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
-ms-transform-origin: 10px 35px;
-o-transform-origin: 10px 35px;
transform-origin: 10px 35px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loader 0.8s infinite;
-moz-animation: loader 0.8s infinite;
animation: loader 0.8s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes loader {
0% {
background: transparent;
left: -10px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
-webkit-transform-origin: -10px 35px;
-moz-transform-origin: -10px 35px;
transform-origin: -10px 35px;
}
}
Plunkr:plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview可能是因为缺少供应商前缀。另外,你的代码在Chrome中对我不起作用。我猜你需要在适当的地方添加
-webkit
前缀。@rnevius-谢谢,这些前缀应该放在哪里?更新的Plunk-它在Safari中仍然不起作用吗?@rnevius-发布了答案。
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.loader {
width: 0px;
height: 0px;
margin: 50vh auto;
/*position: relative;*/
position: absolute;
left: 50%;
top: -100px;
}
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
transform-origin: 10px 35px;
transform: rotate(0deg);
animation: loader 0.8s infinite;
}
.loader > div:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.1s;
}
.loader > div:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.2s;
}
.loader > div:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.3s;
}
.loader > div:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.4s;
}
.loader > div:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.5s;
}
.loader > div:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.6s;
}
.loader > div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.7s;
}
@keyframes loader {
0% {
background: transparent;
left: -10px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
transform-origin: -10px 35px;
}
}
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
-ms-transform-origin: 10px 35px;
-o-transform-origin: 10px 35px;
transform-origin: 10px 35px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loader 0.8s infinite;
-moz-animation: loader 0.8s infinite;
animation: loader 0.8s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes loader {
0% {
background: transparent;
left: -10px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
-webkit-transform-origin: -10px 35px;
-moz-transform-origin: -10px 35px;
transform-origin: -10px 35px;
}
}