原创 純CSS導航欄下劃線跟隨效果 轉
<ul> <li>不可思議的CSS</li> <li>導航欄</li> <li>光標小下劃線跟隨</li> <li>PURE CSS</li> <li>Nav Underline</li> </ul> li::bef
2018-12-02 21:18:38
原创 css圖片預加載 轉
css /* 預加載圖片，掛在body上 */ .preload-img:after{ content:""; background: url(../images/new/full_bg2.jpg) no-repea
2018-12-02 21:18:38
原创 藉助CSS Shapes實現元素滾動自動環繞iPhone X的劉海 轉
果然，多看纔會有長進 交互視頻效果戳這裏體驗：http://t.cn/Rp01GKc 就是頁面滾動的時候，列表會自動繞着iPhone X的劉海排列。 用了 CSS Shapes中有個CSS屬性名爲shape-outside，可以讓內聯
2018-12-02 21:18:38
原创 利用剪切板JS API優化輸入框的粘貼體驗 轉
兼容性 直接複製記錄下 /** @description 表單輸入框粘貼體驗優化，出處https://www.zhangxinxu.com/wordpress/?p=8003 @author zhangxinxu */ // 遍歷
2018-12-02 21:18:38
原创 CSS :first-child 選擇器 原
:first-child選擇器對於類的選擇中 <!DOCTYPE html> <html> <head> <style> .a:first-child { background-color:yellow; } </style> </head
2018-12-02 21:18:26
原创 拖拽上傳 轉
跟着張大神修煉內功 其中就有拖拽上傳的demo https://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html 精簡版： https://www.zhang
2018-12-02 21:18:26
原创 y滾動條不抖動 轉
http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/ 評論區更熱鬧 對於 寬度 使用 width：100vw，相對於
2018-12-02 21:18:26
原创 js 操縱css僞元素 :after :before 原
寫在前面 導航條的下邊滑塊，自己是採用:before來寫， 好處就是代碼比較工整好維護，但是由於要求是可配置的所以無論滑塊的位置還是寬度都需要更改僞元素纔可以，這直接css目前是沒辦法做到的 ps: attr()目前瀏覽器只支持cont
2018-12-02 21:18:26
原创 ES6學習（四） 原
寫在前面 好久沒看es6了，昨天遇到一個與promise相關的bug，記錄下promise的相關知識了 阮一峯老師的Promise 正文 Promise對象是一個構造函數，用來生成Promise實例。 基礎用法 const promise
2018-12-02 21:18:26
原创 css reset 轉
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn,
2018-12-02 21:18:26
原创 js圖片壓縮 原
寫在前面 在移動端，手機相冊裏的圖片基本上都大！！在傳輸前都需要壓縮一下，百之谷之，採用cavan進行壓制 上代碼 function _Image() { this.compressDefaults = {
2018-12-02 21:18:26
原创 頁面平滑滾動的體驗提升 轉
scroll-behavior屬性和JS scrollIntoView()方法 本身作爲體驗提升的手段，用 <a href="#" rel="internal">返回頂部</a> 兼容性就可以不用考慮太多 不支持就直接回去唄 用法： sc
2018-12-02 21:18:26
原创 css顯示隱藏 原
內容大部分來自 張鑫旭大大的《css世界》一書 自己爲了以後偷懶，寫下來以後項目直接可以抄了(＾－＾)V /* 1、 元素不可見，不佔據空間，輔助設備無法訪問，同時不渲染 使用html<script>用於影藏 eg: <script t
2018-12-02 21:18:26
原创 貝塞爾的原型對象 原
寫在前面 h5頁面要求做出有客戶端的切換效果 有和知乎差不多的貝塞爾側拉，想着之後可以偷懶套用，於是就寫了個貝塞爾的原型對象。 上代碼 // 生成貝塞爾下拉 // 使用原型對象 function Bezier(options) {
2018-12-02 21:18:26