當年求學的時候有個老師很喜歡說
"老師說這個很重要的意思就是......這個很~ 重 ~ 要~"
身為填鴨式教育下的孩子馬上就跟老師心心相印心意相通心領神會這句話背後的涵義! 抄起紅筆螢光筆馬克筆愛心筆就畫下了底線 ( 謝謝老師 )
說了這麼多，有感覺到"底線"在一般生活中有標示重點的意思了嗎~(?)
在網頁中我們也經常可以看到在功能性的物件上，用底線來與使用者進行互動喔 ! 但一樣都是底線...F12按下去之後會發現有數種寫法 !(讚嘆)
以下就來分享一些我收集的底線寫法吧!
<div class="item">
<a href="#">box</a>
</div>
.line-block a::after{
content:" ";
display:block;
width: 0%;
height: 4px;
background-color: #f00;
transition: .4s .2s;
}
.line-block a:hover::after{
width:100%;
}
偽元素預設是inline屬性，所以必須用display:block讓它能設置寬度
.line-border a{
border-bottom:0px solid #f00;
transition: .4s;
}
.line-border a:hover{
border-bottom:4px solid #f00;
}
.line-absolute a{
position:relative;
}
.line-absolute a::after{
content:" ";
position: absolute;
right:50%;
left:50%;
bottom:-5px;
border-bottom:4px solid #f00;
transition: .3s;
}
.line-absolute2 a:hover::after{
right:0%;
left:0%;
}
設置position: absolute;可以讓偽元素能設定寬高
.line-scale a {position: relative;}
.line-scale a::after{
content:" ";
width: 100%;
height: 4px;
background-color: #f00;
position: absolute;
left: 0;
bottom: 0;
transform:translateY(-8px) scale(0);
opacity: 1;
transition: .6s;
}
.line-scale a:hover::after{
transform:translateY(8px) scale(1);
opacity: 1;
}
.left-right a{
position:relative;
}
.left-right a::after{
content:"";
display:block;
width: 0;
height: 4px;
background-color: #f00;
position:absolute;
right: 0;
transition:.4s;
}
.left-right a:hover::after{
width: 100%;
left: 0;
}
.left-right-animation a{
position:relative;
}
.left-right-animation a::before{
content:"";
width: 100%;
height: 4px;
background: linear-gradient(to right,#ff0 5%,#f00 100%);
position:absolute;
right: 0;
bottom: -8px;
animation: Go2 3.5s infinite alternate cubic-bezier(0.57, 0.35, 0.45, 0.69);
}
.left-right-animation a::after{
content:"";
width: 0%;
height: 4px;
background: linear-gradient(to left,#ff0 5%,#f00 100%);
position:absolute;
left: 0;
bottom: -8px;
animation: Go 3.5s infinite alternate cubic-bezier(0.57, 0.35, 0.45, 0.69);
}
@keyframes Go{ 100%{ width: 100%;};}
@keyframes Go2{ 100%{ width: 0%;};}
大部分的底線都會使用到transition進行動畫過渡的效果控制，讓使用者摸到的時候產生互動效果
懂得原理之後再去到各個網頁去看看不同的寫法，就會有燈泡亮起來的感覺呢~
每一種表現出來的特性都有其差異，稍微改一點點就可以有不一樣的效果囉!
我是文組出身，後來的工作也跟資訊類完全沒有關係
屬於第一線聽令行事薪水很少當領班還沒有加錢休假責任制的服務人員
剛開始學的時候也買過不少人氣排行榜前五位的影片教程跟書
雖然內容很豐富，也帶了很多實作
但是礙於篇幅或影片時長的關係，很多基礎都是簡單講過
常常會越看越霧煞煞(每一部影片我至少都看了兩次以上阿...)
單純地照著影片內容一步步的操作...
就花了很多時間去理解「為什麼突然跳到那一步?」
這時候觀念都很破碎QQ
當時花了將近3個月我沒辦法自己切出一個板...
正如其他轉職前輩說的，網路上雖然資源很豐富，但是資訊很破碎
而新手最需要的就是一個導讀者協助建立觀念系統
後來看了Amos老師的金魚系列對基本觀念有了認知!
勉強可以切簡單的東西，但切起完整的版還是磕磕絆絆的QQ
不聰明的我牙一咬，決定要花人生第一筆的補習費!
陸陸續續看了許多線上直播課程的試教跟心得文後還是決定找Amos學習
上課只能說很精采、很有趣，我一直在螢幕前發出哇喔哇喔的聲音，新世界的大門一直打開(笑)
雖然之前花了不少時間盲目摸索，可上課的時候會對老師說的內容更有感觸，會有
「哇喔~原來是這樣!我之前都做錯了，難怪版會失控」，或是「哇喔 ~原來上次那個還可以這樣做，更方便了呢」的感悟
因為是小班教學，上課可以很輕鬆、很細緻，老師會提供很多練習的方向，加碼是每次上課都可以觸發的奇遇(觸發條件：問問題)，還可以聽到來自不同業界的同學自由提出各種問題，包括鬧鬧的吐槽老師或是工作上遇到的瓶頸
對預備加入這個領域的人打了不少預防針XD
隔三岔五老師還會把他研究的心得分享出來~
重點就是同學問出的問題還可以挖出老師很多東西!
所以收穫不只是從老師，還有從同學的提問 :)
有老師帶的好處就是可以省很多盲目摸索的時間〒︿〒
因為老師會直接告訴你「為什麼要做那一步」，以及那個屬性的基本使用
不懂就直接打斷老師讀條寫code啦!
即時性的解惑就是影片教學難以顧全的，
馬上獲得提示、思考可能解答、馬上練習，堅持住這個循環可以省相當多時間
把基礎觀念收拾好了，再自學會覺得輕鬆很多~
先前花錢買的書跟影片也沒有浪費，後來就是我的課後讀物了(懂了之後基本上就是跳著看XD)
老話一句，師父引進門、修行在個人~
起步已經比別人慢了，就要比別人努力N倍 -->引自《轉職軟體工程師之旅：行前準備》
PS.千萬別放棄自己的Code Review機會以及每個同學的Code Review喔~~
(老師會很認真的看每一個人的code，充滿各種彩蛋的時候!)
在結束一段課程後決定考驗我這段時間自學的成果，立下挑戰30天30篇文的目標
其實我很苦惱不知道要寫什麼，懷疑自己有那麼多東西可以寫嗎?
上課氣氛雖然很熱絡，遲鈍的新手雖然很想加入討論、很想問問題但是卻不知道自己問題在哪裡
也不清楚自己哪裡卡住了? 哪裡不懂?
下課後透過實作，仿著老師的步驟一步一步做才會發現自己為什麼不懂
去Google、去翻筆記，重新推一次思考，不看示範code自己重寫一次
這個過程中把心得跟問題整理成文字就會發現缺失了哪些
即便推不出來也能把嘗試過的路記錄下來，老師一看就知道新手卡在哪裡了
在這30天裡面，我常常都是邊寫邊查資料邊實作邊看天亮(淚)
但收穫真的很多，原本熟悉的屬性用得更順手且挖出了其他用法，不熟悉的屬性也學了起來
利用實作的時候順便練習JS
萬事起頭難呀，學習新東西真的是走一步摔一步
鈍化好久的腦子重新運轉起來像沒點油的齒輪，一轉就嘎嘎作響
摔得好痛、好氣餒、好想放棄...
但看到辛苦做出來美美的成品，還有自己在實作過程遇到的問題與想法在跟老師Code Review討論時，獲得糾正、建議與稱讚就感覺到無比的成就感，辛苦不白費呀~
就這樣一步一步累積才覺得慢慢順暢起來
感謝看完的前輩、朋友們!
還有鼓勵我踏上這條路，默默給我鼓勵與無私提供學習資源的朋友們~~
轉職之路很難! 但是很有趣 :)
繼續努力中~ 希望可以順利找到新工作XDD
iThome鐵人賽
看影片追技術