網路城邦
回本城市首頁 依卡語法學院
市長:旅 者  副市長:
加入本城市推薦本城市加入我的最愛訂閱最新文章
udn城市人文藝術藝術天地【依卡語法學院】城市/討論區/
討論區進階語法 字體:
看回應文章  上一個討論主題 回文章列表 下一個討論主題
本文已被刪除
 瀏覽2,690|回應10推薦12

寒峰
等級:8
留言加入好友
文章推薦人 (12)

Anne~*
candy ~
Joson
佛力
龍女CHANG, HSIU-FEN
星.
偉如優
旅 者
妮妮貓
薇妮~*

more...

本文因「重複貼文」,已由 寒峰(lkker) 於 刪除。
 回應文章
交作業
推薦5


星.
等級:8
留言加入好友

 
文章推薦人 (5)

Joson
妮妮貓
平安旅者
薇妮~*
fen22179












本文於 修改第 2 次
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3718646
^^蝶心
    回應給: 蝶心(年終大掃除)(lavendersky168) 推薦3


yen905
等級:
留言加入好友

 
文章推薦人 (3)

平安旅者
fen22179
星.

background-color:black---前面語法中black字樣可改掉或刪掉..

刪掉即是透明背景..

因寒峰的蝴蝶圖..本身是有黑色背景..所以要變透明一定要先做圖片去背



本文於 修改第 1 次
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3716763
蝶心妹妹...
    回應給: 蝶心(年終大掃除)(lavendersky168) 推薦2


平安旅者
等級:8
留言加入好友

 
文章推薦人 (2)

星.
fen22179

背景口以弄成........朦朧

但.........沒法透明..........

除非........去背

反正 蝴蝶去背粉簡單.........作一半

複製  翻轉  挖勒給它............貼上

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3716611
背景可以改成透明嗎?....
    回應給: 寒峰(lkker) 推薦2


lavendersky168
等級:
留言加入好友

 
文章推薦人 (2)

星.
平安旅者

dear 寒峰

我來取經ㄌ!

請問背景可以改成透明嗎?....語法如何修改?

蝶心

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3716604
^^寒峰
    回應給: 寒峰(lkker) 推薦4


yen905
等級:
留言加入好友

 
文章推薦人 (4)

fen22179
星.
平安旅者
寒峰

請你有空時...把這篇語法教學..po到yen城市收藏..

謝嘍!

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3712622
^^感謝
    回應給: 寒峰(lkker) 推薦2


g221347
等級:
留言加入好友

 
文章推薦人 (2)

星.
旅 者

感謝老師詳細的教學文
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3704305
語法說明
推薦7


寒峰
等級:8
留言加入好友

 
文章推薦人 (7)

Joson
糖衣
妮妮貓
fen22179
星.
旅 者
平安旅者

直式跑馬語法說明:

1.<div id="kp" style="position:relative;left:5px;top:0px;width:310px;height:410px;border:5px double black;background-color:black;overflow:hidden">
id="kp" 發文區塊命名為 kp .
position:relative;用[相對定位]語法,將文章內物件的定位點,從網頁左上角轉移到發文格的左上角,避免網頁內容變化失去準確的定位點。
left:5px;top:0px; 設定文章區塊(kp)的位置(與發文格之間的間距).
width:310px;height:410px; 設定文章區塊(kp)的大小,依圖片大小(300x200)設置,因上下兩組圖片,所以區塊大小設為:width:300px;height:400px;各多10px為表框線(border:5px double black;).
background-color:black; 背景顏色設為黑色.
overflow:hidden 超出區塊範圍的動作物件隱藏不顯示.

