摘要：如何用獲取虛擬鍵盤高度前端早讀課月號(hào)早讀文章由湯谷投稿分享。大殺器和把動(dòng)畫轉(zhuǎn)換成原生動(dòng)畫初來(lái)乍到，本文搬運(yùn)自我月份在知乎發(fā)的文章。

除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問(wèn)到的。

9月7號(hào)早讀文章由@湯谷投稿分享。
正文從這開始～ 這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，what？沒(méi)有方案還聊個(gè)什么？
別急，別急，接下來(lái)我們一起來(lái)扒一扒關(guān)于軟鍵盤高度和 input 的問(wèn)題 我們先來(lái)看一個(gè)短片認(rèn)識(shí)一下這個(gè)問(wèn)題 …

圖標(biāo)作為網(wǎng)頁(yè)設(shè)計(jì)中的一部分，其在凸顯網(wǎng)頁(yè)重要元素特性，視覺(jué)交互、引導(dǎo)以及網(wǎng)頁(yè)裝飾等充當(dāng)?shù)慕巧饔门e足輕重。由于圖標(biāo)普遍具有尺寸小的特點(diǎn)，在項(xiàng)目實(shí)踐時(shí)不宜將每個(gè)圖標(biāo)作為單個(gè)圖片元素進(jìn)行加載，這會(huì)增加Http請(qǐng)求，影響網(wǎng)頁(yè)的性能。因此，在實(shí)際中，我們可能見到以下一些常見的解決方案：…

打造絲般順滑的 H5 翻頁(yè)庫(kù)

QMUI Web 前端框架：一個(gè)旨在提高 UI 開發(fā)效率、快速產(chǎn)生項(xiàng)目 UI 的前端框架，來(lái)自騰訊廣研 QMUI 團(tuán)隊(duì)。

（初來(lái)乍到，本文搬運(yùn)自我4月份在知乎發(fā)的文章。鏈接：https://zhuanlan.zhihu.com/p/...） 前段時(shí)間聽部門老大說(shuō)，Airbnb出了個(gè)移動(dòng)端的動(dòng)畫庫(kù)Lottie，可以和一個(gè)名叫Bodymovin的AE插件結(jié)合起來(lái)，把在AE上做好的動(dòng)畫導(dǎo)出為j…

BEM 是由 Yandex 團(tuán)隊(duì)提出的一種前端命名方法論，是一個(gè)非常有用，強(qiáng)大，簡(jiǎn)單的命名約定，可以讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確而且更加嚴(yán)密。 我修改了我的html命名，感覺(jué)上結(jié)構(gòu)更加清晰而且觀察了一下微信的頁(yè)面，頭部和底部是不變的，每…

CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅，歡迎推薦補(bǔ)充！

Flex布局 display: flex; 將對(duì)象作為彈性伸縮盒展示，用于塊級(jí)元素 display: inline-flex; 將對(duì)象作為彈性伸縮盒展示，用于行內(nèi)元素 注意兼容問(wèn)題： webkit內(nèi)核瀏覽器應(yīng)使用前綴-webkit IE瀏覽器，可以很好的兼容IE11+版本，對(duì)于…

隨著瀏覽器對(duì)蒙版（mask）的支持越來(lái)越好，在web開發(fā)中使用蒙版（mask）也變得越來(lái)越流行，使用它可以實(shí)現(xiàn)一些非常好的視覺(jué)效果。

讓我們先來(lái)定義：一個(gè)CSS工具集庫(kù)是一個(gè)擁有許多可用于做許多一次性小事的樣式表。如調(diào)整margin和padding的類。設(shè)置顏色的類。設(shè)置具體樣式屬性的類。設(shè)置尺寸的類。工具集庫(kù)會(huì)用不同的方式來(lái)實(shí)現(xiàn)這些東西,但更像是分享這種理念。

簡(jiǎn)介 在過(guò)去的兩年，越來(lái)越多的同事、朋友和其他不認(rèn)識(shí)的童鞋進(jìn)行移動(dòng)web開發(fā)的時(shí)候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂(lè)趣。（當(dāng)然transformjs不僅僅支持移動(dòng)設(shè)備，支持CSS3 3D Transforms的瀏覽器都…

實(shí)現(xiàn)主要是基于threejs做的，接下來(lái)我會(huì)分別講解各部分的實(shí)現(xiàn)，不過(guò)不會(huì)介紹基礎(chǔ)。基礎(chǔ)內(nèi)容可以去官網(wǎng)找到~ scene的background可以接收Color、Texture或CubeTexture。在本示例中，我們使用Texture就可以達(dá)到漸變效果。Texture可以接收…

現(xiàn)在我們經(jīng)常會(huì)用到一些地圖應(yīng)用，無(wú)論是在網(wǎng)頁(yè)上還是手機(jī)App中，地圖貌似是一個(gè)不可或缺的應(yīng)用。本文將帶領(lǐng)大家一起來(lái)看看一些基于jQuery和HTML5的個(gè)性化地圖插件，有幾款地圖比較實(shí)用，有些則是具有抽象的概念，很有個(gè)性化。
這是一款基于HTML5的世界地圖應(yīng)用，它的特點(diǎn)是可以…

前段時(shí)間拜讀阮老師的 《ECMAScript 6 入門》 ，看到官網(wǎng)上每個(gè)章節(jié)的頁(yè)面都有一個(gè)類似進(jìn)度條的東西，出于好奇，上網(wǎng)查了一下，發(fā)現(xiàn)這個(gè)東西叫Scroll Indicator. Scroll Indicator：滾動(dòng)指示器。通俗來(lái)說(shuō)，就是當(dāng)前可視區(qū)域距離頁(yè)面頂部的占比，效…

CSS3的動(dòng)畫相關(guān)的基礎(chǔ)的屬性基本都涉獵過(guò)了，個(gè)人認(rèn)為，其中最復(fù)雜的是d:path()路徑變形動(dòng)畫，超過(guò)3D，而位移、軌跡、旋轉(zhuǎn)、縮放、斜切什么的，相對(duì)簡(jiǎn)單一些，但作為非動(dòng)畫設(shè)計(jì)師而言，靈活的掌握這些基本的動(dòng)畫加以無(wú)窮無(wú)盡的變換，就已經(jīng)能做出很多華麗麗的效果了，這篇呢，源于做一…

本文主要對(duì) CSS 布局中常見的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)lexbox 布局，等等。

10 個(gè)獨(dú)特的 CSS 背景視覺(jué)效果

一套適用于桌面端的樣式庫(kù)，包含文本、列表、表格、表單、柵格系統(tǒng)等基礎(chǔ)樣式和十余個(gè)組件，兼容主流瀏覽器及IE10+。 DXY-UI 專注于樣式，不涉及組件，無(wú)“侵入性”，獨(dú)立于項(xiàng)目的技術(shù)選型。 世界上已經(jīng)有了太多美麗的輪子，但這不是后人停止造輪子的理由。丁香園的產(chǎn)品線十分龐雜，在…

本文思維導(dǎo)圖，歡迎補(bǔ)充 本文首發(fā)于我的個(gè)人網(wǎng)站：http://cherryblog.site 前言 溫馨提示：本文較長(zhǎng)，圖片較多，本來(lái)是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

動(dòng)效這兩年崛起非常之迅猛，幾乎是網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域最強(qiáng)大的設(shè)計(jì)趨勢(shì)之一。無(wú)論是在設(shè)計(jì)師群體還是在用戶當(dāng)中，它的受歡迎程度都非常之高，大家都對(duì)它津津樂(lè)道。
從微妙的轉(zhuǎn)場(chǎng)動(dòng)效到覆蓋整個(gè)頁(yè)面的大范圍動(dòng)效，它幾乎無(wú)處不在。動(dòng)效的運(yùn)用讓網(wǎng)頁(yè)中的元素邏輯變化關(guān)系清晰地表述出來(lái)，還將影視化的體驗(yàn)引…

早上無(wú)意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動(dòng)畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + CSS3動(dòng)畫實(shí)現(xiàn)的，頓時(shí)激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發(fā)現(xiàn)原理居然是如此簡(jiǎn)單：多個(gè)SVG描邊動(dòng)畫使用不同的ani…

透明文字，模糊文字，鏤空文字，漸變文字，圖片背景文字，用CSS讓你的文字也有freestyle～

在本文中，我不會(huì)去談 React、Angular、Vue 等等這些大的前端框架，也不會(huì)談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡(jiǎn)單的分享一套我認(rèn)為有助于提升開發(fā)者工作流的工具集。