让我先说,我已经搜索了一整天的互联网寻找解决方案,我只是难住了。我设法找到了足够多的代码片段,将我所需要的“几乎”工作的版本组合在一起——但说实话,我只是在如何使它工作时迷失了方向。
我要做的是:
我正在尝试制作一个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 < and >
$stuff = strtr($html_out, array('&' => '&',
'<' => '<',
'>'=> '>'));
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并检查/清理输入。