3D文本悬停改变效果

2024年4月8日 181次阅读 来源: w3cbest

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

查看效果

    原文作者：w3cbest
    原文地址: https://segmentfault.com/a/1190000017741685
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