我希望在我的链接背景上实现一个简单的过渡,即图像,这样当我将鼠标悬停时,背景图像应该旋转一点。
这是我的,但它不起作用:
<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);
}
答案 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>