我正在制作一个位于推文(以及 Facebook 点赞)按钮顶部的
HTML:
CSS:
我不确定出了什么问题。看起来好像只要我鼠标悬停,它就会移动,但如果我再移动一像素,它就必须进行新的计算,这会导致闪烁。
div
。我希望当我悬停在 div
(按钮)上方时,它会向上移动,这样你就可以实际按下真正的推文按钮。我尝试了以下方法。HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
@-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
我不确定出了什么问题。看起来好像只要我鼠标悬停,它就会移动,但如果我再移动一像素,它就必须进行新的计算,这会导致闪烁。