iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

CSS 讓你的網頁動起來 系列

CSS不僅可以美化網頁,善用animation、transition更可以讓畫面活起來!

鐵人鍊成 | 共 30 篇文章 | 28 人訂閱 訂閱系列文 RSS系列文 團隊神龍特攻隊 - it 宏的逆襲
DAY 1

CSS微動畫 - 為了不依賴套件,所以要自己來!

Q: 很多免費的現成的套件可以直接套用就有效果,拿來用吧?A: 真的有比較好用嗎? 網頁的組成離不開html的架構及css的樣式,除了放上會動的圖片之外,...

2021-09-09 ‧ 由 粒粒 分享
DAY 2

CSS微動畫 - 先了解將使用的屬性是很重要的!transform & transition

Q: 不會設計怎麼辦?A: 小編也不會設計,但可以把別人的設計變成網頁! 本篇開始將使用transform跟transition屬性做微動畫,透過操控這兩個...

2021-09-10 ‧ 由 粒粒 分享
DAY 3

CSS微動畫 - 為什麼別人的按鈕點起來比較有感覺?

Q: 為什麼別人的按鈕點起來比較有感覺? A: 因為外國的月亮比較圓? 網頁中常常會有很多可以點擊的地方(按鈕或是超連結),有些網站的按鈕讓人覺得「只是按鈕...

2021-09-11 ‧ 由 粒粒 分享
DAY 4

CSS微動畫 - 按鈕效果只有一種太單調啦!

Q: 網路上找到的看起來都很厲害,程度能比嗎?A: 厲害歸厲害,每個效果都適合你的網站嗎? 讓元素對使用者的操作有「回應」可以讓使用者有跟網頁「互動」的感覺...

2021-09-12 ‧ 由 粒粒 分享
DAY 5

CSS微動畫 - 善加利用偽元素可以做出更多變化

Q: 別人網站上看到的動態效果變化很多,還是引寫好的套件(庫)進專案吧?A: 只引進一個套件(庫)就可以滿足你的需求嗎?還是要引進很多個? 偽元素也是製作「...

2021-09-13 ‧ 由 粒粒 分享
DAY 6

CSS微動畫 - 開關按鈕也要美美的

Q: 想要電腦上的開關按鈕看起來跟App上的一樣,可以嗎?A: 想要什麼顏色的呢? 介紹完transition後,接下來這篇的實作案例會運用比較基礎的js針...

2021-09-14 ‧ 由 粒粒 分享
DAY 7

CSS微動畫 - 不使用圖片製作「加到最愛」開關按鈕

Q: 請問icon要怎麼出圖好呢?A: 一定要用圖片嗎? 本篇要實作的是「加到最愛」的按鈕,結合之前所述的偽元素,以不使用圖片的方式做出圖案,讓按鈕可以有更...

2021-09-15 ‧ 由 粒粒 分享
DAY 8

CSS微動畫 - 彈出來的選單 Part.1

Q: 這個看起來像貓爪的東西是什麼?A: 喵? 本篇開始將實作選單的微動畫,比較特別的要來說說transform的順序帶給動態效果的影響! 謎音1:本次示...

2021-09-16 ‧ 由 粒粒 分享
DAY 9

CSS微動畫 - 彈出來的選單 Part.2

Q: 是不是來點icon比較知道這是幹嘛的?A: 不複雜的可以用css畫,複雜的可以考慮出圖或是svg! 繼上一篇已經做出一個置底的彈出式選單,但看著總覺得...

2021-09-17 ‧ 由 粒粒 分享
DAY 10

CSS微動畫 - 了解Animation並做出更多效果吧!

Q: 是時候表演真正的技術了?A: 要動起來是少不了animation屬性的! 本篇開始將使用animation屬性做微動畫,別於transition是在樣...

2021-09-18 ‧ 由 粒粒 分享