HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️

原创

java李杨勇 2022-02-17 17:45:23 ©著作权

文章标签 css html5 3D文字动画特效前端大作业 html 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者java李杨勇的原创作品，请联系作者获取转载授权，否则将追究法律责任

???? 作者主页：Java李杨勇
???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
???? 欢迎点赞 ???? 收藏 ⭐留言 ????

效果演示： 文末获取源码

主要代码实现：

CSS样式：

@import url('https://fonts.googleapis.com/css2?family=Averia+Sans+Libre:wght@700&display=swap');
body {
    margin: 0;
    padding: 0;
    background: #131417;
    font-family: 'Averia Sans Libre', Arial, sans-serif;
    overflow: hidden;
}

.content {
    height: 100vh;
    width: 100vw;
    background: radial-gradient(#673ab7 15%, #000000 100%);
    text-align: center;
    padding: 15vh;
    box-sizing: border-box;
}

.thanks,
.followers {
    font-size: 12vmin;
    color: #673ab799;
    text-align: center;
    text-shadow: -0.25vmin 0.25vmin 0vmin #00000026;
    position: absolute;
    width: 100%;
    left: 0;
}

.thanks {
    animation: go-down 1s ease 0s 1;
    top: 15vh;
}

.followers {
    bottom: 15vh;
    animation: go-up 2s ease 0s 1;
    text-shadow: -0.25vmin -0.25vmin 0vmin #00000026;
}

.number {
    color: #ffffff;
    font-size: 40vmin;
    font-weight: bold;
    line-height: 33vmin;
    text-shadow: 0vmin 1vmin 0vmin #b5b5b5, -1vmin 2vmin 0 #333, 1vmin 2vmin 0 #333, -1vmin 2.5vmin 0 #333, 1vmin 2.5vmin 0 #333, 0.4vmin 2.55vmin 0 #333, -0.25vmin 2.55vmin 0 #333, -1vmin 3.55vmin 0 #222, -0.25vmin 3.55vmin 0 #222, 0.25vmin 3.55vmin 0 #222, 0.75vmin 3.55vmin 0 #222;
    animation: go-front 2s linear 0s 1;
    width: 100%;
    position: absolute;
    left: 0;
    top: calc(50% - 20vmin);
}

@keyframes go-down {
    0% {
        top: -100vh;
    }
    100% {
        top: 15vh;
    }
}

@keyframes go-up {
    0% {
        bottom: -100vh;
    }
    66% {
        bottom: -100vh;
    }
    100% {
        bottom: 15vh;
    }
}

@keyframes go-front {
    0% {
        top: -100vh;
    }
    33% {
        top: -100vh;
    }
    66% {
        top: calc(50% - 20vmin);
    }
    68% {
        top: calc(50% - 22vmin);
    }
    70% {
        top: calc(50% - 20.5vmin);
    }
    72% {
        top: calc(50% - 21.25vmin);
    }
    73% {
        top: calc(50% - 20vmin);
    }
    100% {
        top: calc(50% - 20vmin);
    }
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Thank You 200 Followers - 3D Text Experiment</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="content">
        <div class="thanks">THANK YOU</div>
        <div class="number">200</div>
        <div class="followers">FOLLOWERS</div>
    </div>

</body>

</html>