iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

勇者Jason和前端之鑰系列 第 26

【DAY26】用transform跟transition讓網頁動起來!

  • 分享至 

  • xImage
  •  

GitHubpage
拿來練習的小東西

兩天前用transfrom學了許多種方法讓網頁動起來,
今天想把他們串起來,因此做了一些不明所以的效果XDDDD。
可是好有趣。

其中,
利用transition-delay來讓元素開始的時間有延遲,動起來有順序性。

然後另外一個有趣的是:
利用一個元素去控制另外一個區塊,
值得一提的是
當要控制其他元素的時候請用~
不要用+
上網查到用+,但是只能控制下一個,
要控制多個還是要用~

&:hover~.box1{
                transform: rotate(720deg);
                left: 50%;
                background-color: green;
                border-radius: 50px; 

完整程式碼

今天還在摸索功能!
請看明天的鐵人文


上一篇
【DAY25】我選擇死亡!Ai初體驗...
下一篇
【DAY27】到底是誰偷吃了薯條?(用CSS實現名片翻轉效果)
系列文
勇者Jason和前端之鑰32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
GG
iT邦新手 5 級 ‧ 2018-01-15 21:16:17

這好好玩喔!!!!!!!!!!!!!!!!!!!!

我要留言

立即登入留言