让我先说,我已经搜索了一整天的互联网寻找解决方案,我只是难住了。我设法找到了足够多的代码片段,将我所需要的“几乎”工作的版本组合在一起——但说实话,我只是在如何使它工作时迷失了方向。
我要做的是:
我正在尝试制作一个php函数,它将采用2或3种颜色,并将它们作为平滑渐变应用于文本字符串。我需要这个函数为渐变输出实际的HTML代码。我的设想是:它将接收消息字符串并将其拆分为各个字符,然后对每个字符进行着色,以便在html输出中显示时,从一种颜色到另一种颜色看起来像是平滑的淡入淡出。现在我正在测试这个函数,其中有两种颜色,我刚刚在里面定义过(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>";
}

}

有人能告诉我如何使它只打印一次字符串,并正确地应用淡入淡出到字符串上吗?
非常感谢你们所有的时间和专业知识!

最佳答案

检查第二个例子,因为它是你正在寻找的更多。
只需使用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);
下面是代码示例
请尝试下面的代码作为示例:
然后,在web浏览器中打开该页。它应该有从黑到白的文本。
将此附加到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并检查/清理输入。

10-05 21:01
查看更多