使用CSS3動畫屬性實現各類旋轉跳躍

Transform字面上就是變形,改變的意思.在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，好比：rotatex() 和 rotatey() ，以此類推。

下面咱們來分解各個屬性的用法：

transform:rotate()：

含義：旋轉；其中「deg」是「度」的意思，如「10deg」表示「10度」下同，可直接寫數字,正數是順時針旋轉，負數是逆時針旋轉。

點此查看實例展現

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：

含義：傾斜；

點此查看實例展現

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()：

含義：比例；「1.5」表示以1.5的比例放大，若是要放大2倍，須寫成「2.0」，縮小則爲負「-」。

點此查看實例展現

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()：

含義：變更，位移；以下表示向右位移120像素，若是向上位移，把後面的「0」改個值就行，向左向下位移則爲負「-」。

點此查看實例展現

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

HTML5 canvas transform() 方法

繪製一個矩形；經過 transform() 添加一個新的變換矩陣，再次繪製矩形；添加一個新的變換矩陣，而後再次繪製矩形。請注意，每當您調用 transform() 時，它都會在前一個變換矩陣上構建：

JavaScript 語法：

context.transform(a,b,c,d,e,f);
a:水平縮放繪圖
b:水平傾斜繪圖
c:垂直傾斜繪圖
d:垂直縮放繪圖
e:水平移動繪圖
f:垂直移動繪圖

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)


ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);


ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);ctx.transform(1,0.5,-0.5,1,30,10);

親自試一試

瀏覽器支持

Internet Explorer 九、Firefox、Opera、Chrome 以及 Safari 支持 transform() 方法。

註釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。

定義和用法

畫布上的每一個對象都擁有一個當前的變換矩陣。

使用CSS3的animation動畫屬性實現360°無限循環旋轉。

代碼片斷：

<div id="test">

　　<img src="/CSS3/img/yinyue.png" id="change" />   //圖片路徑自定義

</div>

CSS樣式書寫以下：

#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}

@-webkit-keyframes change

{

　　0%{-webkit-transform:rotate(0deg);}

　　50%{-webkit-transform:rotate(180deg);}

　　100%{-webkit-transform:rotate(360deg);}

}

 

搞定！！！固然，這裏只寫了chrome/Safari瀏覽器的兼容，其它的可再加上：

@-moz-keyframes change{***}  火狐

@-ms-keyframes change{***}  IE

@keyframes change{***}   W3C

Opera瀏覽器不支持animation屬性！！！（我測試了一下，IE不行）

 

加載圖片的實現。

先看一下效果圖，會提高咱們的學習興趣喲：

 

第一種效果：

html結構：

<div id="progress"> <span></span> </div>

css樣式：

#progress{
	width: 50%; height: 30px; border:1px solid #ccc; border-radius: 15px; margin: 50px 0 0 100px; overflow: hidden; box-shadow: 0 0 5px 0px #ddd inset; } #progress span { display: inline-block; width: 100%; height: 100%; background: #2989d8; /* Old browsers */ background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */ background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-size: 60px 30px; text-align: center; color:#fff; -webkit-animation:load 3s ease-in; } @-webkit-keyframes load{ 0%{ width: 0%; } 100%{ width:100%; } } 

能夠看到其實這種進度條的動畫是最容易實現的，根據具體進度百分比設置默認的width百分比和動畫裏100%處的width百分比就好了，好比說，我想實現70%的進度條動畫效果，那麼我只須要修改一下兩處地方：

#progress span{ width: 70%; } @-webkit-keyframes load{ 0%{ width: 0%; } 100%{ width:70%; } } 

第二種效果：

html結構：

<div id="progressBar"> <!-- 進度條 --> <div> <span></span> </div> <!-- 五個圓 --> <span></span> <span></span> <span></span> <span></span> <span></span> </div> 

css樣式：

	   #progressBar{
	width: 80%; height: 50px; position: relative; margin: 50px 0 0 100px; } #progressBar div{ width: 100%; height: 10px; position: absolute; top:50%; left: 0; margin-top:-20px; background: #ccc; } #progressBar div span{ position: absolute; display: inline-block; background: green; height: 10px; width: 100%; -webkit-animation:bgLoad 5.5s linear; } @-webkit-keyframes bgLoad{ 0%{ width: 0%; } 18.18%,27.27%{ width:25%; } 45.45%,54.54%{ width: 50%; } 72.72%,81.81%{ width: 75%; } 100%{ width:100%; } } #progressBar>span{ position: absolute; top:0; margin-top: -10px; width: 40px; height: 40px; border-radius: 50%; background: #ccc; margin-left: -20px; color:#fff; } @-webkit-keyframes circleLoad_1{ 0%,66.66%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_2{ 0%,83.34%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_3{ 0%,88.88%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_4{ 0%,91.67%{ background: #ccc; } 100%{ background:green; } } #progressBar span:nth-child(2){ left: 0%;background:green; } #progressBar span:nth-child(3){ left: 25%;background:green; -webkit-animation:circleLoad_1 1.5s ease-in; } #progressBar span:nth-child(4){ left: 50%;background:green; -webkit-animation:circleLoad_2 3s ease-in; } #progressBar span:nth-child(5){ left: 75%;background:green; -webkit-animation:circleLoad_3 4.5s ease-in; } #progressBar span:nth-child(6){ left: 100%;background:green; -webkit-animation:circleLoad_4 6s ease-in; } 

能夠看到，其實對於動畫自己是很簡單的，一看就明白了， 主要就是動畫持續時間的計算 ，因爲這個動畫效果只執行一次，因此其實也能夠用動畫延遲時間來保證各個動畫在指定的時間點開始執行，可是對於循環或者屢次動畫效果，延遲很不靈活，因此這裏仍是用持續時間的長短來控制動畫的執行時間。

這個訂單進度條，我是設置了走一段用時1秒，而後每到一個圓點就停頓0.5秒，而這0.5秒就是相對應的圓點的動畫持續執行時間。可是 再次強調這個是單次動畫 ，若是想實現循環動畫，仍是得作調整的，必須讓全部動畫的持續執行時間是同樣的，否則循環起來就錯亂的。而時間的改動也會影響動畫關鍵幀的改動， 下面對第一小段和第二個圓的動畫時間講解一下 ：

首先，細長條的動畫持續時間經過計算：

4小段x1秒 + 中間3個圓點 x 0.5秒 = 5.5秒

接下來就是計算細長條動畫關鍵幀的時間分配，設每一份0.5秒，那麼共總就是11份，每小段得2份，每一個圓點得1份，用100%除以11，可得每份大約是9.09%，接下來就是分配時間了，這個就簡單了，很少說。

接着，當細長條完成第一小段的動畫效果到達第二個圓點時，會停頓0.5秒，而這0.5秒就是第二個圓點的動畫時間，因此第二個圓點的動畫持續時間就是：

等待細長條執行完1小段 x１秒＋自身的動畫完成時間ｘ０.５秒＝１.５秒

一樣的方法計算每一份的時間而後進行分配。 同理，其餘動畫效果類似，就再也不贅述了。

第三種效果：

今天就重點講解這個效果，首先，當有人說你能不能作一個圓形進度條效果出來時，若是是靜態完整圓形進度條，那麼就很簡單了：

.circleprogress{
    width: 160px; height: 160px; border:20px solid red; border-radius: 50%; }

而後就會說，這很簡單嘛。可是若是不是完整圓形的呢？想了想：

.circleprogress{
	width: 160px; height: 160px; border:20px solid red; border-left:20px solid transparent; border-bottom:20px solid transparent; border-radius: 50%; } 

而後仍是會說，這個也不難啦。但是，若是不是恰好都是45度的倍數呢？

OK，咱們先設置一個200x200的方塊，而後咱們在這裏面完成咱們的效果：

.circleProgress_wrapper{
	width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; } 

接下來我將在這個容器裏再放兩個矩形，每一個矩形都佔一半：

<div class="circleProgress_wrapper"> <div class="wrapper right"> <div class="circleProgress rightcircle"></div> </div> <div class="wrapper left"> <div class="circleProgress leftcircle"></div> </div> </div>

