text-stroke实现文字描边(镂空)text-fill-color实现文字填充&渐变(+animation实现流光字体)
Posted daobanan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text-stroke实现文字描边(镂空)text-fill-color实现文字填充&渐变(+animation实现流光字体)相关的知识,希望对你有一定的参考价值。
text-stroke:<‘ text-stroke-width ‘> || <‘ text-stroke-color ‘>(text-stroke-width:设置或检索对象中的文字的描边厚度、text-stroke-color:设置或检索对象中的文字的描边颜色)
<h2 id="demo">这是描了1像素的文字</h2>
#demo{ color:#555; -webkit-text-stroke:1px #f00; -webkit-animation:cliptext 7.5s linear infinite; } @-webkit-keyframes cliptext{ 0%{-webkit-text-stroke:1px #c00;} 25%{-webkit-text-stroke:1px #ff0;} 50%{-webkit-text-stroke:1px #090;} 75%{-webkit-text-stroke:1px #00f;} 100%{-webkit-text-stroke:1px #93c;} }
text-fill-color:<color>(<color>:指定文字的填充颜色。)
<div class="masked">这是一段渐变(流光)文字</div>
.masked{ background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 3s infinite linear; } @-webkit-keyframes masked-animation { 0% { background-position: 0 0;} 100% { background-position: -100% 0;} }
目前仅webkit核心的浏览器下支持此属性
以上是关于text-stroke实现文字描边(镂空)text-fill-color实现文字填充&渐变(+animation实现流光字体)的主要内容,如果未能解决你的问题,请参考以下文章