Question

当您向下滚动页面时，我想创建一个具有大量悬停效果或效果的网站。就像您查看此页面一样：http://eacykler.dk/ - 然后将鼠标悬停在页面上的某些图片上。我拒绝相信，有人坐着编码那个javascript，一点一滴。所以我想知道是否存在一些库/框架/收集/我不知道它应该被称为什么，这使得在HTML / CSS中实现动态效果变得容易。我想象过这样的事情：

静态版本：

<div>
<a href="#">
<img src="/foo/bar.jpg" />
</a>
</div>

DYNAMIC VERSION：

<div class="bg-fades-to-black-in-10-sec">
<a href="#" class="font-color-fades-to-white-in-10-sec">
<img src="/foo/bar.jpg" class="spins-30-degrees-and-zooms-20-percent-in-10-sec" />
</a>
</div>

...我希望类名说明，不同的元素应该做什么。因此，我不应该编写Javascript，而应该只查找这个给定的库/框架/收集/我不知道它应该被称为提供给我的不同函数/选项，然后插入这些类名来获取元素。

它存在吗？如果没有 - 那么我如何以最快和最简单的方式实现这些效果呢？

Answer 1

这可以使用CSS转换完成所有操作：

.spins-30-degrees-and-zooms-20-percent-in-10-sec {
    width:100px;
    transform:rotate(0deg);
    transition: all 10s;
}
.spins-30-degrees-and-zooms-20-percent-in-10-sec:hover {
    width:120px;
    transform:rotate(30deg);
}

.font-color-fades-to-white-in-10-sec {
    color:#000;
    transition: all 10s;
}
.font-color-fades-to-white-in-10-sec:hover {
    color:#fff;
}

在此处查看工作小提琴：http://jsfiddle.net/pjdz9ohw/1/

Javascript框架可以轻松地向网站添加动态/悬停效果

1 个答案: