CSS

Question

我只需要一点页面卷曲效果的帮助，一切都在悬停时生长很好，但是当我的鼠标光标不在图像上时，渐变颜色收缩很好，但是图像立即变成小图像，任何想法？

所以基本上更大的图像（红色图像）必须随着它的增长而缩小。

＆＃13;

＆＃13;

div {
    width: 100px;
    height: 100px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%; border: 0px none transparent;
    -webkit-transition:  3s; /* For Safari 3.1 to 6.0 */
    transition:  3s;
}

div:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%; border: 0px none transparent;
    width: 400px;
    height:400px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一些css欺骗和魔法

所以一两个小时后我就开始工作了。

所以我做了什么：
3个div：黄色图像，红色图像，角落渐变。

接下来我们有绝对和相对的css属性。这样它们就可以正确叠加在一起。

现在到了有趣的部分：

转换

他们在页面加载时隐藏红色图像的方式是：opacity 让我们将光标移开时，首先让图像消失：
在#red元素上：
transition: opacity 0.1s 2.9s; 因此延迟是2.9s我们等待2.9s，因为黄色元素的高宽转换为3，我们匹配该转换。
这就是图像如何消失 等等我们拖延了那么久？
但是当我们悬停它时，图像会在显示之前使用2.9秒 好的观察确实会发生这种情况 这里有一些魔法：
在#red:hover我们更改过渡属性！
等什么？

#yellow:hover #red {
  opacity: 1;
  transition: opacity 0.1s;
}

更改#yellow悬停时的#red 而且（这是重要的部分）我们改变过渡到没有延迟。可写：transition-delay: 0s;但如果我们将其删除，它会产生同样的效果。

＆＃13;

＆＃13;

#yellow {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%;
  border: 0px none transparent;
  -webkit-transition: 3s;
  /* For Safari 3.1 to 6.0 */
  transition: width 3s, height 3s;
}

#yellow:hover {
  border: 0px none transparent;
  width: 400px;
  height: 400px;
}

#yellow:hover #red {
  opacity: 1;
  transition: opacity 0.1s;
}

#red {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0px none transparent;
  transition: opacity 0.1s 2.9s;
}

#corner {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="yellow">
  <div id="red"></div>
  <div id="corner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

在我个人看来，我希望有一个明显的转变：

＆＃13;

＆＃13;

#yellow {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%;
  border: 0px none transparent;
  -webkit-transition: 3s;
  /* For Safari 3.1 to 6.0 */
  transition: width 3s, height 3s;
  background-size: cover;
}

#yellow:hover {
  border: 0px none transparent;
  width: 400px;
  height: 400px;
}

#yellow:hover #red {
  opacity: 1;
  transition: opacity 1s;
}

#red {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0px none transparent;
  transition: opacity 1s 1.7s;
}

#corner {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="yellow">
  <div id="red"></div>
  <div id="corner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你的想法吗？

div {
    width: 100px;
    height: 100px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll top left; border: 0px none transparent;
    -webkit-transition:  3s; /* For Safari 3.1 to 6.0 */
    transition: 3s;
    background-size: 100% 100%;
}

div:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) no-repeat scroll top left; border: 0px none transparent;
    width: 400px;
    height:400px;
}

<div></div>