Question

我一直在查看某些网站的代码，并注意到边距大小会根据某些操作（例如，鼠标悬停，屏幕宽度）而改变，以创建一个很酷的动态效果。更改屏幕宽度时可以看到此效果： http://www.smashbros.com/us/

这里鼠标悬停： http://www.disneyanimation.com/projects

我真的不知道这是怎么做到的！代码值如何根据某些操作自动更改。

提前致谢

编辑：

我试了一下......但它并没有真正给我我想要的结果

.cats {
background-color: #eee;
height: 90px;
width: 100%;
}

.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}

.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}

.cats :hover {
  /* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}

@-webkit-keyframes slide-up {
from {
    margin-top: 0px
}
to {
    margin-top: -15px
  }
}

Answer 1

你可以使用CSS hover选择器实现这个，按照@ David的回答：

https://stackoverflow.com/a/905042/3264286

此处有更多详情：

http://www.w3schools.com/cssref/sel_hover.asp

或者，如果您乐意使用JavaScript，则可以拥有更多功能。

http://www.w3schools.com/jsref/event_onmouseover.asp

更多讨论：

css hover vs. javascript mouseover

Answer 2

要逐步移动，您可以将过渡应用于div。例如转换：0.6s;

有关过渡属性的更多信息，请访问this link。

HTML / CSS - 使用“动态边距”（变量（？） - 我如何？

2 个答案: