盒子阴影动画的奇怪行为

时间:2018-07-18 22:44:39

标签: html css

我的盒子阴影出现了这种奇怪的行为,并且不知道它来自哪里。

有人知道如何防止这种情况发生吗? (末段视频) 代码如下:

.w-logos.style_1 .w-logos-item {
    border: 0px;
    opacity: 1;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 35px;
    margin-bottom:35px;
    margin-left:30px;
    filter: grayscale(100%) contrast(200%);
    box-shadow: 0 0 0 0.01px;
    transition: all 0.5s; }


.no-touch .w-logos.style_1 .w-logos-item:hover {
    opacity: 1;
    filter: grayscale(0%) contrast(100%);
   padding-top: 0px;
   padding-bottom: 0px;
   box-shadow: 0 0 60px -40px;
}

Link to the video on Youtube.com

如果您想查看真实的网页:http://neu.wu-marketingclub.at(位于主页底部)

在此先感谢您的帮助! :)

1 个答案:

答案 0 :(得分:0)

此CSS样式在Firefox浏览器中还有另一个问题:

enter image description here

box-shadow: 0 0 0 0.01px;删除此行.w-logos.style_1 .w-logos-item { 并将transition: all 0.5s linear;添加到:hover

对于我来说,无论是在Firefox中还是在Chrome中,此更改都可以正常工作。

  

更新:它应该解决Safari悬停问题:

    .no-touch .w-logos.style_1 .w-logos-item:hover {
 opacity: 1;
 filter: grayscale(0%) contrast(100%);
 padding-top: 0px;
 padding-bottom: 0px;
-webkit-appearance: none;
-webkit-box-shadow: 0 0 60px -40px #333;
 box-shadow:0 0 60px -40px #333;
    }