HTML/CSS - 使用“动态边距”（变量（？） - 我该怎么做？[关闭]答案

【问题标题】：HTML/CSS - Using "dynamic margins" (variables(?) - How do I? [closed]HTML/CSS - 使用“动态边距”（变量（？） - 我该怎么做？[关闭]
【发布时间】：2015-01-29 00:28:29
【问题描述】：

我一直在查看一些网站的代码，并注意到边距大小会根据某些操作（例如，鼠标悬停、屏幕宽度）而变化，以创建很酷的动态效果。更改屏幕宽度时可以在此处看到此效果： 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
  }
}

【问题讨论】：

你需要自己动手；但首先尝试找到一些关于如何从 HTML 和 CSS 开始的教程。然后，一旦你开始，并开始理解选择器和伪类的语法，它就开始有意义了。并且变得可以理解，并且奇怪地引人注目和令人上瘾。
谢谢！我已经编码了一段时间，但从未真正探索过动画。我在编辑中尝试了一些东西......我在正确的轨道上吗？哈哈

标签： html css margins

【解决方案1】：

您可以按照@David 在此处的回答使用 CSS 悬停选择器来实现此目的：

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

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

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

更多讨论：

css hover vs. javascript mouseover

【讨论】：

感谢您的帮助！但是，我的问题更多是针对实现“移动效果”。例如： div:hover { margin-top: -20px;这将立即将 div 向上移动 20 px 我想要的是它逐渐移动
看看这个论坛的 JavaScript / jQuery 代码，它会按照你的意愿工作：https://forum.jquery.com/topic/jquery-animate-hover-function
@ArmanHaque：要逐渐移动，您可以将过渡应用到您的 div。例如过渡：0.6s;
@ArshadMuhammed。这正是我要找的东西！！！！！！！！！！！！谢谢！！！！！！！！！！！！！！！！！！！！！
@ArmanHaque：不客气 :) 我应该把它作为答案发布吗？

【解决方案2】：

要逐渐移动，您可以将 transition 应用到您的 div。例如transition: 0.6s;

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

【讨论】：