Css3字型做出火焰效果的實現步驟

來源:互聯網
上載者:User
我們知道,CSS3是可以做出很多酷炫的動畫效果,那麼今天的教學就是如何用CSS3的字型樣式做出逼真的火焰特效文字,我們一起來看一下。

html:<body><p>火火火火</p></body>css:<style>body{ font-size:120px; font-family:'微軟雅黑'; background:#000; color:#fff;}@-webkit-keyframes test{0%{text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;}30%{text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;}60%{text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;}100%{text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;}}p{font-weight:bold; color:#fff;text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;animation:1s test linear infinite;}</style>


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

讓div寬度自適應教學

網頁的與DIV+CSS關係

網頁中使用h標籤的開發經驗

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.