带有 CSS 的页面卷曲效果

Question

我只需要一点卷曲效果的帮助，在悬停时一切都很好，但是当我的鼠标光标不在图像上时，渐变颜色缩小得很好，但是图像立即变成小图像，有什么想法吗？

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

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;
}

<div></div>

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;，但是如果我们把它去掉，它也有同样的效果。

#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%;
}

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

在我个人看来，我喜欢有一个可见的过渡：

#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%;
}

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

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>