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

这是你的想法吗？

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>

Answer 2

一些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>

CSS 的卷页效果

Page curl effect with CSS

html

css

page-curl

一些css诡计和魔法

过渡