CSS currentColor 变量的使用
与CSS动画结合
当与CSS animation
结合,可以得到更加有创意的效果,比如这个来自codepen的示例
CSS
html { color: red; animation: color 30s linear infinite; } @keyframes color { 33.3% { color: #0f0; } 66.7% { color: #00f; } } body { font-family: sans-serif; margin: 2em; border-top: 2px solid; position: relative; padding: 1em; } body:before { content: ""; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; opacity: .1; background-color: currentColor; background-image: linear-gradient(to bottom, currentColor, #fff); } p, h1 { color: black; margin-top: 0; } button { color: inherit; display: block; text-decoration: none; padding: .5em 1em; background: white; border: 2px solid; margin: 0 auto; border-radius: .5em; box-shadow: 2px 2px; font-weight: bold; }
<h1>Using currentColor for fun and profit</h1> <p>In pure CSS you can use <code>currentColor</code> wherever you migth use a normal color value. This maps to whatever the current value of color is.</p> <p>Go ahead, stick <code>currentColor</code> in gradients and backgrounds. It’s already the default for text, borders, and drop shadows so you don’t even need to define current color there.</p> <button>Foobar</button>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。