
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、如何使用純css實(shí)現(xiàn)冰棍的動(dòng)畫效果源代碼下載代碼解讀定義dom,容器中包含2個(gè)元素:居中顯示:bodymargin:0;height:100vh;display:flex;align-items:center;justify-content:center;background-color:darkslategray;繪制出冰棍的形狀:.flavorswidth:19em;height:26em;font-size:10px;border-radius:8em8em1em1em;給冰棍上色:.flavorsposition:relative;overflow:hidden;.flavors:be
2、forecontent:&39;&39;position:absolute;width:140%;height:120%;background:linear-gradient(hotpink0%,hotpink25%,deepskyblue25%,deepskyblue50%,gold50%,gold75%,lightgreen75%,lightgreen100%);z-index:-1;left:-20%;transform:rotate(-25deg);來一點(diǎn)光照效果:.flavors:aftercontent:&39;&39;position:absolu
3、te;width:2em;height:17em;background-color:rgba(255,255,255,0.5);left:2em;bottom:2em;border-radius:1em;畫出冰棍筷子:.stickposition:relative;width:6em;height:8em;background-color:sandybrown;left:calc(50%-6em/2);border-radius:003em3em;給冰棍筷子加一點(diǎn)陰影,增強(qiáng)立體感:.stick:aftercontent:&39;&39;position:absolute;width:inherit;height:2.5em;background-color:sienna;讓冰棍的顏色滾動(dòng)起來:.flavors:beforeanimation:moving100slinearinfinite;keyframesmovingtobackground-position:01000vh;最后,增強(qiáng)交互效果,當(dāng)鼠標(biāo)懸停時(shí)才播放動(dòng)畫:.flavors:beforeanimation-play-state:paused;.ice-lolly:hover.flavors:
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 戰(zhàn)略合作方銷售代理合同范本
- 土地使用權(quán)買賣合同樣本
- 臨時(shí)雇傭合同標(biāo)準(zhǔn)文本
- 高校畢業(yè)生實(shí)習(xí)協(xié)議合同
- 股份合作企業(yè)合同范本
- 婚禮場(chǎng)地租賃合同書
- 度企業(yè)信用反擔(dān)保合同協(xié)議
- 企業(yè)安全生產(chǎn)責(zé)任協(xié)議合同
- 勞動(dòng)合同樣本:?jiǎn)T工長(zhǎng)期雇傭
- 海濱度假村物業(yè)銷售合同協(xié)議
- GB/T 14643.4-2009工業(yè)循環(huán)冷卻水中菌藻的測(cè)定方法第4部分:土壤真菌的測(cè)定平皿計(jì)數(shù)法
- 注塑成型工藝培訓(xùn)資料合集課件
- rg-wall1600系列下一代防火墻命令手冊(cè)
- 餐廳服務(wù)員禮儀培訓(xùn)(30張)課件
- 肺結(jié)核共45張課件
- SCI論文寫作031112課件
- (完整)PICC導(dǎo)管堵塞的預(yù)防及處理ppt
- 公司舉辦讀書分享會(huì)活動(dòng)策劃5篇
- 行政法整套ppt課件完整版教學(xué)教程最全電子講義(最新)
- Q∕SY 1802-2015 石油煉制與化工裝置工藝設(shè)計(jì)包編制規(guī)范
- 人工挖孔樁防護(hù)驗(yàn)收表(范本模板)
評(píng)論
0/150
提交評(píng)論