满天星

最新推荐文章于 2024-03-20 15:47:14 发布
最新推荐文章于 2024-03-20 15:47:14 发布
阅读量666 收藏 1
点赞数
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/50069277
版权 
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="js/jquery-2.1.4.js"></script>
		<title>满天星</title>
	</head>
	<style>
		html,body{
			margin:0;
			padding:0;
			width:100%;
			height:100%;	
			line-height:0;
			font-size:0;
		}
		svg{
			position: absolute;
			top:0;
			left: 50%;
			margin-left:-600px;
			background:#001122;	
		}
	</style>

	<body>

		<svg width="1200px" height="900px" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice">
			//星星的原形
			<defs>
				<polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"></polygon>
			</defs>
			<defs>
				<linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
					<stop offset="0" stop-color="#999"></stop>
					<stop offset="1" stop-color="#333"></stop>
				</linearGradient>
				<radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
					<stop offset="0" stop-color="rgba(255,255,255,0.8)"></stop>
					<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
				</radialGradient>
				<clipPath id="light-mask">//灯光裁切
					<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
						<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite">
						</animateTransform>
					</polygon>
					<circle cx="0" cy="0" r="1.5"></circle>
				</clipPath>
			</defs>

			<g id="real">
				<g id="star-group"></g>
				<g id="moon-group">
					<mask id="moon-mask">//月亮蒙版
						<circle cx="-250" cy="-150" r="100" fill="white"></circle>
						<circle cx="-200" cy="-200" r="100" fill="black"></circle>
					</mask>
					<circle cx="-250" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"></circle>
				</g>
				<g id="light-tower" transform="translate(250,0)" translate>

					<polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
					<ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-mask)"></ellipse>

				</g>
			</g>
			<g id="reflact" transform="translate(0,50)" mask="url(#fading)">
				<defs>
					<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
						<stop offset="0" stop-color="rgba(255,255,255,0.3)"></stop>
						<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
					</linearGradient>
					<mask id="fading">//渐变色蒙版
						<rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
					</mask>
				</defs>
				<use xlink:href="#real" transform="scale(1,-1) translate(0,-50)" />//引用use制作倒影

			</g>
			<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
		</svg>

		<script>
			$(function(){
				window.alert("hello world!")
			})
				var SVG_NS='http://www.w3.org/2000/svg';
				var XLINK_NS='http://www.w3.org/1999/xlink';
				var paper=document.querySelector('svg');
			
				renderStar();
			
				function use(origin){
					var _use=document.createElementNS(SVG_NS,'use');
					_use.setAttributeNS(XLINK_NS,'xlink:href','#'+ origin.id);
					return _use;
				}
			
				function random(min,max){
					return min+ (max-min)*Math.random();	
				}  
			
				function renderStar(){
					var starRef=document.getElementById('star');
					var starGroup=document.getElementById('star-group');
					var starCount=500;	   
					var star;
					while(starCount--){
						star=use(starRef);
						star.setAttribute('opacity',random(0.1,0.5));
						star.setAttribute('transform','translate('+random(-400,400)+','+random(-300,50)+')' + 'scale('+random(0.1,0.6)+')' );
						starGroup.appendChild(star);
					}
				}
		</script>

		<div style="border: 1px solid red;">
			<details>
			<summary>这是一个隐藏域</summary>
			<code>
				  标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用  标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括  标签中的 URL。
			</code>
			</details>
		</div>

	</body>

</html>

