Question

所以基本上我在一个元素上添加了一张图片，当我在它上面盘旋时，这是有效的，但后来我补充道：

转型：0.2s;

它并没有过渡，为什么会这样呢？我希望它能够轻松进入画面，而不仅仅是立刻出现。

帮助将不胜感激。

如果有任何帮助，我使用了内容：url（＆＃34;图片位置＆＃34;）;添加图像。

Answer 1

如果我理解你需要什么，这将是类似的：

＆＃13;

.picturehover {
  background-color: #f0f0f0;
  position: relative;
  height: 200px;
  width: 300px;
}
.picturehover:after {
  background: transparent url(https://lorempixel.com/300/200) center center / cover no-repeat;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity .4s ease-in-out; 
}
.picturehover:hover:after {
  opacity: 1;
}

＆＃13;

<div class="picturehover">Some text</div>

＆＃13;

Answer 2

我这样做

.box{
  background:#333;
  width:100px;
  height:100px;
  transition:0.2s linear;
}
.box:hover{
  background:#ccc;
}

<div class="box"></div>

如何在CSS元素中添加转换？

2 个答案: