HTML动态彩虹字

效果:

HTML: 

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

CSS:

.this-div{
	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:  maskedAnimation 4s infinite linear;
    font-size: 18px;
}
 
@keyframes maskedAnimation {
	0% {
    background-position: 0 0;
	}
	100% {
	    background-position: -100% 0;
	}
}

相关推荐

  1. html--彩虹

    2024-02-19 17:36:01       42 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 17:36:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 17:36:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 17:36:01       82 阅读
  4. Python语言-面向对象

    2024-02-19 17:36:01       91 阅读

热门阅读

  1. Leetcode 357. Count Numbers with Unique Digits

    2024-02-19 17:36:01       53 阅读
  2. RabbitMQ:分布式系统中的高效消息队列

    2024-02-19 17:36:01       51 阅读
  3. 二级 C 语言笔试-15

    2024-02-19 17:36:01       38 阅读
  4. 【vue】组件通信方式介绍

    2024-02-19 17:36:01       52 阅读
  5. 从零实现softmax回归【基于Pytorch】

    2024-02-19 17:36:01       53 阅读
  6. 使用docker搭建php开发环境

    2024-02-19 17:36:01       65 阅读
  7. 怎么测试阿里云香港服务器是不是cn2?

    2024-02-19 17:36:01       55 阅读