SVG应用:渐变效果[火焰及森林]

SVG应用:渐变效果【火焰以及森林树木效果】。

渐变是颜色的平滑转换,我们可以通过渐变转换将一种颜色转换为另一种颜色。

看个简单的火焰效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SVG应用:渐变效果【火焰以及森林树木效果】</title>
</head>
<body>
	<iframe scrolling="no" class="result" src="/demo/svg/src/gradients/index.html" height="560px" width="600px"></iframe>
</body>
</html>

带有树动画的渐变:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SVG应用:渐变效果【火焰以及森林树木效果】</title>
</head>
<body>
	<iframe scrolling="no" class="result" src="/demo/svg/src/gradients/index2.html" height="560px" width="600px"></iframe>
</body>
</html>

山峰动画:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SVG应用:渐变效果【火焰以及森林树木效果】</title>
</head>
<body>
	<iframe scrolling="no" class="result" src="/demo/svg/src/gradients/index3.html" height="560px" width="600px"></iframe>
</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/svgtag/1481.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月8日 下午4:24
下一篇 2021年1月8日 下午5:11

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注