iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Modern Web

CSS 讓你的網頁動起來系列 第 30

CSS微動畫 - 有始有終!心得跟最後動畫分享

  • 分享至 

  • xImage
  •  

Q: 第 30 天了,心中有沒有很興奮?
A: 好緊張耶.. 最後一天了來個結語~~

之前從來沒有想過要參加鐵人賽

當初的對話是這樣的...

同事A:「走啊!一起參加鐵人賽」
(猶豫了3秒(?)
「好」

然後就入坑了,差點沒被另一位同事打死,畢竟每天已經在一堆坑裡爬來爬去,現在又往另一個很深的坑跳,已經被稱作是自虐式的瘋狂!!

題目選擇上斟酌了很久

猶豫的時間只花了3秒,答應後馬上被拉進群組(挖~好多人阿),題目都還沒想好,現在想來好像有點太衝動了!但既然決定上了,總是要挑一個有把握的題目來寫,當時在CssAngular之間徘徊了很久,最後因為「Angular已經很多從零到有的教學影片跟文章了」選擇Css下手,而這也是相當有把握的項目!

參賽以來的心情~錯綜複雜

為了啟發靈感,查查網路上的範例做參考是必要的!因為一個人的思想是有限的,所以如果可以將其他人的創意跟自己的功力結合,就會有無限的可能。在9月底時因為假日需要外出,在外出前要把內容都先想好,那幾天都炸了很多腦細胞,不過即便如此,在參賽的過程中除了分享範例及屬性以外,自己也等於是把所有內容複習了一遍,也是受益良多。

對自己小小驕傲 & 對大家心懷感激

『邦友 xxx 訂閱您的鐵人系列文「CSS 讓你的網頁動起來」,好文受到關注,繼續加油!』
第一次參加鐵人賽,在發文的過程中偶爾會收到訂閱通知,看到時真是讓人心中替自己感到小小驕傲,謝謝大家的關注,今天終於完賽了!

最後來個第一篇的範例吧

第一篇的時候在目錄欄有個小範例,本篇將用一樣的效果來個Ending,在這最後一篇把程式碼補上,算是讓一切有始有終~

<style>
  .text {
    color: Chocolate;
    font-size: 60px;
    font-weight: bolder;
    letter-spacing: 5px;
    text-shadow: 0 0 3px Chocolate;
    animation: textAnimation 1.2s infinite;
  }
  @keyframes textAnimation {
    50% {
      text-shadow: 0 0 3px Chocolate, 8px 8px 3px SandyBrown, 16px 16px 3px PeachPuff;
    }
  }
</style>

<div class="text">The End</div>

30 Days Done


第一次參加鐵人賽
感謝大家 30 天以來的關照


上一篇
CSS微動畫 - Transform不一定是位移的最佳選擇
系列文
CSS 讓你的網頁動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
wolfwang
iT邦研究生 4 級 ‧ 2021-10-15 15:38:29

謝謝~收獲很多,學了不少東西

我要留言

立即登入留言