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

本文介绍了css3实现3D文本悬停 改变 效果的示例代码，分享给大家，具体如下：

ht ML

< h1  class="hover -t ext-3d" data-text="w3cbest .COM ">W3CBEST.COM</h1>

css

.hover-text-3d {
    font- Size:  7em;
}
.hover-text-3d {
    pos IT ion: 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 -s troke-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文本悬停改变效果的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css3实现3D文本悬停改变效果的示例代码的详细内容...