Question

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

我的大部分工作（通过查看CSS）除外，我无法模拟显示ajax动画时发生的黑暗/透明度。有什么想法可以做到吗？
还有关于如何让时钟“发光”的任何想法？里面的颜色是白色的吗？

这是网站：http://www.jomashop.com/tissot.html?gender=25&price_filter=23789。要显示动画，请更改价格。

这是我正在处理的完整代码：

<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>

非常感谢

Answer 1

在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中添加图片（使用类，让我们说loading）并将以下CSS应用于图像：

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

Answer 2

他们用于提供叠加层的元素是#backgroundPopup。如果查看元素css，您会看到opacity设置为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;
}

使用相同的技巧，你可以得到这个小提琴 - https://jsfiddle.net/j3uhnf03/1/

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

2 个答案: