在这个链接上：[http://codepen.io/FelixKiunke/pen/nvDcj][1]你可以看到这个家伙制作了一个漂亮的圆圈，每隔10秒完成一次填充边缘。这就是我要复制的内容。
我已经复制了已编译的CSS以及此页面中的HTML并将其放在一些本地文件中。当我打开我的页面时，Chrome会告诉我背景CSS元素的语法无效，因此圆圈根本不显示。
为什么语法在复制的代码中无效，但在网站上却无效？
/*
NOTE ABOUT THE FORK:
This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
Most of the code is unchanged, too make my changes clear I have removed the previous comments.
I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
*/
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(right center, circle, #00ccff 0px, #000088 100%);
border-right: none;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: radial-gradient(right center, circle, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: mask 10s steps(1, end) infinite;
}
@keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
} <div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
更新 这是更新的（和工作的）CSS：
/ 微调 / / * 关于FORK的说明： 这证明了HugoGiraudel（http://codepen.io/HugoGiraudel/pen/BHEwo）在Pie Spinner上使用径向渐变。 大多数代码都没有改变，也使我的更改清楚我已删除以前的注释。 我添加了径向渐变（请参阅悬停时的颜色变化）和响应大小（单击）的演示，以及一些“Click me”伪元素。 * /
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
background: -webkit-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at left center, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
background: -webkit-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at right center, #00ccff 0px, #000088 100%);
border-right: none;
-webkit-animation: rota 10s linear infinite;
-moz-animation: rota 10s linear infinite;
-o-animation: rota 10s linear infinite;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
background: -webkit-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: -webkit-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
-webkit-animation: fill 10s steps(1, end) infinite;
-moz-animation: fill 10s steps(1, end) infinite;
-o-animation: fill 10s steps(1, end) infinite;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
-webkit-animation: mask 10s steps(1, end) infinite;
-moz-animation: mask 10s steps(1, end) infinite;
-o-animation: mask 10s steps(1, end) infinite;
animation: mask 10s steps(1, end) infinite;
}
@-webkit-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@-moz-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@-o-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
@-webkit-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
@-moz-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
@-o-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
@keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
[1]: http://codepen.io/FelixKiunke/pen/nvDcj
答案 0 :(得分：2)
语法确实不正确。它应该是radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%)。这在CodePen中也是不正确的，一旦你修复它，动画看起来就不同了（它有一个＆＃39;点击这里＆＃39;当你悬停它时的号召性用语）。但这不是核心问题。
动画在您的版本中根本不起作用的原因是因为动画属性在Chrome中需要-webkit-前缀。
在CodePen中，使用了-prefix-free，这就是它的工作原理。它是一个自动添加CSS属性的前缀版本的库。 CodePen也可以使用Autoprefixer（另一个这样的库）或两者都不使用。一旦您选择了＆＃39;，您就会发现CodePen示例也不再起作用，因为（S）CSS不包含CSS所需的前缀版本属性。
所以，解决方案：要么使用库，要么为Chrome添加所需的前缀属性（也可能是其他浏览器）。