Css 如何在div上应用背景透明度（对于AJAX加载动画）？_Css

Css 如何在div上应用背景透明度（对于AJAX加载动画）？

css

Css 如何在div上应用背景透明度（对于AJAX加载动画）？,css,Css,我一直在浏览一块手表作为礼物送给某人，我遇到了一个我正试图复制的ajax加载我得到了它的大部分工作（通过看CSS），除了，我不能模拟黑暗/透明度时发生的ajax动画显示。你知道怎么做吗还有关于如何让时钟“发光”的想法吗？里面的颜色是白色吗这是网站：。要使动画显示，请更改价格以下是我正在编写的完整代码： <html> <head> <style> #ajax-loader{ display: block; border-radius: 6

我一直在浏览一块手表作为礼物送给某人，我遇到了一个我正试图复制的ajax加载

我得到了它的大部分工作（通过看CSS），除了，我不能模拟黑暗/透明度时发生的ajax动画显示。你知道怎么做吗

还有关于如何让时钟“发光”的想法吗？里面的颜色是白色吗

这是网站：。要使动画显示，请更改价格

以下是我正在编写的完整代码：

<html>
<head>
<style>
#ajax-loader{
    display: block;
    border-radius: 60px;
    border: 6px solid #414C5C;
    height: 80px;
    width: 80px;
    position: fixed;
    top: 30%;
    left: 50%;
    background-image:none!important;
    background:#fff;
    -moz-box-shadow: 0 0 5px #fff;
    -webkit-box-shadow: 0 0 5px #FFF;
    box-shadow: 0px 0px 15px #FFF;
}

#ajax-loader::before{
    content: "";
    position: absolute;
    background-color: #414C5C;
    top:6px;
    left: 48%;
    height: 35px;
    width: 6px;
    border-radius: 5px;
    -webkit-transform-origin: 50% 94%;
            transform-origin: 50% 94%;
    -webkit-animation: ptAiguille 12s linear infinite;
            animation: ptAiguille 12s linear infinite;
}

#ajax-loader::after{
    content: "";
    position: absolute;
    background-color: #414C5C;
    top:2px;
    left: 48%;
    height: 38px;
    width: 6px;
    border-radius: 5px;
    -webkit-transform-origin: 50% 97%;
            transform-origin: 50% 97%;
    -webkit-animation: grdAiguille 2s linear infinite;
            animation: grdAiguille 2s linear infinite;
}

@-webkit-keyframes grdAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@-webkit-keyframes ptAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}


#page-overlay {
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
}

</style>
<body>
<p>testest sdfdsf sfs sdfsd sdfds f sdfsdf sfsdf s sdfsdfdsfsdf  sdfsdfsd</p>
<div id="ajax-loader"></div>
<div id="page-overlay"></div>
</body>
</html>


#ajax加载器{
显示：块；
边界半径：60px；
边框：6px实心#414C5C；
高度：80px；
宽度：80px；
位置：固定；
最高：30%；
左：50%；
背景图像：无！重要；
背景：#fff；
-莫兹盒阴影：0 0 5px#fff；
-webkit盒阴影：0 5px#FFF；
盒影：0px 0px 15px#FFF；
}
#ajax加载程序：：之前{
内容：“；
位置：绝对位置；
背景色：#414C5C；
顶部：6px；
左：48%；
高度：35px；
宽度：6px；
边界半径：5px；
-webkit转换来源：50%94%；
变换原点：50%94%；
-webkit动画：ptaiguille12s线性无限；
动画：ptAiguille 12s线性无限；
}
#ajax加载程序：：after{
内容：“；
位置：绝对位置；
背景色：#414C5C；
顶部：2个；
左：48%；
高度：38px；
宽度：6px；
边界半径：5px；
-webkit转换来源：50%97%；
变换原点：50%97%；
-webkit动画：grdaigille 2s线性无限；
动画：grdAiguille 2s线性无限；
}
@-webkit关键帧grdAiguille{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@-webkit关键帧图{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
#页面覆盖{
背景：无重复滚动0 0黑色；
位置：固定；
显示：块；
不透明度：0.5；
z指数：1000001；//或更高
左：0；
排名：0；
身高：100%；
宽度：100%；
}
测试仪sdfdsf sfs sdfsd sdfds f sdfsdf sfsdf s sdfsdfdsfsdf sdfsdfsd

非常感谢

在HTML末尾创建一个覆盖

div

，并尝试将以下CSS添加到覆盖

div

：

background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;

这将创建一个着色透明层，防止您单击背面

更新：要应用光晕效果，请在覆盖

div

（使用类，比如

加载

）中添加一个图像，并将以下CSS应用于图像：

img.loading
{
    box-shadow: 0px 0px 5px #fff;
}

他们用来提供覆盖的元素是

#backgroundPopup

。如果查看元素css，您将看到

不透明度设置为0.7。这允许元素有30%的透明度，并且由javascript触发以显示/隐藏div-默认情况下它是隐藏的
element.style {
    opacity: 0.7;
}

#backgroundPopup {
    background: none repeat scroll 0 0 #000000;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999998;
}

使用相同的技术，你可以得到这把小提琴-
任何方法都可以得到链接中的动画“辉光”？时钟的中间也是白色的吗？我该怎么做？非常感谢：）更新了我的答案。请查收。