最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
matlab：绘制满天星图案
希望我的博客，能帮上你解决学习中工作中所遇到的问题
03-30 1089
matlab：绘制满天星图案
matlab代码
09-13
% ch2problem6main.m clear; R=100; L=2e-3; C=1e-7; % 设置电路元件的参数 ts=1e-6; t_start=-1e-4; t_end=16e-4; t=t_start:ts:t_end; % 设置求解的离散时间点序列 i_L0=0; u_C0=0; % 系统初始状态为零 x0=[i_L0;u_C0]; % 系统状态变量初始赋值 Ts=400e-6; % 矩形波周期 Hs=2.5; Ls=-2.50; tic [t_out, x_out]=ode45('ch2problem6statefun',t, x0,[],R,L,C,Ts,Hs,Ls); % 仿真计算 toc s_t_simu=x_out(:,2); % 矩形波仿真结果
全网最全系统学习爬虫教程，用爬虫进行数据分析（bs4,xpath,正则表达式)
m0_59164304的博客
05-25 2107
1.bs4解析基础 2.bs4案例 3.xpath解析基础 4.xpath解析案例-4k图片解析爬取 5.xpath解析案例-58二手房 6.xpath解析案例-爬取站长素材中免费简历模板 7.xpath解析案例-全国城市名称爬取 8.正则解析 9.正则解析-分页爬取 10.爬取图片 1.bs4解析基础 from bs4 import BeautifulSoup fp = open('第三章 数据分析/text.html','r',encoding='utf-8') soup = BeautifulSo
Java代码实现简单满天星
m0_56238560的博客
09-01 3904
Java代码实现简单满天星
MATLAB实例及自我思考（2）--漫天都是小星星
蓝天萝卜
04-08 2479
h=figure; set(h,'menu','none','numbertitle','off','name','stars',...     'color',[0 0 0]);%设置figure窗体属性 % set(h,'unit','normalized','position',[0.1 0.1 0.8 0.8]);%会产生整体移动的问题 set(h,'position',[20 5
易语言软件满天星效果制作教学
08-26
在本篇文章里我们给大家分享了关于易语言软件满天星效果制作教学内容，对此有兴趣的朋友们可以跟着学习参考下。
JavaScript满天星导航栏实现方法
10-18
本篇文章给大家分享了JavaScript满天星导航栏实现方法，以前也介绍过很多关于特效导航的制作方法，对此有兴趣的朋友参考学习下。
Jquery满天星闪烁动画代码
01-23
WEB 网页脚本代码Html--------------------------------------- Jquery满天星闪烁动画
java实现的满天星效果实例
09-04
主要介绍了java实现满天星效果的方法,涉及Java绘图的应用,非常具有实用价值,需要的朋友可以参考下
python绘制满天星小游戏源代码下载.zip
04-19
python绘制满天星小游戏源代码下载，用python 中pygame模块开发的小游戏。
Starfield:在 matlab 中轻松实现星空-matlab开发
06-01
这是显示星空的简单GUI。 它使用 pvector 根据星的 x 位置生成速度
数学建模速成！两小时零基础入门MATLAB教程（五）—— MATLAB二维绘图
qq_19300283的博客
06-28 1148
马上就是数学建模国赛了，新开了个坑做教程， 或者说是我学习过程中的笔记分享。可以保证零编程基础的小白认真的看两个小时就能入门。对于计算机专业或者有其他编程语言基础的同学， 也有专门的教程， 按照大家学习其他编程语言的思路来入门MATLAB，基本上看一下就可以上手编程了。...
C++彩色星空
m0_53061304的博客
04-27 1205
程序使用了 、 和 等标准头文件，以及一些宏定义。其中，MAXSTAR 宏定义了星星的总数，STAR 结构体定义了每个星星的属性，包括横坐标、纵坐标、速度和颜色。int x;int y;int speed;int color;100int x;int y;int speed;int color;
用python代码画出一片星空,用python绘制满天星代码
M3666789的博客
02-27 584
大家好，本文将围绕用python代码画出一片星空展开说明，用python绘制满天星代码是一个很多人都想弄明白的事情，想搞清楚python满天星的流程图需要先了解以下几个事情。大家好，给大家分享一下用python代码画出一片星空，很多人还不知道这一点。
用python代码画出一片星空,用python绘制满天星动态
最新发布
wangyanqin0227的博客
03-20 407
大家好，本文将围绕如何用python画不同大小的满天星星展开说明，用python代码画出一片星空是一个很多人都想弄明白的事情，想搞清楚用python绘制满天星动态需要先了解以下几个事情。大家好，本文将围绕如何用python画不同大小的满天星星展开说明，用python代码画出一片星空是一个很多人都想弄明白的事情，想搞清楚用python绘制满天星动态需要先了解以下几个事情。(2)、 共画 100 个五角星， 每个五角星在画布内显示位置是随机的， 五角星边长取[15,25](3) 五角星的颜色是随机的。
C++实现满天星效果静态图片
qq_56294106的博客
01-28 437
用编程C++实现随机生成不同效果的星星，实现看星星的效果图片，借助EasyX图形化工具!在vs2019中新建文件夹，并且注意在项目目录下保存两张小人的抬头观看背景的图片。
Python满天星
热门推荐
兔子王
03-15 5万+
Python满天星代码。
基于 Matlab模拟烟花满天飞附完整代码
matlab_dingdang的博客
03-03 1119
基于 Matlab模拟烟花满天飞​。
python 满天星
11-11
以下是一个Python实现的满天星的例子： ```python import turtle as tu import random as ra # 设置画布大小和背景颜色 tu.setup(1200, 800) tu.bgcolor('black') # 定义星星类 class Star(): def __init__(self): self.r = 1 # 星星的初始大小 self.x = ra.randint(-1000, 1000) # 星星在画布中的x坐标位置 self.y = ra.randint(-500, 500) # 星星在画布中的y坐标位置 self.c = ra.choice(['white', 'yellow', 'red', 'blue', 'green']) # 在星星的颜色列表中随机选择一个颜色 # 画星星 def star(self): tu.penup() tu.goto(self.x, self.y) tu.pendown() tu.color(self.c) tu.begin_fill() for i in range(5): tu.forward(25) tu.right(144) tu.end_fill() # 星星闪烁 def change(self): self.r += 0.1 if self.r >= 3: self.r = 1 self.c = ra.choice(['white', 'yellow', 'red', 'blue', 'green']) # 创建星星列表 Stars = [] for i in range(200): Stars.append(Star()) # 开始画星星 while True: tu.tracer(0) tu.clear() for i in range(100): Stars[i].star() Stars[i].change() tu.update() ``` 这个例子使用了turtle库来绘制星星，首先设置了画布的大小和背景颜色，然后定义了一个Star类，包含了星星的大小、位置和颜色等信息，以及画星星和星星闪烁的方法。接着创建了一个包含200个星星的列表，循环绘制星星并让它们闪烁。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值