整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
許，你認為 CSS 只能用來控制網頁的結構與樣式，但它的功能和應用卻超乎你的想象。從逼真的圖像到特效動畫，優秀的開發者利用它已創造了無數種可能。
在本文中，我們精選了純 CSS 實現的濾鏡以及各種效果，與大家分享。它們都是開源的網頁設計相關項目。除了體驗之外，有興趣的話，你還可以嘗試來實現它們。
哇！如果你對太空場景情有獨鐘，那么一定會被這個 CSS 實現的太陽系動畫所震撼。作為空間學與物理學愛好者，作者參照了太陽系軌道運行的真實時間進行設計，意味著每個行星都有相對地球年的時間，準確的圍繞太陽公轉。
項目地址：
https://codepen.io/kowlor/pen/ZYYQoy
對于網站性能來說，動畫是眾人皆知的問題引發者。如果優化不佳，它們會直接影響頁面的打開速度。而這個 CSS 實現的漂亮的漸變動畫，卻相當的輕量，不僅易于編輯，而且支持自定義顏色。
項目地址：
https://codepen.io/P1N2O/pen/pyBNzX
實現一款簡單的游戲，并不一定需要 JS 的幫助，純 CSS 也能夠創造一款界面漂亮的 Stack 游戲。當然，游戲看似容易，背后的設計并非那么簡單。
項目地址：
https://codepen.io/finnhvman/pen/xJRMJp
這是一款漂亮、輕量、易于定制的進度條開源項目。進度條采用 3D 制作，同時擁有清澈的外觀，你甚至可以將它們變成迷你 3D 圖表！
項目地址：
https://codepen.io/rgg/pen/QbRyOq
故障風格的文本總會讓人有眼前一亮的感覺，而這個項目就是純 CSS 實現的故障效果。如果你想為網站增添酷炫的故障效果，那么不妨多了解下。
項目地址：
https://codepen.io/lbebber/pen/ypgql
CSS 的能量超乎你想象，你甚至還可以利用它制作出藝術品效果。Francine 就是一個純 CSS 制作、展示的 18 世紀風格的繪畫作品。或許，你會驚訝 CSS 實現的效果竟能如此逼真。
項目地址：
https://github.com/cyanharlow/purecss-francine
這個項目與《Francine》有異曲同工之處，它僅使用 CSS 和 HTML 便實現了手機界面效果，而且效果可以同網站照片相媲美。如果你有興趣，可詳細的了解其實現的過程。
項目地址：
https://codepen.io/Wujek_Greg/pen/LmrweG
利用 JS 創造一個簡單的 3D 地圖？不用那么復雜，純 CSS 就可以搞定。怎么樣，看上去還不錯吧！
項目地址：
https://codepen.io/onediv/pen/NrNebj
想為你的網站添加一些 Instagram 風格的圖片濾鏡效果？那么，純 CSS 實現的 Instagram 風格的濾鏡庫 —— Instagram.css 一定是你的菜。它的靈感來源于 CSSgram.
項目地址：
https://picturepan2.github.io/instagram.css/
這是一個純 CSS 實現的漸變幽靈按鈕。漂亮的動畫和漸變效果，是不是很酷呢？相信，它可以很好的融入到任何網站之中。
項目地址：
https://codepen.io/ARS/pen/vEwEPP
如果你想在網站增添 iPhone X、iPhone 8 等移動設備用于展示的話，那么一定不要錯過 Devices.css. 它是一個使用了純 CSS 實現主流移動設備的庫，并以現代設備為模版。
項目地址：
https://picturepan2.github.io/devices.css/
這是一個很酷的純 CSS 實現的項目。你只需要通過電腦自帶的選色器，就能輕松地更換圖像的顏色，來試試吧！
項目地址：
https://codepen.io/noahblon/pen/ZbjmbK
利用 JS，我們能實現各種讓人驚嘆的頁面/動畫效果，但 JS 并不是最輕量的解決方案。如果合理使用 CSS，你依然可以實現一些炫酷的效果，并且它對性能的影響會小得多。當然，無論你使用哪種方式（JS or CSS），你都可以創造出創意且有趣的作品。
以上的作品，你最喜歡哪一個？歡迎評論與我們分享。
感謝你的閱讀。若你有所收獲，歡迎點贊與分享。
注：
英文原文：12 Incredible Pure CSS Experiments
作者：Brenda Stokes Barron
譯者：IT程序獅
譯文地址：
https://zhuanlan.zhihu.com/p/58424141
ss是前端領域的一個難纏戶，一提到css，沒有人會說難，也沒有人愿意承認自己不會寫，甚至在面試的過程中css相關的內容都很少提及，足以說明大家對css的不重視。你真的會寫css嗎？
關于css有兩類問題值得我們重視：樣式和工程。樣式問題指的是具體的效果實現，能否實現某個效果，同一個效果有多種實現方式，如何抉擇；工程問題是如何在大型項目中寫出可維護性、可讀的css。
在各種論壇中經常看到關于css是否是一門編程語言的爭論。在我看來，最好用對待編程語言的態度來看待css，不要忽視css，否則，在項目后期，你會發現，你的css越來越混亂，important會越來越多，不同位置的類名互相沖突覆蓋，改一個類的樣式，要檢查整個項目的頁面是否受到影響，項目內部的css共享完全依賴拷貝……從這個角度來說，你敢說css不是編程語言？它完全有了像編程語言一樣能把你搞得焦頭爛額的能力。而這一切都來源于你在一開始對她的忽視與不屑。出來混，總要還的啊！
盲目的定義基礎樣式
在項目開始之初，拿到UI設計稿，信心滿滿地開始定義css的全局基礎樣式，謝天謝地，css對這一點支持得很徹底，一處定義，所有頁面都可以引用。
先來一個color-red。
.color-red {
color: red
}這樣，在整個項目中，都可以給任意元素添加一個color-red類，美滋滋，我真是個小機靈鬼！
幾個迭代過去，你已經把color-red這面紅旗插滿了整個項目。UED說，咱們改個版，所有紅色的文本改為藍色，紅色的link不變！
嗶！——（你發出的聲音）
你又得屁顛屁顛地把一個一個的紅旗拔出來，再插上藍色的旗子（因為你不敢不干呀）。
命名沖突
在一個頁面，你定義了一個.header，寫了個完美的特效，發布到dev一看，就是不管用，橫看豎看，本地是好的啊，神奇（生氣）！過了若干時間的排查，另一個同事在另一個地方也寫了一個.header，完美的覆蓋了你的。把你頭打歪！
編輯器可不會提醒你哦！
慢慢你會發現，這種命名沖突可太頻繁了呀！頭大，要不要用上css modular啊？
子類覆蓋
有的小伙伴聰明地將類名嵌套定義，這就不會沖突了吧？嘿嘿，你想多了！
/* in article.css */
.article .title {
border-bottom: 1px solid;
font-size: 1.5em;
}
/* in widget.css */
.widget .title {
color: gray;
text-transform: uppercase;
}如果在dom樹里面，article和widget在一棵樹的路徑上，你說title是沖突呢還是不沖突呢？
以上的這些問題，在項目中相信大家都遇見過，并且項目越大，出現的概率就越高，最后就會演變成一座[屎]山。
“大家都別動，牽一發而動全身哦！”
“這就是蝴蝶效應吧？？？”
難道css這些問題就沒法解決了嗎？當然不是，我們來看看大神們是如何解決這些問題的。
BEM是Block、Element、Modifier的縮寫，是一個類命名的規范。
首先我們來看一個例子：
/* Block */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}相信小伙伴們已經有了一個初步的認知：
Block是一個獨立的組件（元素），定義的了“組件是什么，按鈕？還是菜單？”。
Element是屬于Block，是依賴于Block的元素，描述的是“Block里面的什么？比如，文本？圖標？”
Modifier用于描述Block或者Element的外在表現，比如大小、顏色、狀態等。
看一個例子：
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button search-form__button_size_m">Search</button>
</form>search-form是Block；
search-form_theme_islands是Modifier，描述了theme為islands的search-form；
search-form__input是Element，描述的是search-form內部的input元素；
search-form__button是Element，描述的是search-form內部的button元素；
search-form__button_size_m是Modifier，描述的是size為m的search-form__button；
這樣寫css是不是非常的清晰？瞬間就提高了可讀性和可維護性？
概念如此簡單，還不趕緊多了解一下？
另外，可能有些小伙伴也注意到了，Block和Element使用雙下劃線分隔，和Modifier是用中劃線分隔，這也不是一成不變的，可以按照自己的喜好來決定如何分割。
有些小伙伴可能會有疑問，BEM和Saas、Css Module有什么區別？解決的問題是一樣的嗎？
Sass是css的預處理器，在寫css的時候定義了一套規范，經過編譯處理后輸出為css，和BEM是兩個不同的概念。使用saas或less也能實現BEM。BEM其實是不推崇類名的嵌套定義的，如果想像sass那樣嵌套的寫出標準的BEM，可以使用@at-root。
Css Module解決的問題是多個模塊的css的命名沖突問題，個人覺得是傻瓜式解決方案，在應用層的css-in-js應用比較多，適合css入門選手。要想寫好css，還是得從根本上入手呀！
最近在 GitHub 上發現了一個 vanillawebprojects[1] 開源倉庫，里面收集了 20 個 JavaScript+Html+CSS的練手項目，沒有使用任何框架，可以讓你從基礎入門到深入學習。這些項目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 課程的一部分，但是如果你已經擁有了一些基礎，不妨試著看一下源碼，然后模仿實現吧
判斷輸入的表單字段是否合法
一個簡單的電影座位預定演示項目
一個簡單的網頁視頻播放器
計算不同貨幣的兌換匯率
練習如何操作 DOM 數組
練習如何彈出登錄注冊窗口，以及滑動彈出菜單
練習如何判斷隱藏字符是否正確
簡單的點餐查詢應用
簡單的購物車結算應用
簡單的網頁音樂播放器
網頁無限向下滾動實現
簡單的打字輸入游戲
文本閱讀器
測試記憶的記憶卡片
網頁歌詞搜索器
模擬呼吸的節奏
簡單的網頁破冰游戲
網頁新年倒計時
網頁財富榜單
說出數字，猜測數字
今天我們給大家分享了，20 個 JavaScript+Html+CSS 練手小項目，大家覺得哪個最簡單，哪個最復雜呢？趕緊去 Github 倉庫拉取項目，碼上行動吧
歡迎關注公眾號：KnowHub 知識加油站！
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
