Question

假设我有这样的文字： “Lorem ipsum”;

我知道如何使整个文字颜色发生变化，但我怎样才能从左到右或从右到左逐渐变化？

谢谢！

Answer 1

SELECT * FROM `core_config_data` WHERE `path` LIKE '%merge%'

https://jsfiddle.net/t3wdgw30/

Answer 2

尝试background-clip

body{text-align:center}

h1{
  font-size: 60pt;
  background-repeat: repeat-x;
  background-size: 8ch 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #57365a 0ch, Yellow 1ch, Indigo 1ch, Indigo 2ch, Blue 2ch, #2f732e 3ch, Orange 3ch, Orange 4ch, Violet 4ch, Violet 5ch, Green 5ch, Green 6ch, #5b2979 6ch, Red 7ch);
}

<h1>background-clip</h1>

Answer 3

您可以使用线性渐变和背景剪辑属性，

检查updated fiddle with animation here

根据您的要求更改动画时间和背景尺寸。

<强> HTML

<h1>Rainbow</h1>

<强> CSS

h1 {
    display:inline-block;
    font-size: 72px;
    /* Here you can change angle of gardient also as 45deg here */
    background: linear-gradient(45deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8B00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size:100%;
}

CSS用于动画gardient

h1 {
    display:inline-block;
    font-size: 72px;
    background: linear-gradient(45deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8B00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 400%;

    -webkit-animation: rainbowanim 10s ease infinite;
       -moz-animation: rainbowanim 10s ease infinite;
            animation: rainbowanim 10s ease infinite;
}

@-webkit-keyframes rainbowanim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes rainbowanim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes rainbowanim { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

如何在文本上创建彩虹效果？

3 个答案: