成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【項(xiàng)目記錄】個(gè)人主頁設(shè)計(jì)和實(shí)現(xiàn)

hiYoHoo / 3059人閱讀

摘要：生活記錄日志畫書音影，豆瓣再合適不過?？ㄆ瑒?dòng)畫效果右邊框模擬光標(biāo)，一個(gè)邊框顏色透明實(shí)色透明的無限動(dòng)畫寬度控制字符顯示長(zhǎng)度，使用函數(shù)將動(dòng)畫分段，產(chǎn)生間隔效果項(xiàng)目倉庫線上效果主內(nèi)容區(qū)布局豆瓣卡片動(dòng)畫頁腳設(shè)計(jì)卡片動(dòng)畫

思路

希望有一個(gè)站點(diǎn)可以歸并技術(shù)文章、產(chǎn)品探索、生活記錄和項(xiàng)目代碼。

技術(shù)文章
Hexo活躍齊全的生態(tài)的確很誘人，但通過Github管理文章、圖片資源其實(shí)并不是很優(yōu)雅。再者，存在流通和傳播上的問題?，F(xiàn)有的專欄平臺(tái)支持標(biāo)簽和交流功能，也可手動(dòng)設(shè)計(jì)標(biāo)題代替類別目錄，夠夠的，于是選擇了segmentfault。

產(chǎn)品探索
研究一些好用的應(yīng)用，個(gè)人對(duì)產(chǎn)品的思考，記在知乎專欄。

生活記錄
日志、畫、書音影，豆瓣再合適不過。

項(xiàng)目代碼
自然是GitHub。

個(gè)人站點(diǎn)即一個(gè)集中入口，簡(jiǎn)單明了的首頁+個(gè)人介紹頁，完畢。

開發(fā)流程

在iPad上畫了個(gè)草圖，四個(gè)明晃晃的入口，要有Logo。

各種分辨率的屏上表現(xiàn)不差勁，用SVG。

資源請(qǐng)求盡量簡(jiǎn)單，SVG樣式可控，svg-sprite，那得上gulp了。

gulp處理完的symbol要插入頁面，加上入口項(xiàng)復(fù)用，用模板吧，熟悉的是handlebars。

既然上了gulp，干脆SCSS，livereload，dev-server都搞一搞。

為什么一個(gè)簡(jiǎn)單的頁面要搞那么復(fù)雜，練手而已。

開發(fā)記錄 gulp4 的更新

gulp默認(rèn)裝了4.0.0的版本，很久沒關(guān)注。

增加gulp.series和gulp.parallel

gulp默認(rèn)最大化并行執(zhí)行任務(wù)，以往需要順序執(zhí)行任務(wù)時(shí)，需要借助輔助插件run-sequence之類。上述兩個(gè)方法提供串行和并行選擇，同時(shí)gulp4中不再支持[task]寫法，必須使用上述兩個(gè)方法代替。

gulp.series("clean", "build"); // 先執(zhí)行clean task，再執(zhí)行build task
gulp.series("clean", function () {
    // do some things
});

gulp.parallel("watch", "connect") // 同時(shí)執(zhí)行watch和connect
gulp.series("clean", gulp.parallel("styles", "scripts")) // 先執(zhí)行clean，然后styles + scripts

gulp.watch("src/**/*.js", ["scripts"]) // error: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
異步任務(wù)需要結(jié)束信號(hào)

當(dāng)任務(wù)中可能有異步代碼（比如watch，比如dev-server），需要顯示發(fā)出異步完成信號(hào)

在Gulp 3.x中，你可以在不這樣做的情況下離開。如果您沒有顯式地發(fā)出異步完成信號(hào)，則只會(huì)假設(shè)您的任務(wù)是同步的，并且在任務(wù)函數(shù)返回后立即完成。 Gulp 4.x在這方面更加嚴(yán)格。您必須明確表示任務(wù)完成。

支持的寫法挺潮的

卡片布局 思路

svg需要設(shè)定寬度和高度，如果跟隨卡片變化，卡片不能使用padding-bottom實(shí)現(xiàn)寬高比（沒有高度），所以卡片必須指定寬高?？梢允褂妹襟w查詢調(diào)整卡片尺寸，目前使用固定寬度實(shí)現(xiàn)（未測(cè)試大屏下情況）。
實(shí)現(xiàn)四張卡片對(duì)齊排布，四列兩列到一列分布。flexbox搭配flex-wrap屬性可以實(shí)現(xiàn)自動(dòng)換行，結(jié)合媒體查詢控制容器寬度實(shí)現(xiàn)列數(shù)控制。

卡片動(dòng)畫

typing效果
右邊框模擬光標(biāo)，一個(gè)邊框顏色透明->實(shí)色->透明的無限動(dòng)畫
寬度控制字符顯示長(zhǎng)度，使用step函數(shù)將動(dòng)畫分段，產(chǎn)生間隔效果

DONE

項(xiàng)目倉庫：https://github.com/curlywater...
線上效果：https://curlywater.github.io/...

主內(nèi)容區(qū)布局

豆瓣卡片動(dòng)畫

頁腳設(shè)計(jì)

Github卡片動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117108.html

相關(guān)文章

  • 解析Twitter前端架構(gòu) 學(xué)習(xí)復(fù)雜場(chǎng)景數(shù)據(jù)設(shè)計(jì)

    摘要：總結(jié)本文分析了在采用架構(gòu)下的數(shù)據(jù)設(shè)計(jì)結(jié)構(gòu)，在一個(gè)復(fù)雜的場(chǎng)景下，希望引起讀者對(duì)能有一個(gè)更深入的認(rèn)識(shí)。 前幾天刷Twitter，發(fā)現(xiàn)Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）發(fā)布了這么一條推文： showImg(https://segmentfault.com/img/remote/1460000009...

    csRyan 評(píng)論0 收藏0

  • 設(shè)計(jì)師的春天：中文WebFont解決方案Font-Spider(字蛛)

    摘要：針對(duì)以上的問題，我們可以得出中文要解決的問題是壓縮和轉(zhuǎn)碼。主頁中文字體演示與工具使用請(qǐng)前往主頁項(xiàng)目實(shí)踐年接到的最后一個(gè)項(xiàng)目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡(jiǎn)潔大氣。 我們?cè)谌粘Ｐ枨笾校?jīng)常會(huì)碰到視覺設(shè)計(jì)師對(duì)某個(gè)中文字體效果非常堅(jiān)持的情況，因?yàn)轫撁媸欠窀叽笊?，字體選擇是很重要的一個(gè)因素，選擇合適的字體可以讓頁面更優(yōu)雅。面對(duì)這種問題，我們通常以下方式來進(jìn)...

    dreambei 評(píng)論0 收藏0

  • 【Java EE】從零開始寫項(xiàng)目【總結(jié)】

    摘要：目前該功能并未完善，敬請(qǐng)期待。反正每次都會(huì)有新的東西補(bǔ)充上去一開始我本來想做的是可以使用微信登陸，也可以使用賬戶郵箱登陸，也可以使用短信登陸的。后來發(fā)現(xiàn)微信登陸要企業(yè)認(rèn)證，做不了。 從零開發(fā)項(xiàng)目概述 最近這一直在復(fù)習(xí)數(shù)據(jù)結(jié)構(gòu)和算法，也就是前面發(fā)出去的排序算法八大基礎(chǔ)排序總結(jié)，Java實(shí)現(xiàn)單向鏈表，棧和隊(duì)列就是這么簡(jiǎn)單，十道簡(jiǎn)單算法題等等... 被虐得不要不要的，即使是非常簡(jiǎn)單有時(shí)候繞半...

    imtianx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<