css3实现3D文本悬停改变效果的示例代码

2024-07-11 08:31:29

字体：大中小

来源：转载

供稿：网友

本文介绍了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改变浏览器滚动条样式

下一篇：css的content属性的具体使用