.wrapper{
	width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .right{ right:0; } .left{ left:0; } 

這裏重點說一下.wrapper 的overflow:hidden; 起着關鍵性做用。這兩個矩形都設置了溢出隱藏，那麼當咱們去旋轉矩形裏面的圓形的時候，溢出部分就被隱藏掉了，這樣咱們就能夠達到咱們想要的效果。

從html結構也已看到，在左右矩形裏面還會各自有一個圓形，先講一下右半圓：

.circleProgress{
	width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; } .rightcircle{ border-top:20px solid green; border-right:20px solid green; right:0; } 

能夠看到，效果已經出來了，其實原本是一個半圓弧，但因爲咱們設置了上邊框和右邊框，因此上邊框有一半溢出而被隱藏了，因此咱們能夠經過旋轉得以還原：

.circleProgress{
	width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(45deg); } 

因此只要旋轉本身想要的角度就能夠實現任意比例的進度條。接下來把左半圓弧也實現，變成一個全圓：

.leftcircle{
    border-bottom:20px solid green; border-left:20px solid green; left:0; }

緊接着，就是讓它動起來，原理是這樣的， 先讓右半圓弧旋轉180度，再讓左半圓弧旋轉180度 ，這樣，兩個半圓弧因爲前後都所有溢出而消失了，因此看起來就是進度條再滾動的效果：

		.rightcircle{
	border-top:20px solid green; border-right:20px solid green; right:0; -webkit-animation: circleProgressLoad_right 5s linear infinite; } .leftcircle{ border-bottom:20px solid green; border-left:20px solid green; left:0; -webkit-animation: circleProgressLoad_left 5s linear infinite; } @-webkit-keyframes circleProgressLoad_right{ 0%{ -webkit-transform: rotate(45deg); } 50%,100%{ -webkit-transform: rotate(225deg); } } @-webkit-keyframes circleProgressLoad_left{ 0%,50%{ -webkit-transform: rotate(45deg); } 100%{ -webkit-transform: rotate(225deg); } } 

固然，咱們只須要調整一下角度就能夠實現反向的效果：

		.circleProgress{
	width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(-135deg); } @-webkit-keyframes circleProgressLoad_right{ 0%{ -webkit-transform: rotate(-135deg); } 50%,100%{ -webkit-transform: rotate(45deg); } } @-webkit-keyframes circleProgressLoad_left{ 0%,50%{ -webkit-transform: rotate(-135deg); } 100%{ -webkit-transform: rotate(45deg); } } 

好的，接下來就是奔向最終效果了，正如咱們一開始看到的那樣，有點像咱們使用360衛士清理垃圾時的相似效果，固然不是很像啦：

		.circleProgress_wrapper{
	width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; } .wrapper{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .right{ right:0; } .left{ left:0; } .circleProgress{ width: 160px; height: 160px; border:20px solid rgb(232, 232, 12); border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(45deg); } .rightcircle{ border-top:20px solid green; border-right:20px solid green; right:0; -webkit-animation: circleProgressLoad_right 5s linear infinite; } .leftcircle{ border-bottom:20px solid green; border-left:20px solid green; left:0; -webkit-animation: circleProgressLoad_left 5s linear infinite; } @-webkit-keyframes circleProgressLoad_right{ 0%{ border-top:20px solid #ED1A1A; border-right:20px solid #ED1A1A; -webkit-transform: rotate(45deg); } 50%{ border-top:20px solid rgb(232, 232, 12); border-right:20px solid rgb(232, 232, 12); border-left:20px solid rgb(81, 197, 81); border-bottom:20px solid rgb(81, 197, 81); -webkit-transform: rotate(225deg); } 100%{ border-left:20px solid green; border-bottom:20px solid green; -webkit-transform: rotate(225deg); } } @-webkit-keyframes circleProgressLoad_left{ 0%{ border-bottom:20px solid #ED1A1A; border-left:20px solid #ED1A1A; -webkit-transform: rotate(45deg); } 50%{ border-bottom:20px solid rgb(232, 232, 12); border-left:20px solid rgb(232, 232, 12); border-top:20px solid rgb(81, 197, 81); border-right:20px solid rgb(81, 197, 81); -webkit-transform: rotate(45deg); } 100%{ border-top:20px solid green; border-right:20px solid green; border-bottom:20px solid green; border-left:20px solid green; -webkit-transform: rotate(225deg); } } 

能夠看到，其實就是多了一些改變不一樣邊框顏色的動畫而已，這個就給你們本身去實踐吧！ 主要仍是利用兩個矩形來完成這麼一個圓形進度條效果，特別注意overflow這條規則，起着關鍵做用。