我們知道,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標籤的開發經驗