又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。
本文介绍了css3实现3D文本悬停改变效果的示例代码，分享给大家，具体如下：
html
<h1 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1>
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%;
}
查看效果
到此这篇关于css3如何实现3D文本悬停改变效果的示例代码就介绍到这了。好心不一定会换来感恩，但千万不要因此而灰心。更多相关css3如何实现3D文本悬停改变效果的示例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
