火红的标题

Опубликовано 2019-03-27 автором stariс

尊敬的网站管理员您好！

在纯JavaScript上为您的网站另一个伟大的装饰.

Пылающий заголовок

我在评论中指出的可用脚本设置。

HTML



<div class="flame" id="fire">Пылающий заголовок</div>

CSS



.flame {

	font-size: 30px;

	padding: 20px 0 10px 20px;

	width: 350px;

	font-weight: bold;

	background: scroll 0% 0% rgb(0, 0, 0);

	color: rgb(50, 50, 50);

	text-shadow: -1px 2px rgb(255, 255, 0),

			2px -3px 3px rgb(255, 204, 0),

			2px -5px 6px rgb(255, 153, 0),

			-3px -7px 8px rgb(255, 102, 0),

			1px -15px 30px rgb(255, 51, 0),

			3px -30px 55px rgb(255, 0, 0);

Javascript



<script>

var lever = false; // 拨动开关

var textBrightness = 80; // 文字亮度

var fireCount = 9;		// 火焰大小

var fireDelta = new Array();

var step = 10;			// 火焰大小

var angle = 0;			// 振动角度

var radius = 10;
function animate()

{

	fireDelta[fireCount - step] = Math.random() * 2 - 1;

	var e = document.getElementById("fire");

	var s = "";

	for (var i = 0; i < fireCount; i++)
	{
		if (s) s += ", ";

		s += Math.round(fireDelta[(i + fireCount - step) % fireCount] * i) + "px " + (-2 * i -1) + "px " + (2 + i) + "px ";

		s += "rgb(255, " + (255 - i * Math.floor(255 / (fireCount - 1))) + ", 0)";

	}

	e.style.textShadow = s;

	e.style.color = "rgb(" +

		(textBrightness + step % 2) + ", " +

		textBrightness + ", " +

		textBrightness + ")";

	step = (step + 1) % fireCount;

	angle -= 0.8;
	if (angle <= 0) angle = Math.PI * 2;
	var e = document.getElementById("rgb");

	var s =	Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #0F0";

	e.style.textShadow = s;

	e.style.color = "rgb(" + (255 - step % 2) + ", 255, 255)";

}

function toggleAnimation() { for (var i = 0; i < fireCount; i++) fireDelta[i] = Math.random() * 2 - 1; if (lever) { window.clearInterval(lever); lever = false; } else lever = window.setInterval(function() { animate(); }, 100); return false; } toggleAnimation(); </script>

如果是一个页面，WordPress脚本和html直接安装在页面上。

如果是整个站点，那么在文件header.php或foonter.php /

CSS分别在style.css中。

祝你创造性的成功。

Запись опубликована в рубрике 免费网站脚本. Добавьте в закладки постоянную ссылку.

火红的标题

Добавить комментарий