2.<style type="text/css"><!-- .time {BEHAVIOR: url(#default#time2)} //--></style>
<?import namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" declareNamespace>
宣示空間命名為time的標籤語法.

3.設定第一組(上跑)圖片的位置和大小,整個動作區命名為 k1.
<div id="k1" style="position:absolute;left:0px;top:0px;width:300px;height:200px;overflow:hidden" class="time" begin="0" dur="indefinite"><img id="w01" src="
http://album.udn.com/community/img/PSN_PHOTO/lkker/f_4102432_1.jpg" style="position:absolute;left:0px;top:200px;width:300px;height:200px;" class="time" begin="k1.begin" /><img id="w02" src="http://album.udn.com/community/img/PSN_PHOTO/lkker/f_4102433_1.jpg" style="position:absolute;left:0px;top:200px;width:300px;height:200px;" class="time" begin="k1.begin+20" /></div>
整組圖片位置在left:0px;top:0px;
class="time" 時空語法,等於:.time {BEHAVIOR: url(#default#time2)}
begin="0"  開始的時間 0 ;從網頁載入開始動作.
dur="indefinite" 圖片停留在網頁畫面的時間,可以用數字(秒),indefinite 是永續停留.

<img id="w01" src="http://album.udn.com/community/img/PSN_PHOTO/lkker/f_4102432_1.jpg" style="position:absolute;left:0px;top:200px;width:300px;height:200px;" class="time" begin="k1.begin" />
這組第一張圖片,命名為 w01,因從中間向上跑,設定出現在 top:200px;
begin="k1.begin" 時間是k1動作區開始就載入.

動作語法:
<t:animateMotion id="k11" targetElement="w01" from="0,0" to="0,-400" begin="w01.begin" dur="40" autoreverse="false" repeatcount="indefinite" />
t:animateMotion 動作標籤,animateMotion 移動.
targetElement="w01" 動作對象標的是命名 w01 的圖片,
from="0,0" to="0,-500" 以圖片設定的位置為基準座標x=0,y=0,移動到x=0,y=-500的地方,意思是圖片左右位置不變,向上移動500個像素距離。
(x負數為向左移,正數為向右移,y負數為向上移,正數為向下移)
begin="w01.begin" 動作的開始時間,從w01圖片載入開始.
dur="40" 移動速度(完成一次動作所需時間40秒,也就是從x=0,y=0,移動到x=0,y=-500的時間),數字越大移動越慢,數字越小移動越快。
autoreverse="false" 反覆動作(來回移動),不要 false,要 true。
repeatcount="indefinite" 動作次數,可用數字設定次數,indefinite 為持續動作。

<img id="w02" src="http://album.udn.com/community/img/PSN_PHOTO/lkker/f_4102433_1.jpg" style="position:absolute;left:0px;top:200px;width:300px;height:200px;" class="time" begin="k1.begin+20" />
這組第二張圖片,命名為 w02,因從中間向上跑,設定出現在 top:200px;
begin="k1.begin+20" 時間是k1動作區開始 20 秒後載入.(因接續在第一張圖片後,第一張圖片跑馬時間設定 20 秒).

動作語法:
<t:animateMotion id="k12" targetElement="w02" from="0,0" to="0,-500" begin="w02.begin" dur="40" autoreverse="false" repeatcount="indefinite" />
用法與第一張圖片相同

4.設定第二組(下跑)圖片的位置和大小,整個動作區命名為 k2.
<div id="k2" style="position:absolute;left:0px;top:200px;width:300px;height:200px;overflow:hidden" class="time" begin="0" dur="indefinite">
整組圖片位置在left:0px;top:200px;

<img id="w03" src="http://album.udn.com/community/img/PSN_PHOTO/lkker/f_4102432_1.jpg" style="position:absolute;left:0px;top:-200px;width:300px;height:200px;Filter:FlipV;" class="time" begin="k2.begin" />
這組第一張圖片,命名為 w03,因從中間向下跑,設定出現在 top:-200px;

5.提要:上下跑馬語法差不多,主要注意圖片出現的位置和移動的方向.

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3703766
這個分享太棒了~~
推薦2


g221347
等級:
留言加入好友

 
文章推薦人 (2)

平安旅者
寒峰

這個分享太棒了~~

老師可以加上標籤註解嗎?

讓學習更加方便

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3703530
哇...找到嚕...
推薦3


旅 者
等級:7
留言加入好友

 
文章推薦人 (3)

fen22179
寒峰
落伍者







本文於 修改第 1 次
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3703486
寒峰兄
    回應給: 寒峰(lkker) 推薦3


旅 者
等級:7
留言加入好友

 
文章推薦人 (3)

fen22179
星.
寒峰

圖滴移動速度 及 圖面接續滴速度 時間 尺寸 調哪?

本文於 修改第 1 次
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=63947&aid=3703481