大佬教程收集整理的这篇文章主要介绍了使用CSS Transition动画边距和填充会导致跳动动画,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
相关标记:
<nav> <a class="email" href="mailto:notmyrealemailaddress"> <div class="icon-border"> <img src="images/mail_icon.png" width="14" height="12"> </div>Email Me</a> <a class="phone" href="tel:4075555555"> <div class="icon-border"> <img src="images/phone_icon.png" width="11" height="18"> </div>Call Me</a> <a class="behance" href="http://behance.net/dAnnymcgee" target="_blank"> <div class="icon-border"> <img src="images/behance_icon.png" width="21" height="13"> </div>See My Work</a> </nav>
CSS:
header nav .icon-border { display: inline-block; border: 2px solid #000; border-radius: 30px; padding: 5px; margin: 0 10px; transition: 0.15s padding ease-out,0.15s margin ease-out,0.15s border ease-out; } header nav a:hover .icon-border { padding: 10px; margin: -10px 5px; border: 2px solid #ddd; transition: 0.15s padding ease-out,0.15s border ease-out; }
看看它在做什么?通过减少边距并增加悬停时的填充,圆形边框有效地变大,而不会改变它缠绕的图像的位置.
它工作得很好,但问题是,如果我快速将鼠标从EMAIL ME移动到CALL ME,反之亦然,在第一个动画完成之前,整个导航“上下”大约一个像素.但是,这个问题在CALL ME和SEE MY WORK之间不会发生,这让我相信这是一个可以解决的问题.有任何想法吗?
更平滑的解决方案可能是使用transform:scale(X)
喜欢:
header nav .icon-border { display: inline-block; border: 2px solid #000; border-radius: 30px; padding: 5px; margin: 0 10px; transform: scale(1); /* you need a scale here to allow it to transition in both directions */ transition: 0.15s all ease; } header nav a:hover .icon-border { transform: scale(1.2); border: 2px solid #ddd; }
以上是大佬教程为你收集整理的使用CSS Transition动画边距和填充会导致跳动动画全部内容,希望文章能够帮你解决使用CSS Transition动画边距和填充会导致跳动动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。