Question

有谁知道如何在此页面上找到产品网格悬停的脚本或基本代码http://www.collectedmemories.com/cgi-bin/WebObjects/cmStore.woa/wa/catpage?catnum=11？

当然，我的风格会有所不同，但我想知道它是如何完成的。

Answer 1

滚动你自己，你甚至可以在现在用CSS3做动画效果而不用大惊小怪。这样的事情应该做：

.element {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px;
}

.box {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
}

.box:hover {
  transition: top 0.1s, left 0.1s, bottom 0.1s, right 0.1s ease-in;
  top: -50px; left: -50px;
  bottom: -50px; right: -50px;
}

示例：http://plnkr.co/edit/hxF0Bo34tjgCHJJvlIRL?p=preview

你必须做一些额外的工作才能使它成为你自己的，添加额外的功能以显示更多关于悬停等等。但它不应该是更多的工作。

产品网格悬停效果

1 个答案: