PHP输出用于文本渐变或 "rainbow text"的html代码

Question

首先让我说我整天都在互联网上搜索解决方案，但我被难住了。我设法找到了足够多的代码片段，将我需要的“几乎”工作版本放在一起——但老实说，当涉及到如何让它工作时，我只是迷路了。

这是我正在尝试做的事情:

我正在尝试创建一个 php 函数，它将采用 2 种或 3 种颜色，并将它们作为平滑渐变应用于文本字符串。 我需要输出渐变的实际 HTML 代码的函数。我设想它的工作方式是:它将获取消息字符串并将其拆分为单个字符，然后以这样一种方式为每个字符着色，即当它与 html 输出一起显示时，它看起来像是从一种颜色平滑淡入淡出到下一个。现在，我正在使用刚刚在其中定义的 2 种颜色(FF0000 和 0000FF)测试该函数。我似乎无法让它为整个字符串着色。它似乎捕获了第一个字母，并进行了部分过渡，然后就停止了。

这是我试图让它看起来像的屏幕截图:

这是我的屏幕截图(为了解释起见，包括 html 输出)

这是我正在使用的代码:

<?php 
function html2rgb($color)
{
    if ($color[0] == '#')
        $color = substr($color, 1);

    if (strlen($color) == 6)
        list($r, $g, $b) = array($color[0].$color[1],
                                 $color[2].$color[3],
                                 $color[4].$color[5]);
    elseif (strlen($color) == 3)
        list($r, $g, $b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
    else
        return false;

    $r = hexdec($r); $g = hexdec($g); $b = hexdec($b);

    return array($r, $g, $b);
}
function rgb2html($r, $g=-1, $b=-1)
{
    if (is_array($r) && sizeof($r) == 3)
        list($r, $g, $b) = $r;

    $r = intval($r); $g = intval($g);
    $b = intval($b);

    $r = dechex($r<0?0:($r>255?255:$r));
    $g = dechex($g<0?0:($g>255?255:$g));
    $b = dechex($b<0?0:($b>255?255:$b));

    $color = (strlen($r) < 2?'0':'').$r;
    $color .= (strlen($g) < 2?'0':'').$g;
    $color .= (strlen($b) < 2?'0':'').$b;
    return '#'.$color;
}
    echo "<h1>Result:</h1>";
    $src_color = html2rgb('FF0000');
    $dst_color = html2rgb('0000FF');
    print_r($dst_color);

    for($i=0; $i<3; $i++)
        $step_color[$i] = ( $dst_color[$i] - $src_color[$i] ) / 30.30;
    // step_color array contains difference between adjacent color stripes

    $html_out = ''; // html code container

    for($j=0; $j<60; $j++)
    {
    // generate color stripe code

        $message = 'I am trying to make this text string fade from one color to another';
        $counter = strlen($message);
        $array = str_split($message);
        $mycount = 0;


        if($mycount < $counter){
            $line = '<b><font color=" '.rgb2html($src_color).';">'.$array[$mycount].'</font></b>';
        $html_out .= "{$line}"; // save color stripe to display HTML code later
        $mycount = $mycount + 1;
        }
        echo $line; // output color stripe to browser

        for($i=0; $i<1; $i++) // incrementing each color component
            $src_color[$i] += $step_color[$i];
    }

?>
<h1>HTML Code:</h1>
<pre><?php
// output HTML code replacing < and > with &lt; and &gt;
$stuff = strtr($html_out, array('&' => '&amp;',
                            '<' => '&lt;',
                            '>'=> '&gt;'));
echo $stuff;

我对这类事情还很陌生，所以如果我的代码“落后”或很差，请不要对我太残忍。谁能指出我正确的方向？我只是不知道如何让它做我想做的事。

非常感谢您花时间阅读本文，并感谢您提供任何建议!

编辑:底部屏幕截图的图像链接，使其更易于查看 http://i.stack.imgur.com/vsfdQ.jpg

更新——好的，我已经重写了大部分功能，并且几乎可以正常工作了。我现在遇到的问题是它一遍又一遍地重复整个字符串。它正在应用淡入淡出，但不是它应该的方式。我需要它在整个字符串中从一种颜色淡入另一种颜色。这是它现在正在做什么的新屏幕截图: 这是该链接，因此您可以更轻松地查看它: http://i.stack.imgur.com/X0Pmq.jpg

这是我正在使用的新代码:

<?php
function rgb($rgb) {
    $ret = '';
    foreach ($rgb as $x) {
        // Make sure the RGB values are 0-255...
        $x = max(0, min(255, $x));
        // create a 2 digit hex value for this color component...
        $ret .= ($x < 16 ? '0'.dechex($x) : dechex($x));
    }
    return '#'.$ret;
}

// Returns a fade of $from into $to by $amount ($from and $to are RGB arrays)...
function fade($from, $to, $amount) {
    $rgb = array();
    // Go through the RGB values and adjust the values by $amount...
    for ($i = 0; $i <= 2; $i++) {
        $rgb[$i] = (($to[$i] - $from[$i]) * $amount) + $from[$i];
    }
    return $rgb;
}
$string = 'testing out the fade function here';
//$string1 = strlen($string);
for ($j = 0; $j < 1; $j += .01) {
    $color = rgb(fade(array(255,0,0), array(0,255,0), $j));

    for($i=0;$i<strlen($string);$i++){
echo "<font style='color:$color'>$string[$i]</font>";
}

}

有谁能告诉我如何让它只打印一次字符串，并将淡入淡出正确应用于字符串？

非常感谢大家抽出宝贵的时间和专业知识!

Answer 1

检查第二个示例，因为它更符合您的要求。

只需使用 php 添加 html 元素及其 id 或类，然后使用 css 提供渐变。

例子:

#id_of_element {      /*or class of element*/
    background: -webkit-linear-gradient(left, red , blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* the following would cover other browsers...not sure about IE */
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , blue); /* Standard syntax */
    /* then just add the -o- or -moz- etc. */
}

