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

前端  /  管理员 发布于 7年前   217

本文介绍了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%;}

查看效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。