2015年6月11日 星期四

Html5+Css3 初體驗

 許多人對Html5都不陌生,但CSS3 帶來更多驚喜,原本複雜的javascript 才能寫出來的特效,竟然不用寫一行程式,也能達到一樣的效果,作者用之前codova的範例,將畫面重新改版後,同樣也能在手機上呈現豐富的特效。

l   漸層色: -webkit-linear-gradient(bottom , #abd3ee, white);

作者以藍色海洋為構想,所以將背景以藍色漸層方式呈現,越往上顏色就越
淡,讓人感覺色彩更加豐富,如果想改變漸層的角度,可以把bottom改為其他的值,目前所知的參數如下lefttop rightbottom ,還有組合式:left topbottom right,如果都不符合期待的話還有直接輸入角度喔。

<style>
        body {
            width:400px;
            height:600px;
//從底層產生漸層效果,由藍色越往上越來越淡,直到白色為止。
            background: -webkit-linear-gradient(bottom , #abd3ee, white) no-repeat
        }   
</style>

l   點選的行為: #button:hover, button:active

手機並沒有hover的行為,所以用active 代替,讓使用者有種按下按鈕
的體驗,才不會使用者一直重複點選。

        #button {
            position: fixed;           
            background-image: url('images/photoshop-icon.png');
            top: 480px;
            left: 0px;
            background-color: #abd3ee;
            border-radius: 100px 100px;
            width: 100px;
            height: 100px;
        }

        #button:hover, button:active {
            width: 130px;
            height: 130px;
            background-image: url('images/camera.png');
            background-repeat: no-repeat;               
            cursor: pointer;
       }

l   繪圖: cycle.arc(圓心X, 圓心Y,半徑, 起始角度 * Math.PI, 結束角度 * Math.PI, false);

首先要在html中插入<convas></convas>,就能透過javascript
繪製幾何圖形,作者用圓形來做示範教學,根據以下的圖示是各角度的起始點,比方的圖示,就是從0度到1.5度的圓弧,各位一定很好奇,如果想把下面的缺角補滿,角度該從多少到多少可不要被騙喔~ 02.0, 正如同0度和360度都是同一角度,回到原點。




<style>
#seaweed {          
            width:300px;
            height:300px;           
            position:fixed;
            top:400px;
            left:130px;
}
</style>
<canvas id="seaweed"></canvas>
<script>
        drawSeaweed();
        function drawSeaweed() {
            var convas = document.getElementById("seaweed");
            var cycle = convas.getContext("2d");
            var radius = 30; //半徑
//開始繪圖
            cycle.beginPath();
cycle.arc(40, 30, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左上半圓
cycle.arc(40, 90, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左下半圓
            cycle.arc(40, 30, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右上半圓
            cycle.arc(40, 90, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右下半圓
            cycle.fillStyle = "green"; //綠色顏色
            cycle.fill();//填滿區塊
            cycle.strokeStyle = "block"; //外框線為黑色
            cycle.stroke();//外框線實心線
        }       
    </script>

l   動畫 : @-webkit-keyframes

這是讓靜態的圖片,也能活生生動起來的魔術語法喔,只要在from的區塊
中, 輸入狀態ACSS樣式內容,然後在to的區塊中,輸入狀態BCSS樣式內容,就能從狀態A變化到狀態B,不論是移動座標、改變顏色、都十分容易上手,以下的參數就是說明如果完成動畫效果。

-webkit-animation-name: 執行的動畫名稱
-webkit-animation- duration: 執行動畫時間
-webkit-animation-iteration-count: 執行動畫次數 (infinite 不限次數)

<style>
   /* The animation code */
   @-webkit-keyframes example {
       from {
          background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
        }
       to {
          width:80px;
          height:80px
           top: 100px;
           background:-webkit-radial-gradient( rgba(0, 0, 100, 0.01) , rgba(0, 0, 100, 0.01) , rgba(158, 226, 218, 0.73) );
           }
        }     
  #bubble {            
            border-radius:100px 100px;
            position:fixed;
            top:400px;
            left:30px;
            width:30px;
            height:30px;                       
            background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
            -webkit-animation-name: example;
            -webkit-animation-duration: 6s;
            -webkit-animation-iteration-count: infinite;
        }
</style>
<div id="bubble"></div>


l   轉角度 : -webkit-transform

作者構想把拍攝的照片轉7度,讓畫面看起來看加生動活潑,所以另要加上
box-shadow 陰影的效果,讓視覺感覺有點立體感…

<style>
   #image {
            top:30px;
            left:30px;
            width:200px;
            height:300px;
            -webkit-transform: rotate(7deg);
            background-color:white;
            box-shadow:3px 3px 5px 6px #ccc
        }

        #takePicture {
            position:relative;
            top:35px;
            left:35px;
            width:185px;
            height:250px;
            -webkit-transform: rotate(7deg);
            border: inset 4px #2bc4c4 ;
        }
</style>
<div id="image">
    <img id="takePicture" />
</div>



完成的成果



































泡泡會動喔~ 各位們有感覺到泡泡的夢幻嗎? 如果有人對拍照的功能有興趣的話,可以參考 『Codova 如何上傳圖片到Server』 , 它說明如何透過codova 呼叫硬體的相機API,拍照後顯示在圖框上,感謝各位的到訪~


沒有留言:

張貼留言