HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、Java李楊勇公號作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】
🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
主要代碼實(shí)現(xiàn)：
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>源碼獲取
大家可以點(diǎn)贊、收藏、關(guān)注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！
打卡 文章 更新?46??/? 100天
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》
Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 终端命令运行php文件路径,PHP -S
- 下一篇： HTML+CSS+JS实现 ❤️Thre