国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【項目記錄】個人主頁設計和實現

hiYoHoo / 3030人閱讀

摘要:生活記錄日志畫書音影,豆瓣再合適不過??ㄆ瑒赢嬓Ч疫吙蚰M光標,一個邊框顏色透明實色透明的無限動畫寬度控制字符顯示長度,使用函數將動畫分段,產生間隔效果項目倉庫線上效果主內容區布局豆瓣卡片動畫頁腳設計卡片動畫

思路

希望有一個站點可以歸并技術文章、產品探索、生活記錄和項目代碼。

技術文章
Hexo活躍齊全的生態的確很誘人,但通過Github管理文章、圖片資源其實并不是很優雅。再者,存在流通和傳播上的問題?,F有的專欄平臺支持標簽和交流功能,也可手動設計標題代替類別目錄,夠夠的,于是選擇了segmentfault。

產品探索
研究一些好用的應用,個人對產品的思考,記在知乎專欄。

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

項目代碼
自然是GitHub。

個人站點即一個集中入口,簡單明了的首頁+個人介紹頁,完畢。

開發流程

在iPad上畫了個草圖,四個明晃晃的入口,要有Logo。

各種分辨率的屏上表現不差勁,用SVG。

資源請求盡量簡單,SVG樣式可控,svg-sprite,那得上gulp了。

gulp處理完的symbol要插入頁面,加上入口項復用,用模板吧,熟悉的是handlebars。

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

為什么一個簡單的頁面要搞那么復雜,練手而已。

開發記錄 gulp4 的更新

gulp默認裝了4.0.0的版本,很久沒關注。

增加gulp.seriesgulp.parallel

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

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

gulp.parallel("watch", "connect") // 同時執行watch和connect
gulp.series("clean", gulp.parallel("styles", "scripts")) // 先執行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)
異步任務需要結束信號

當任務中可能有異步代碼(比如watch,比如dev-server),需要顯示發出異步完成信號

在Gulp 3.x中,你可以在不這樣做的情況下離開。如果您沒有顯式地發出異步完成信號,則只會假設您的任務是同步的,并且在任務函數返回后立即完成。 Gulp 4.x在這方面更加嚴格。您必須明確表示任務完成。

支持的寫法挺潮的

卡片布局 思路

svg需要設定寬度和高度,如果跟隨卡片變化,卡片不能使用padding-bottom實現寬高比(沒有高度),所以卡片必須指定寬高。可以使用媒體查詢調整卡片尺寸,目前使用固定寬度實現(未測試大屏下情況)。
實現四張卡片對齊排布,四列兩列到一列分布。flexbox搭配flex-wrap屬性可以實現自動換行,結合媒體查詢控制容器寬度實現列數控制。

卡片動畫

typing效果
右邊框模擬光標,一個邊框顏色透明->實色->透明的無限動畫
寬度控制字符顯示長度,使用step函數將動畫分段,產生間隔效果

DONE

項目倉庫:https://github.com/curlywater...
線上效果:https://curlywater.github.io/...

主內容區布局

豆瓣卡片動畫

頁腳設計

Github卡片動畫

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117108.html

相關文章

  • 解析Twitter前端架構 學習復雜場景數據設計

    摘要:總結本文分析了在采用架構下的數據設計結構,在一個復雜的場景下,希望引起讀者對能有一個更深入的認識。 前幾天刷Twitter,發現Nicolas(Engineering at @twitter. Technical Lead for Twitter Lite)發布了這么一條推文: showImg(https://segmentfault.com/img/remote/1460000009...

    csRyan 評論0 收藏0
  • 設計師的春天:中文WebFont解決方案Font-Spider(字蛛)

    摘要:針對以上的問題,我們可以得出中文要解決的問題是壓縮和轉碼。主頁中文字體演示與工具使用請前往主頁項目實踐年接到的最后一個項目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式,更加簡潔大氣。 我們在日常需求中,經常會碰到視覺設計師對某個中文字體效果非常堅持的情況,因為頁面是否高大上,字體選擇是很重要的一個因素,選擇合適的字體可以讓頁面更優雅。面對這種問題,我們通常以下方式來進...

    dreambei 評論0 收藏0
  • 【Java EE】從零開始寫項目【總結】

    摘要:目前該功能并未完善,敬請期待。反正每次都會有新的東西補充上去一開始我本來想做的是可以使用微信登陸,也可以使用賬戶郵箱登陸,也可以使用短信登陸的。后來發現微信登陸要企業認證,做不了。 從零開發項目概述 最近這一直在復習數據結構和算法,也就是前面發出去的排序算法八大基礎排序總結,Java實現單向鏈表,棧和隊列就是這么簡單,十道簡單算法題等等... 被虐得不要不要的,即使是非常簡單有時候繞半...

    imtianx 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<