我试图在鼠标悬停时为按钮提供“按下”动画,并在用户单击时为按钮提供另一个较小的按下动画。我目前有动画工作,但是当鼠标悬停在一个按钮上时,所有按钮都会动画。我尝试单独定位每个按钮,但没有成功。
我还想为每个按钮设置一个宽度和高度,以便它们的大小都相同。我试过设置宽度并弄乱了显示 CSS 元素,但没有取得任何成功。我也无法让 ISSUU 嵌入显示出来,所以如果对此也有任何建议或建议,那就太棒了(预编辑:看起来它出现在 JSFiddle 中,尽管不正确,以及按钮。这是它的样子 on my browser )。
我的 JSFiddle:https://jsfiddle.net/ewrcxrrp/
HTML:
<div id="cookbook">
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Order the lemonade cookbook</h1>
</div>
</div>
<div class="row">
<div class="six columns">
<div data-configid="0/5714789" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
</div>
<div class="six columns">
<p>"As a chef, I have a very high bar that has to be met for me to enjoy other people’s food. Alan Jackson’s lemonade has more than exceeded that bar."</p>
<p1>- MICHAEL CHIARELLO, OWNER OF THE CRITICALLY ACCLAIMED BOTTEGA</p1>
<h2>get your copy:</h2>
<button type="submit" class="button-primary">Amazon</button>
<button type="submit" class="button-primary">Barnes & Noble</button>
<button type="submit" class="button-primary">Indie Bound</button>
<button type="submit" class="button-primary">Powell's Books</button>
<button type="submit" class="button-primary">Books-a-Million</button>
<button type="submit" class="button-primary">Overstock</button>
</div>
</div>
</div>
</div>
CSS:
#cookbook{
background-image: url(http://i.lmnd3.com/images/LemonadeBkg_Broc.jpg);
position: float;
min-height: 800px;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
#cookbook .issuuembed {
width: 525px;
height: 340px;
margin: 0 auto;
display: block;
}
#cookbook h1{
font-size: 4rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
text-transform: uppercase;
text-align: center;
margin-top: 10rem;
}
#cookbook p{
font-size: 2rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-style: italic;
font-weight: 700;
margin-bottom: 1rem;
}
#cookbook p1{
font-size: 2rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-weight: 400;
}
#cookbook h2{
margin-top: 1.5rem;
font-size: 4rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-weight: 700;
text-transform: uppercase;
}
#cookbook button{
border-radius: 4px;
font-size: 16px;
background-color: #E4572E;
border-color: #E4572E;
-moz-box-shadow: 0px 2px 0px 0px #888888;
-webkit-box-shadow: 0px 2px 0px 0px #888888;
box-shadow: 0px 2px 0px 0px #888888;
}
#cookbook button:hover{
margin-top: 1px;
-moz-box-shadow: 0px .5px 0px 0px #888888;
-webkit-box-shadow: 0px .5px 0px 0px #888888;
box-shadow: 0px .5px 0px 0px #888888;
}
#cookbook button:active{
margin-top: 2px;
-moz-box-shadow: 0px 0px 0px 0px #888888;
-webkit-box-shadow: 0px 0px 0px 0px #888888;
box-shadow: 0px 0px 0px 0px #888888;
}
非常感谢任何帮助或指导!
祝一切顺利-
最佳答案
除了 Mohamed 刚刚写的内容之外,CSS 还有一个问题 - 当鼠标悬停在按钮上时,您将顶部边距 1px 添加到按钮,结果所有按钮都被迫向下 1px 并且看起来是动画的。将按钮悬停 CSS 更改为此
#cookbook button:hover {
margin-top: 1px;
margin-bottom: 9px;
-moz-box-shadow: 0px .5px 0px 0px #888888;
-webkit-box-shadow: 0px .5px 0px 0px #888888;
box-shadow: 0px .5px 0px 0px #888888;
}
添加 margin-bottom: 9px;
以补偿悬停按钮上 1px 的顶部边距。
同时添加一个类似的 margin-bottom: 8px;
到 :active 状态,以防止以下所有按钮在您单击一个按钮时移动:
#cookbook button:active {
margin-top: 2px;
margin-bottom: 8px;
-moz-box-shadow: 0px 0px 0px 0px #888888;
-webkit-box-shadow: 0px 0px 0px 0px #888888;
box-shadow: 0px 0px 0px 0px #888888;
}
关于javascript - 放置在网格中的动画按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31927678/