gzwnzss888 發表於 2022-10-3 12:03:07

html文字扫光特效

HTML内：<br /><ol><li>&lt;div class=&quot;music-title&quot;&gt;你的文字内容&lt;/div&gt;</ol>CSS：<br /><ol><li>&lt;style scoped&gt;<br /><li>&nbsp; &nbsp; .music-title{<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;color: #040404;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background-image: -webkit-linear-gradient(left,<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;#FEFDFC,<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;#070707 25%,<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;#070707 50%,<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;#070707 75%,<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;#070707 100%);<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-webkit-text-fill-color: transparent;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-webkit-background-clip: text;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-webkit-background-size: 150% 100%;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-webkit-animation: masked-animation 5s infinite linear;<br /><li>&nbsp; &nbsp; }<br /><li> <br /><li>&nbsp; &nbsp; @-webkit-keyframes masked-animation {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;0% {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;background-position: 0 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;100% {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;background-position: -100% 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br /><li>&nbsp; &nbsp; }<br /><li>&lt;/style&gt;</ol><br /><br />HTML<em>, </em>html<em>, </em>文字<em>, </em>扫光<em>, </em>特效
頁: [1]
查看完整版本: html文字扫光特效