HTML5的canvas雪花飘落特效

最新推荐文章于 2023-12-05 10:49:29 发布

终身成长型

最新推荐文章于 2023-12-05 10:49:29 发布

阅读量835

点赞数

分类专栏：前端开发文章标签： html5 chrome css

本文链接：https://blog.csdn.net/weixin_45675581/article/details/122917270

版权

HTML5的canvas雪花飘落特效
一、html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雪花飘落</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

<script src="https://xuexiluxian.cn/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://xuexiluxian.cn/js/jquery.let_it_snow.js"></script>
<script src='https://xuexiluxian.cn/js/jqone.js'></script>
</head>
<body>
	<canvas width="100%" height="100%" class="flare"></canvas>
	<canvas width="100%" height="100%" class="snow"></canvas>
	<canvas width="100%" height="100%" class='flake'></canvas>
	<div style="text-align: center;"></div>
</body>
</html>

二、css代码

@charset "utf-8";
html{height:100%;}
body{
	background:#090b44; /* Old browsers */
	background:-moz-radial-gradient(center, ellipse cover, #090b44 0%, #00001c 100%); /* FF3.6+ */
	background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#090b44), color-stop(100%,#00001c)); /* Chrome,Safari4+ */
	background:-webkit-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); /* Chrome10+,Safari5.1+ */
	background:-o-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); /* Opera 12+ */
	background:-ms-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); /* IE10+ */
/* 	background:radial

最低0.47元/天解锁文章

终身成长型

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5的canvas雪花飘落特效

HTML5的canvas雪花飘落特效一、html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" co
复制链接

扫一扫