html5+css3动画实战教程之寻找北极星，附源码

要是在野外迷了路可千万别慌张，北极星会指引你方向。但事实上可不是每个都知道北极星的位置哦。

在本次教程里我们使用html5+css3 来完成一个寻找北极星的动画。

那么首先我们需要知道寻找北极星的办法:

在星汉灿烂的北方太空，有一个勺子一样的星座，由七颗较亮的星星组成我们正为北斗七星，也叫大熊座。它由天枢、天璇、天玑、天权、玉衡、开阳、摇光七颗星组成。

我们将七星相连组成一个勺子，然后将最后两颗星相连，然后把延长线外延5倍的距离，就会发现有一颗，最亮的星星，它就是北极星。

当然如果一个星座不好定位，别急还有我们的仙后座，他由五颗星组成一个W 型但这个字母随着季节的变化开口方向也会变化，不过他中间那颗星的五倍延长线的位置，也同样是指向北极星。好了，以后在野外再也不迷路了。

首先我们看下html：

	<body>
		<!--big-dipper -->
		<div class="big-dipper">
			<div class="one">
				<span></span>
			</div>
			<div class="tow">
				<span></span>
			</div>
			<div class="three">
				<span></span>
			</div>
			<div class="four">
				<span></span>
			</div>
			<div class="five">
				<span></span>
			</div>
			<div class="six">
				<span></span>
			</div>
			<div class="seven">
				<span></span>
			</div>
		</div>
		<!-- north-start -->
		<div id="north-start"></div>
		<!-- Cassiopeia -->
		<div class="cassiopeia">
			<div class="one">
				<span></span>
			</div>
			<div class="tow">
				<span></span>
			</div>
			<div class="three">
				<span></span>
				<span></span>
			</div>
			<div class="four">	
				<span></span>
			</div>
			<div class="five">			
			</div>
		</div>	
</body>

big-dipper：是北斗星

<div class="one">
				<span></span>
</div>

同样的方式建立了七颗星，里面的span标签就是线条。通过transform动画延迟宽度，实现连线效果。

通过角度旋转实现仙后座的转动，同时连线也是通过这样的方式调整角度。但要注意设置连线的旋转点。

transform: rotate(xxxdeg);
transform-origin:0% 0%;

限于篇幅最后附上北斗星的css样式代码：

.big-dipper div{
				position: absolute;
				width:10px;
				height:10px;
				background: #fff;
				border-radius: 50%;
				box-shadow:0px 0px 5px 3px cornflowerblue; 
			}
			.big-dipper .one{
				top:20px;		
			}
			.big-dipper .tow{
				top:32px;
				left:70px;
			}
			.big-dipper .three{
				top:70px;
				left:140px;
			}
			.big-dipper .four{
				top:95px;
				left:220px;
			}
			.big-dipper .five{
				top:160px;
				left:240px;
			}
			.big-dipper .six{
				top:160px;
				left:320px;
			}
			.big-dipper .seven{
				top:90px;
				left:350px;
			}
			.big-dipper span,.cassiopeia span{
				display: block;
				width:0px;		
				height:1px;
				position: absolute;
				top:50%;
				left:11px;
				background: #fff;
				box-shadow: 0 0 3px 1px #529DFF;
			}	
	
	.big-dipper .one span {		
		transform: rotate(10deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 1s linear forwards;
	}
	.big-dipper .tow span {		
		transform: rotate(28deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 1.8s linear forwards;
	}
	.big-dipper .three span {		
		transform: rotate(20deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 2.6s linear forwards;
	}
	.big-dipper .four span {
		top:100%;
		transform: rotate(75deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 3.4s linear forwards;
	}
	.big-dipper .five span {
		transform: rotate(0deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 4.2s linear forwards;
	}
	.big-dipper .six span {
		left:7px;
		top:-1px;
		transform: rotate(-66deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 5s linear forwards;
	}
	.big-dipper .seven span {
		left:7px;
		top:-1px;
		width:1px;
		background: none;
		transform: rotate(-66deg);
		transform-origin:0% 0%;
		animation: enttxt_effect2 .8s 5.8s linear forwards;
	}	
	@keyframes enttxt_effect {
		0% {
			 width:0px;
		}
	
		100% {
			width:70px;
		}
	}
	@keyframes enttxt_effect2 {
		0% {
			 width:0px;
		}
	
		100% {
			width:350px;
		}
	}

感兴趣的同学可以加关注，私信源码

eduza是简约时尚和现代的博客HTML模板，带商店电商元素的博客页面。考虑所有的作品集网站需求页可以设计一个旅游网站。原生响应设计HTML5和CSS3(台式机、平板电脑、手机…)简单,干净的和专业的网站模板。
> 搜索模式
> 菜单汉堡
> 滑块
> html 5和CSS 3
> 干净、创意、现代和美丽的设计
> 充分响应,兼容所有的屏幕大小
> 组织良好的文件
> 良好的注释代码
> 容易定制
> 主流浏览器兼容性
> 良好的文档记录
> W3C有效标记

不多说，直接上图！

1.AnywhereAnything

http://lackar.com/aa/

AnywhereAnything

AnywhereAnything—单页式全能搜索引擎，是一款以html5进行开发的单页网址导航源码。是把 webOS 的 Just Type 搬上 web 而做的，并进行了本地化,现在仍在不断添砖加瓦。

2.电影导航

http://www.dydh.org/

电影导航

电影导航网，是国内专业的电影网址导航网站。人工整理优秀的在线电影网站大全、电影网站排行榜和电影下载网站大全,为大家在线看电影和下载电影提供便利.

3.萌导航

http://www.moe123.net/

萌导航

萌导航，是富有二次元的导航网站。及时收录动漫网站及资讯、宅网站、萌网站、动画、漫画、游戏等内容。由于本人喜欢动漫，这个网站我很喜欢。如果不喜欢，就不要勉强。

4.比格张

https://bigezhang.com/

比格张

比格张，是一个发现优秀网站资源的分享平台。每天推荐一些国内外更多优秀且高质量的设计、产品、创意、图片、素材、工具资源、社区、技术等主题的网站资源。适合做设计工作的人员。

5.1纳米学习网站

http://1nami.com/

1纳米学习网

1纳米学习导航,是专业的学习网站导航。收集国内外最新最酷的学习网站!

精选 '益智训练'相关的学习网站!学习必备!找资料必备!

6.老司机导航

http://www.itianxia.cn

老司机

老司机，是一个简洁懂你的年轻人网址导航。没有广告、弹窗,老司机导航希望成为通向未知的最短路径。快捷键直达站点、一键打开多个标签页,老司机为你节省每分每秒

7.魔导网

http://www.mdwhat.com/home/index/0/common

魔导网

魔导网，是一个集成了网站导航,网站收藏,网站问答,网站分享,共享收藏夹,

随机发现网站等功能的新型导航网站，发现优秀的网站.

8.笔点

https://www.bidianer.com/#/

笔点

笔点，是一个简洁的网址导航网站。你可以自定义上网常用网址、自定义你需要的工具模块。

你还可以发现、收集、分享,Web开发、设计工作中的优质网站。与魔导有点相似。

如果你有好得网站，记得留言分享！

BY:洛奇猫luoqimao

在线咨询

上一篇：H5棋牌的流程是怎样的呢？
下一篇：脑残式网络编程入门(八)：你真的了解127.0.0.

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html5+css3动画实战教程之寻找北极星，附源码

您的项目需求