使用css3怎么实现一个文本悬停改变效果

使用css3怎么实现一个文本悬停改变效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

html

<h2 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h2>

css

.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%;}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。