我有几颗星应该绕着它转。我让它在Chrome/Firefox/Opera中运行,但在Edge/IE中无法运行。代码可能有一些改进。我愿意改进。动画在所有其他浏览器(不包括Edge)中都可以正常工作。
以下是我的代码的相关部分:
:root{
--duration: 4s;
}
.checked {
color: orange;
}
#loader {
list-style: none;
top: 50%;
left: 50%;
position: absolute;
}
li {
position: absolute;
}
span {
visibility: hidden;
}
ul li:nth-child(1) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
}
ul li:nth-child(2) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
}
ul li:nth-child(3) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
}
ul li:nth-child(4) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
}
ul li:nth-child(5) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
}
ul li:nth-child(6) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
}
ul li:nth-child(7) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
}
ul li:nth-child(8) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
}
ul li:nth-child(9) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
}
ul li:nth-child(10) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
}
ul li:nth-child(11) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
}
ul li:nth-child(12) > span {
animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
-webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
-moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
-o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
}
@keyframes rot1 {
from {
visibility: visible;
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
visibility: visible;
transform: rotate(360deg) translate(-60px) rotate(-360deg);
}
}
@-webkit-keyframes rot1 {
from {
visibility: visible;
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
visibility: visible;
transform: rotate(360deg) translate(-60px) rotate(-360deg);
}
}
@-moz-keyframes rot1 {
from {
visibility: visible;
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
visibility: visible;
transform: rotate(360deg) translate(-60px) rotate(-360deg);
}
}
@-o-keyframes rot1 {
from {
visibility: visible;
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
visibility: visible;
transform: rotate(360deg) translate(-60px) rotate(-360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/loader.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="loader-inner">
<ul id="loader">
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
<li><span class="fa fa-star checked"></span></li>
</ul>
</div>
</body>
</html>
谢谢你的回复和建议,也为我的英语感到抱歉(我来自德国)。
最佳答案
您遇到了this bug:Edge无法在CSS转换和动画中使用calc()
。
要解决这个问题,您需要为Edge硬编码那些转换,或者根据current@for
值编写一个SCSS--duration
循环来完成。
jsFiddle和SCSS:https://jsfiddle.net/websiter/bgfu5aeo/
工作示例(CSS,因此还没有scs):
* {
--duration: 2.5s;
--size: 240px;
--qrtr: -webkit-calc(var(--size) / -4);
--qrtr: -moz-calc(var(--size) / -4);
--qrtr: calc(var(--size) / -4);
}
.loader-inner {
width: var(--size);
margin: -webkit-calc(var(--size) / 2) auto 0;
margin: -moz-calc(var(--size) / 2) auto 0;
margin: calc(var(--size) / 2) auto 0;
}
#loader {
position: relative;
height: var(--size);
list-style-type: none;
}
#loader li {
position: absolute;
}
#loader li i {
visibility: hidden;
-webkit-animation: rot1 var(--duration) infinite linear;
-moz-animation: rot1 var(--duration) infinite linear;
-o-animation: rot1 var(--duration) infinite linear;
animation: rot1 var(--duration) infinite linear;
}
#loader li:nth-child(1) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 0);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 0);
-o-animation-delay: calc(var(--duration) / 12s * 0);
animation-delay: 0s;
}
#loader li:nth-child(2) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 1);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 1);
-o-animation-delay: calc(var(--duration) / 12s * 1);
animation-delay: 0.20833s;
}
#loader li:nth-child(3) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 2);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 2);
-o-animation-delay: calc(var(--duration) / 12s * 2);
animation-delay: 0.41667s;
}
#loader li:nth-child(4) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 3);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 3);
-o-animation-delay: calc(var(--duration) / 12s * 3);
animation-delay: 0.625s;
}
#loader li:nth-child(5) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 4);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 4);
-o-animation-delay: calc(var(--duration) / 12s * 4);
animation-delay: 0.83333s;
}
#loader li:nth-child(6) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 5);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 5);
-o-animation-delay: calc(var(--duration) / 12s * 5);
animation-delay: 1.04167s;
}
#loader li:nth-child(7) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 6);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 6);
-o-animation-delay: calc(var(--duration) / 12s * 6);
animation-delay: 1.25s;
}
#loader li:nth-child(8) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 7);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 7);
-o-animation-delay: calc(var(--duration) / 12s * 7);
animation-delay: 1.45833s;
}
#loader li:nth-child(9) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 8);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 8);
-o-animation-delay: calc(var(--duration) / 12s * 8);
animation-delay: 1.66667s;
}
#loader li:nth-child(10) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 9);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 9);
-o-animation-delay: calc(var(--duration) / 12s * 9);
animation-delay: 1.875s;
}
#loader li:nth-child(11) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 10);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 10);
-o-animation-delay: calc(var(--duration) / 12s * 10);
animation-delay: 2.0833s;
}
#loader li:nth-child(12) > i {
-webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 11);
-moz-animation-delay: -moz-calc(var(--duration) / 12s * 11);
-o-animation-delay: calc(var(--duration) / 12s * 11);
animation-delay: 2.29167s;
}
@-webkit-keyframes rot1 {
from {
-webkit-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
}
to {
visibility: visible;
-webkit-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
}
}
@-moz-keyframes rot1 {
from {
-moz-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
}
to {
visibility: visible;
-moz-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
}
}
@-o-keyframes rot1 {
from {
-o-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
}
to {
visibility: visible;
-o-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
}
}
@keyframes rot1 {
from {
-webkit-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
-moz-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
-o-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
}
to {
visibility: visible;
-webkit-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
-moz-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
-o-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="loader-inner">
<ul id="loader">
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
</ul>
</div>