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動畫實戰教程之尋找北極星，附源碼

您的項目需求