欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间：2025/3/12 HTML 29 豆豆
生活随笔 收集整理的这篇文章主要介绍了 HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️ 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

🍅 作者主页：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>

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~！

打卡 文章 更新 46  /  100天

精彩推荐更新中：

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

总结

以上是生活随笔为你收集整理的HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。