當(dāng)前位置：
首頁 >
svg制作动态闪光文字
發(fā)布時間：2023/12/20
50
豆豆
生活随笔
收集整理的這篇文章主要介紹了
svg制作动态闪光文字
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>text {font-size: 50px;stroke: red;stroke-width: 2;stroke-dasharray: 0;}.text1 {stroke: yellow;animation: text1 10s infinite;}.text2 {stroke: blue;animation: text2 10s infinite;}.text3 {stroke: #CD7F32 ;animation: text3 10s infinite;}@keyframes text1 {0%,100% {stroke-dasharray: 20;}50% {stroke-dasharray: 250;}}@keyframes text2 {0%,100% {stroke-dasharray: 233;}50% {stroke-dasharray: 20;}}@keyframes text3 {0%,100% {stroke-dasharray: 188;}50% {stroke-dasharray: 10;}}</style> </head> <body><svg width="400" height="150"><g><text x="160" y="75">我愛擼碼</text><text class="text1" x="160" y="75">我愛擼碼</text><text class="text2" x="160" y="75">我愛擼碼</text><text class="text3" x="160" y="75">我愛擼碼</text></g></svg> </body> </html>效果：
總結(jié)
以上是生活随笔為你收集整理的svg制作动态闪光文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 泛微OA-测试机更改sysadmin密码
- 下一篇： 吉林大学计算机科学与技术学院校训,各大学