使用css3怎么实现一个文本悬停改变效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html<h2 class="hover-tex
使用css3怎么实现一个文本悬停改变效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<h2 class="hover-text-3D" data-text="w3cbest.com">W3CBEST.COM</h2>
.hover-text-3d { font-size: 7em;}.hover-text-3d { position: absolute; top: 50%; left: 50%; -WEBkit-transfORM: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-text-fill-color: #fff; text-fill-color: #fff;}.hover-text-3d:before { position: absolute; overflow: hidden; width: 0; content: attr(data-text); -webkit-transition: 2s; -o-transition: 2s; transition: 2s; -webkit-text-fill-color: #aaf0d1; text-fill-color: #aaf0d1; -webkit-text-stroke-width: 2px; text-stroke-width: 2px; -webkit-text-stroke-color: #aaf0d1; text-stroke-color: #aaf0d1; -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8)); -o-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));}.hover-text-3d:hover:before { width: 100%;}
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网精选频道,感谢您对编程网的支持。
--结束END--
本文标题: 使用css3怎么实现一个文本悬停改变效果
本文链接: https://www.lsjlt.com/news/252570.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0