許多人對Html5都不陌生，但CSS3 帶來更多驚喜，原本複雜的javascript 才能寫出來的特效，竟然不用寫一行程式，也能達到一樣的效果，作者用之前codova的範例，將畫面重新改版後，同樣也能在手機上呈現豐富的特效。
l 漸層色: -webkit-linear-gradient(bottom , #abd3ee, white);
作者以藍色海洋為構想，所以將背景以藍色漸層方式呈現，越往上顏色就越
淡，讓人感覺色彩更加豐富，如果想改變漸層的角度，可以把bottom改為其他的值，目前所知的參數如下left、top 、right、bottom ，還有組合式:left top、bottom 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度的圓弧，各位一定很好奇，如果想把下面的缺角補滿，角度該從多少到多少? 可不要被騙喔~ 是0到2.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的區塊
中， 輸入狀態A的CSS樣式內容，然後在to的區塊中，輸入狀態B的CSS樣式內容，就能從狀態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，拍照後顯示在圖框上，感謝各位的到訪~
沒有留言:
張貼留言