Question

请查看以下链接

http://intelmarketing.mk/demos/security/services/

你会看到我连续3个图标，并且几乎所有的悬停都有css3过渡但是我无法将动画添加到我试过的几个例子中的图标

http://css3.bradshawenterprises.com/cfimg/ - 示例1

但没有任何接缝可以工作，我的图像也是透明的，所以示例1不能正常工作，所以我想要的是当我将鼠标悬停在框上时按钮和图标同时平滑地悬停，按钮工作但图标不是我怎么解决这个问题？

第一个图标的css：

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;
}

.servbox:hover .fastvagticon
{
    width:299px;
    height:166px;
    background-image:url('images/FASTVAGTh.png');
    background-repeat:no-repeat;
    margin-top:0px;
}

按钮的css

.servbtn1
{
    background-color:transparent;
    background-position: right center;
    background-image: url("images/eempy.png");
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 34px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      border:1px solid #fff;
}

.servbox:hover .servbtn1
{
    width:184px;
    height:34px;
    background-color:#3E1C1E;
    background-repeat: no-repeat;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
}

Answer 1

您没有向图标添加任何转换：

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

另外，我不知道你是否知道但这在Firefox中不起作用。 Firefox不允许任何背景图像动画。

CSS3背景图像悬停过渡

1 个答案: