css3实现3D文本悬停改变效果的示例代码
发布时间:2019-01-16 15:50:58 作者:w3cbest 我要评论
这篇文章主要介绍了css3实现3D文本悬停改变效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文介绍了css3实现3D文本悬停改变效果的示例代码,分享给大家,具体如下:
html
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .hover-text -3 d { font-size : 7em ; } .hover-text -3 d { 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 -3 d:before { position : absolute ; overflow : hidden ; width : 0 ; content : attr (data-text); -webkit-transition: 2 s; -o-transition: 2 s; transition: 2 s; -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 -3 d:hover:before { width : 100% ; } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了使用纯CSS3实现的文本3D效果,且有效果图,需要的朋友可以参考下2014-09-03
最新评论