这篇文章主要介绍了关于如何使用CSS实现一个按钮文字滑动的特效 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下源代码下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects
定义 dom,在一个容器中定义按钮的文字,每个字母一个 span,每个 span 有一个 data-text 属性,其值与 span 内的字母相同:
<p class="box"> <span data-text="B">B</span> <span data-text="U">U</span> <span data-text="T">T</span> <span data-text="T">T</span> <span data-text="O">O</span> <span data-text="N">N</span> </p>
按钮居中:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
设置按钮的尺寸和文字样式:
.box { width: 200px; height: 60px; border: 2px solid black; text-align: center; font-size: 30px; line-height: 60px; font-family: sans-serif; }
按钮的每个字母都设置为行内块元素,以便单独设置动效:
.box span { display: inline-block; color: blue; }
把字母交错地显示在按钮容器之外,第奇数个元素显示在上,第偶数个元素显示在下:
.box span:nth-child(odd) { transform: translateY(-100%); } .box span:nth-child(even) { transform: translateY(100%); }
用伪元素为每个字母增加一个副本:
.box span::before { content: attr(data-text); position: absolute; color: red; }
让伪元素的字母也交错显示,位置与其原始元素相对:
.box span:nth-child(odd)::before { transform: translateY(100%); } .box span:nth-child(even)::before { transform: translateY(-100%); }
为按钮增加鼠标划过样式,设置緩动时间,使其有动画效果:
.box:hover span { transform: translateY(0); } .box span { transition: 0.5s; }
最后,隐藏容器外的内容:
.box { overflow: hidden; }
大功告成!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是如何使用CSS实现一个按钮文字滑动的效果的详细内容。更多信息请关注PHP中文网其他相关文章!