展示效果 上傳簡(jiǎn)書(shū)后gif不會(huì)動(dòng)了，參考騰訊云官網(wǎng)看效果 代碼實(shí)現(xiàn)： 幀動(dòng)畫(huà)：.3s steps(16） 在300毫秒內(nèi)播放16幀，t-clou...
投稿
收錄了19篇文章 · 7人關(guān)注
-
騰訊云動(dòng)態(tài)圖標(biāo)效果(幀動(dòng)畫(huà))
-
CSS+HTML<手機(jī)充電黏黏球效果>效果圖： ??此處有用到svg濾鏡效果，同等與以上效果(推薦使用) ??點(diǎn)擊此處查看簡(jiǎn)單用法 ??這篇文章有一個(gè)比較生的css屬性 mask,主要用于...
-
Vue<3D旋轉(zhuǎn)導(dǎo)航欄效果>
效果圖： 代碼如下：
-
CSS 為什么要清除浮動(dòng)與以及清除浮動(dòng)的應(yīng)用場(chǎng)景(clear: both; 相關(guān))為什么清除浮動(dòng)？:多少情況下，父盒子A是不方便給固定高度的(因?yàn)槔锩娴淖雍凶觓1和子盒子a2的內(nèi)容是動(dòng)態(tài)的,所以自動(dòng)會(huì)把父盒子A撐開(kāi)，因此不需要...
-
vue實(shí)現(xiàn)Window10日歷動(dòng)畫(huà)效果
自從從事了前端行業(yè)，就得了個(gè)職業(yè)病，就是看到任何界面的效果都會(huì)思考自己怎么實(shí)現(xiàn)，這不看見(jiàn)Window10的日歷系統(tǒng)，就動(dòng)起了歪心思，想復(fù)現(xiàn)這個(gè)效...
-
flex布局元素被擠掉的解決辦法
背景 使用flex寫(xiě)列表時(shí)遇到的前面塊的布局被擠掉，遇到各種大坑小坑，有人說(shuō)使用overflow: hidden等解決找了一堆，最終解決辦法還是...
-
web前端入門(mén)到實(shí)戰(zhàn)：CSS實(shí)現(xiàn)照片堆疊效果實(shí)現(xiàn)效果 步驟 1.初始index.html為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)div，里面包含照片的img。就這么多，剩...
-
web前端入門(mén)到實(shí)戰(zhàn)：CSS實(shí)現(xiàn)圓形進(jìn)度條
示例圖 結(jié)構(gòu) 首先一個(gè)父級(jí)div設(shè)置相對(duì)定位，內(nèi)部含有四個(gè)半圓div和一個(gè)用于遮罩的小圓div 實(shí)現(xiàn)步驟 先寫(xiě)出基本html結(jié)構(gòu) 父級(jí)div和c...
-
可能是最全的 “文本溢出截?cái)嗍÷浴?方案合集
本文首發(fā)于政采云前端團(tuán)隊(duì)博客：可能是最全的 “文本溢出截?cái)嗍÷浴?方案合集https://www.zoo.team/article/text-o...
-
純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪1 引言 本期分享一下如何僅用CSS3，實(shí)現(xiàn)單標(biāo)簽的動(dòng)態(tài)晴陰雨雪。技術(shù)關(guān)鍵點(diǎn)就是“單標(biāo)簽”和“純CSS”。先看下最終效果： 再看看HTML代碼：...
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://upload.jianshu.io/collections/images/1820390/CSSEdit_css_96px_528743_easyicon.net.png', '推薦專(zhuān)題《CSS小技巧》（ 分享自 @簡(jiǎn)書(shū) ）','http://m.itdecent.cn/c/6e6e2771d2a7?utm_campaign=maleskine&utm_content=collection&utm_medium=reader_share&utm_source=weibo','頁(yè)面編碼gb2312|utf-8默認(rèn)gb2312'));){kind=link}