主页 / 问题 / 772315
Accepted
humster_spb
Asked:2020-01-18 17:06:19 +0000 UTC2020-01-18 17:06:19 +0000 UTC

CSS：如何通过动画使背景从左到右平滑变化？

  • 772

我从左到右用不同的背景填充悬停时的块。我以第二层的形式使用这个“拐杖”，它只是来回移动。

但问题是，如果块中有文本，那么第二层（以及伪元素）会与它重叠。这可以用css动画完成吗？只是从左到右更改同一块的背景？

#wrapper {
  width: 200px;
  height: 70px;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#inner {
  width: 220px;
  height: 70px;
  background-color: green;
  position: absolute;
  top: 0;
  left: -230px;
  transition: .7s;
}

#wrapper:hover #inner {
  left: 0;
}
<div id="wrapper">
  <div id="inner">
  
  </div>
</div>

html

2 个回答

  1. Best Answer

    .wrapper {
  width: 200px;
  height: 70px;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;  
  color: #fff;
}
.wrapper:before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,128,0,1) 0%,rgba(0,128,0,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);
  transition: left .7s;
}
.wrapper:hover:before{
  left: 0;
}
.block{
  position: relative;
}
    <div class="wrapper">
   <div class="block">text</div>
</div>

    • 1

  2. 可能没有动画

    #wrapper {
  width: 200px;
  height: 70px;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#inner {
  width: 0;
  height: 70px;
  background-color: green;
  position: absolute;
  top: 0;
  transition: width .7s;
}
#text {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  text-align:center;
  line-height:2;
  color:white;
}
#wrapper:hover #inner {
  width: 200px;
}
    <div id="wrapper">
  <div id="inner"></div>\
    <div id="text">text</div>
</div>

    • 0

相关问题