我想使用HTML5功能来拥有一个“请稍候”的微调器。可以在文章Loading spinner animation using CSS and WebKit中找到此示例,通过此子页面(no title, but a working example of the prior link)进行说明。
我在复制代码方面没有遇到任何问题(来自与我在此处给出的链接不同的链接)并使其在我自己的网页中运行。我的困难在于使它成为正确的颜色。例如,在我使用的示例中,拨号段都是红色的。我在CSS中看到没有颜色设置器,没有“颜色”,“背景”或“背景颜色”,或者在DIV中明确设置。或者至少没有这些设置实际上改变了段的颜色。
有人能给我一些线索吗?
谢谢, 杰罗姆。
答案 0 :(得分:3)
实际上,您只能在遮罩图像和微调器颜色发生变化之前更改背景颜色。您发布的第二个链接是使用蒙版图像,而不是实际的彩色图像。面具在彩色div周围徘徊,就是这样。更改div的背景颜色,并调整微调颜色。
p#spinner {
height: 0;
padding-top: 62px;
width: 62px;
overflow: hidden;
margin: 0 auto;
background: #f00; /* <----- this controls spinner color -------- */
/* mask image removed from this post only due to space */
}
对于“请等待”微调器,这是一个改变微调器div的背景颜色和标签颜色的问题:
div.labeled div.spinner div { background: #090; }
div.labeled { color: #090; }
如此处所示:JSBin example
答案 1 :(得分:0)
您提供的第二个链接确实是一个图像,因此如果您希望以这种方式进行操作,则必须手动更改颜色。但是,您链接到的文章实际上提供了不同的方法。如果你仔细阅读它,你会发现它首先谈到的只是通过CSS旋转图像(这就是为什么你感到困惑)。然后介绍如何使用简单的HTML和CSS3创建微调器。 Here's a link to a working demo of the spinner, without using images.
在演示中,整个微调器包含在名为div
的{{1}}中,各个条都是spinner
。 divs
上有一个CSS背景样式,您可以通过该样式修改颜色。
答案 2 :(得分:0)
(这位编辑今天给我带来了问题......) div.spinner div回答不会让我在那里。
以下是原始链接http://s3.amazonaws.com/37assets/svn/461-spinner.html。在其中我对名为“Please Wait”的微调器感兴趣。它是红色的。我可以很容易地改变文字颜色,但旋转的部分仍然令人沮丧地变红。
为了省去麻烦,我将内容(包括#00cc00的颜色)复制到此评论中。请注意,绿色不会出现在任何地方。
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Spinner</title>
<style type="text/css">
html, body {
background: #e5e5e5;
text-align: center;
}
/* start basic spinner styles*/
div.spinner {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
}
div.spinner div {
width: 12%;
height: 26%;
background: #000;
position: absolute;
left: 44.5%;
top: 37%;
opacity: 0;
color: #00cc00;
-webkit-animation: fade 1s linear infinite;
-webkit-border-radius: 50px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
@-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
/* end basic spinner styles*/
div.container {
display: inline-block;
padding: 1.5em 1.5em 1.25em;
background: rgba(0,0,0,0.8);
-webkit-box-shadow: 1px 1px 1px #fff;
-webkit-border-radius: 1em;
margin: 1em;
}
div.container.grey {background: rgba(0,0,0,0.2);}
div.container.grey.blue {background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0a2744), color-stop(1, #064483));}
div.container div.spinner {
width: 28px;
height: 28px;
}
div.container.grey div.spinner {
width: 60px;
height: 60px;
}
div.container div.spinner div {background: #fff;}
div.labeled {
font-family: sans-serif;
font-size: 14px;
margin: 0 auto;
background: #fff;
padding: 0.5em 0.75em 0.5em 0.5em;
display: inline-block;
color: #c00;
line-height: 25px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-webkit-border-radius: 1em;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
}
div.labeled div.spinner {
float: left;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 0.5em;
}
div.labeled div.spinner div {background: #c00;}
</style>
</head>
<body>
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="spinner" style="width: 64px; height: 64px">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="spinner" style="width: 34px; height: 34px">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="spinner" style="width: 19px; height: 19px">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="labeled">
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
Please wait…
</div>
<div class="container">
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
</div>
<div class="container grey">
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
</div>
<div class="container grey blue">
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
</div>
</body></html>