在鼠标上的背景图像上的过渡

时间:2017-07-11 11:04:30

标签: css css3

我希望在我的链接背景上实现一个简单的过渡,即图像,这样当我将鼠标悬停时,背景图像应该旋转一点。

这是我的,但它不起作用:

<div class="vegetable"><a href="#">link</a></div>

.vegetable a {
    background: url(../img/icons/carrot.png) no-repeat ;
    padding-left: 40px;
    color: #fff;
    font-size: 2em;
    line-height: 42px;
    background-size: 32px;
    width: auto;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;


}
.vegetable a:hover {

    /* Firefox */
    -moz-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* WebKit */
    -webkit-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Opera */
    -o-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Standard */
    transform: scale(1.1) rotate(30deg) translate(-5px);
}

1 个答案:

答案 0 :(得分:2)

要获得您正在寻找的结果,您需要使用伪元素作为背景和旋转,这样您就不会影响链接

请参阅代码段

.vegetable a {
  padding: 40px;
  color: #fff;
  font-size: 2em;
  line-height: 42px;
  background-size: 32px;
  width: auto;
  position:relative;
  display:inline-block;
  overflow:hidden;
}

.vegetable a:after {
  content:'';
  background: url(https://www.w3schools.com/css/img_fjords.jpg) no-repeat;
  background-size: cover;
  /* Standard */
  transition: all 1s ease;
  display:inline-block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  
}


.vegetable a:hover:after {
  /* Standard */
  transform: scale(1.1) rotate(30deg) translate(-5px);
}
<div class="vegetable"><a href="#">link</a></div>