我們傳統(tǒng)的前端更多的是用javascript實(shí)現(xiàn)各種復(fù)雜動(dòng)畫(huà)，自從有了Css3 transition和animation以來(lái),前端開(kāi)發(fā)在動(dòng)畫(huà)這一塊有了更高的自由度和格局,對(duì)動(dòng)畫(huà)的開(kāi)發(fā)也越來(lái)越容易。這篇文章就讓我們匯總一下使用Css3實(shí)現(xiàn)的各種特效。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括海豐網(wǎng)站建設(shè)、海豐網(wǎng)站制作、海豐網(wǎng)頁(yè)制作以及海豐網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，海豐網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到海豐省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
1.實(shí)現(xiàn)內(nèi)部虛線邊框
知識(shí)點(diǎn)：outline
核心代碼
重慶分公司
重慶分公司
.dash-border{
width: 200px;
height: 100px;
line-height: 100px;
outline: 1px dashed #fff;
outline-offset: -10px;
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）2.邊框內(nèi)圓角的實(shí)現(xiàn)
知識(shí)點(diǎn)：box-shadow
核心代碼
.radius-border{
margin-top: 20px;
width: 180px;
height: 80px;
box-shadow: 0 0 0 10px gray;
}3.實(shí)現(xiàn)條紋背景與進(jìn)度條
知識(shí)點(diǎn)：linear-gradient,repeating-linear-gradient
核心代碼
/* 上 */
background: linear-gradient(to right,#fb3 50%,#58a 0);
background-size: 40px 100%;
box-shadow: inset 0 0 3px #555;
/* 中 */
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 40px 40px;
/* 下 (可以實(shí)現(xiàn)任意角度的漸變，45°時(shí)顯示效果最好) */
background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);
4.復(fù)雜的背景圖案
知識(shí)點(diǎn)：linear-gradient,repeating-linear-gradient,radial-gradient
由于第二個(gè)圖會(huì)有復(fù)雜的隨機(jī)動(dòng)畫(huà)，建議大家可以親自嘗試看看效果，核心代碼
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）紅綠燈以及紅路燈隨機(jī)運(yùn)動(dòng)動(dòng)畫(huà)
利用css3多背景和position實(shí)現(xiàn)紅綠燈和背景色塊移動(dòng)
核心代碼
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）棋盤(pán)背景以及棋盤(pán)背景隨機(jī)動(dòng)畫(huà)
利用背景漸變實(shí)現(xiàn)棋盤(pán)圖案
核心代碼
偽隨機(jī)背景
利用背景漸變，keyframe動(dòng)畫(huà)，實(shí)現(xiàn)復(fù)雜的偽隨機(jī)動(dòng)畫(huà)
核心代碼
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）5.折角效果
知識(shí)點(diǎn)：linear-gradient
核心代碼
折角效果哦
折角效果哦
2.內(nèi)陰影圓折角效果
核心代碼
折角效果哦
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）6.自適應(yīng)文本的條紋背景
知識(shí)點(diǎn)：linear-gradient,line-height,background-origin
核心代碼
hello you
hello you
hello you
hello you
hello you
7.自定義的下劃線實(shí)現(xiàn)
知識(shí)點(diǎn)linear-gridient
小伙伴們注意到了嗎？默認(rèn)的下劃線會(huì)將文字穿過(guò)，而上面的不會(huì)呦！
核心代碼
i have your big apple.you have a too? hi hi hi.
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