取决于你想要渐变的角度或方向 -> 只需使用 php(和/或 javascript)来改变 background 的值:-webkit-linear-gradient(direction, color1 , color2) ;

以下是代码示例

以下面的代码为例:

然后，在网络浏览器中打开页面。它应该有从黑色到白色的文本。

将此附加到 url 之后:

?color1=FFFFFF&color2=000000

所以完整的 url 应该是这样的:

http://yoursite.com/pageName.php?color1=FFFFFF&color2=000000

现在梯度被反转了。因为 color1 最初是从 #000000 开始的，但是 php 因为它从 GET 请求中获得的值而改变了它。

这是代码示例:

<?php 
    $textOutput = '';
?>
<?php if(isset($_GET['color1']) && isset($_GET['color2'])):
    $textOutput = '';
    $userFirstInput  = $_GET['color1'];  // these are the posts or gets you send from your form
    $userSecondInput = $_GET['color2']; // these are the posts or gets you send from your form

    $firstColor = $userFirstInput;    // #FFFFFF for example
    $secondColor = $userSecondInput;  // #000000 for example

    $textOutput .= '.spans{';
    $textOutput .= 'background: -webkit-linear-gradient(left, #'. $firstColor . ', #'.$secondColor .');';
    $textOutput .= '-webkit-background-clip: text;';
    $textOutput .= '-webkit-text-fill-color: transparent;';
?>
<?php else:
    $textOutput = '';
    $textOutput .= '.spans{';
    $textOutput .= 'background: -webkit-linear-gradient(left, #000000 , #FFFFFF);';
    $textOutput .= '-webkit-background-clip: text;';
    $textOutput .= '-webkit-text-fill-color: transparent;';
?>
<?php endif ?>
<!DOCTYPE html>
<html>
<head>
<style>
    <?php echo $textOutput; ?>
</style>
<span class="spans">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</span>
</body>
</html>

如果您在获取用户输入方面需要帮助，我也可以提供帮助。我使用 ajax 发送帖子或启动 PHP 并检查/清理输入。