整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
長(zhǎng)假到來了，大家五一長(zhǎng)假有什么節(jié)目呢？不妨可以在留言區(qū)分享下游玩的攻略！
前段時(shí)間在瀏覽github的時(shí)候，無意中發(fā)現(xiàn)了這樣一個(gè)項(xiàng)目！它羅列了50+個(gè)基于HTML/CSS跟Javascript實(shí)現(xiàn)的小型網(wǎng)頁項(xiàng)目，號(hào)稱是可以讓你50+天學(xué)習(xí)使用不帶重樣的。老碼硬是不厭其煩的把每個(gè)項(xiàng)目的demo都點(diǎn)了一遍過去，確實(shí)無論是樣式還是特效都可謂是美輪美奐，愛不釋手！恨不得麻煩就能把它們應(yīng)用到自己的網(wǎng)頁中。那么我們先來看看其中的一些吧，因?yàn)閷?shí)在太多了，本文實(shí)在羅列不過來，喜歡的朋友可以到開源地址看看，地址我放文末了！
擴(kuò)充卡片，點(diǎn)擊后顯示另外的卡片效果
進(jìn)度步驟條，點(diǎn)擊可進(jìn)入下一步的特效
酷炫的旋轉(zhuǎn)導(dǎo)航動(dòng)畫
分頁動(dòng)畫
動(dòng)態(tài)的登錄頁模版
漂亮的倒計(jì)時(shí)特效
等等類似的這樣的HTML/CSS Javascript項(xiàng)目有50+個(gè)，可以說是應(yīng)有盡有了，假如你是一個(gè)網(wǎng)頁設(shè)計(jì)師，或者美工，亦或者是前端開發(fā)者或者想學(xué)習(xí)前端的后端開發(fā)者，我想這些項(xiàng)目都是很不錯(cuò)的資源。都是有直接源碼可以參考學(xué)習(xí)的
針對(duì)這些項(xiàng)目，你可以學(xué)習(xí)到一些設(shè)計(jì)靈感，你可以學(xué)到如何使用網(wǎng)頁特效，你可以學(xué)習(xí)到漂亮的樣式效果等等。總而言之，這個(gè)項(xiàng)目我個(gè)人認(rèn)為是非常值得學(xué)習(xí)推薦的，喜歡的童鞋們具體可以去看一下下。我相信你們是可以看有所得的。對(duì)了，如果你覺得這篇寫的東西對(duì)你有用，就分享下吧！
開源地址：https://github.com/bradtraversy/50projects50days
熱門開源及工具推薦
22.9K star！后端&運(yùn)維必備神器，推薦！
天來實(shí)現(xiàn)一個(gè)特殊圖形的旋轉(zhuǎn)，這個(gè)圖形類似于鉆石
通過樣式動(dòng)畫調(diào)節(jié)，讓其運(yùn)動(dòng)旋轉(zhuǎn)起來，感興趣的小伙伴多多支持！
首先分析該圖形的組成，可分成上下兩大部分，上面包含六個(gè)正三角形，下面有6個(gè)倒三角形！
css實(shí)現(xiàn)正三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 0 50px 170px 50px; border-bottom-color: rgba(255,0,0,0.5)
css實(shí)現(xiàn)倒三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 170px 50px 0 50px; border-top-color: rgba(255,0,0,0.5)
然后提供一個(gè)3D環(huán)境，給外層盒子添加 transform-style: preserve-3d;flat 所有的子元素在2D平面中;preserve-3D 所有的子元素 在3D 平面中
具體代碼看下面
html結(jié)構(gòu)：
css樣式：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
