当前位置:   article > 正文

HTML动态彩虹字

HTML动态彩虹字

效果:

HTML: 

<div class="this-div">Elegant and Beautiful</div>

CSS:

  1. .this-div{
  2. background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  3. -webkit-text-fill-color: transparent;
  4. -webkit-background-clip: text;
  5. -webkit-background-size: 200% 100%;
  6. -webkit-animation: maskedAnimation 4s infinite linear;
  7. font-size: 18px;
  8. }
  9. @keyframes maskedAnimation {
  10. 0% {
  11. background-position: 0 0;
  12. }
  13. 100% {
  14. background-position: -100% 0;
  15. }
  16. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/120244
推荐阅读
相关标签
  

闽ICP备14008679号