呼吸燈
來(lái)源: https://codepen.io/rozbo/pen/XKkkYQ
breathing-light.gif
分析這位小哥的實(shí)現(xiàn)：
- 設(shè)計(jì)能力：這種特效，對(duì)配色的要求很高，經(jīng)典的黑配綠，極客最?lèi)?ài)季稳。
顏色值：body背景色： #151515 輸入框背景色： #222 輸入框背景漸變：#333, #222 輸入框border顏色：#444 輸入框字體顏色： #888 暗綠：#393 亮綠：#6f6 box-shadow顏色：rgba(0,255,0,.2), rgba(0,255,0,.6) - box-shadow 巧妙應(yīng)用，陰影產(chǎn)生柔和的視覺(jué)變化澈魄。
各位可查看這位小哥的源碼景鼠，我認(rèn)為最巧妙的地方就是使用box-shadow來(lái)完善邊框顏色的變化，避免顏色生硬的變化痹扇。
閃光
騰訊理財(cái)通里面铛漓，會(huì)員名片有這個(gè)效果溯香。
來(lái)源：http://www.reibang.com/p/771a09bd79cf
核心就是實(shí)現(xiàn)一個(gè)閃光條。
作者使用 linear-gradient 實(shí)現(xiàn)的票渠，動(dòng)畫(huà)使用的 transition 貌似會(huì)卡頓逐哈。
本人想了另外一種實(shí)現(xiàn)，使用 box-shadow 實(shí)現(xiàn)閃光條问顷，建議使用 animation 實(shí)現(xiàn)動(dòng)畫(huà)
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
