CSS3过渡缓和盒子阴影

时间:2013-04-23 07:55:05

标签: css ruby-on-rails css3 hover css-transitions

我正在尝试使用CSS3让div id轻松进出盒子阴影。

我现有的CSS是:

#how-to-content-wrap-first:hover {
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e;
-webkit-transition: box-shadow 0.3s ease-in-out 0s;
-moz-transition: box-shadow 0.3s ease-in-out 0s;
-o-transition: box-shadow 0.3s ease-in-out 0s;
-ms-transition: box-shadow 0.3s ease-in-out 0s;
transition: box-shadow 0.3s ease-in-out 0s; 

我遇到的问题是,在元素的第一次悬停时,没有缓和进出,然后任何后续的悬停都会缓和但不会缓和。

人们对此有何建议会非常感激?

3 个答案:

答案 0 :(得分:43)

您需要在.class而非.class:hover

上使用转场

Demo

div {
    height: 200px;
    width: 200px;
    box-shadow: none;
    transition: box-shadow 1s;
    border: 1px solid #eee;
}

div:hover {
    box-shadow: 0 0 3px #515151;
}

答案 1 :(得分:1)

这可以工作:

 #how-to-content-wrap-first:hover{
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;
 }

答案 2 :(得分:0)

这里是resource-efficient solution

#how-to-content-wrap-first::after{
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         
}

#how-to-content-wrap-first:hover::after {
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;
}