佑佑的語言

背景拖移按鈕( 功能：點擊後換背景色 )

這功能是要會四種東西: 1. label 2. input radio 3.css selector(本文未使用) or overflow(本文使用這個) 4.transition和transfrom

圖案來源:https://yoyoisaboy.github.io/webtest/bgo.html

剛開始先把背景用3個div排成三行一列(inframe內框1500px*500px)，再用一個div框起來(outframe外框500px*500px)

注意:面積大小是=>inframe>outframe ，所以outframe裡面要加入overflow的hidden遮藏起來

之後再把圈圈放在outframe裡面 ，按鈕的觸發不是中間白色的ball喔~

是那三個圓圈外框，這可以利用input 的 radio 功能做到，因為我把input按鈕樣子用display:none，所以你右鍵檢查打開，把它取消後他就會浮出來喔 (030)/ 

至於動態功能(背景換色和ball的移動)

你必須知道CSS的觸發功能怎麼寫，我拉一段舉例子:

假如我要按中間的按鈕

input[id=centerbotton]:checked ~ #outframe > #boll{
  transition: transform 500ms ease-in-out;
  transform: translateX(200px);
}

input[id=centerbotton]:checked ~ #outframe > #inframe{
  transition: transform 500ms ease-in-out;
  transform: translateX(-500px);

}

看著你會發現利用id找哪個案鍵，之後看他如果被按了，找他位置的外框id(outframe)，id(outframe)裡頭有哪些id(boll ，inframe) ，再寫他們會發生什麼事；背景同理。

再來就是剩下動畫部分，用transition和transform，他有很多功能(傳送門)，自己玩玩看吧!!

end