2019 3 20 21 大白製作2

2021-09-13 01:30:02 字數 1938 閱讀 1388

接上篇繼續製作,我覺得製作到這一步,已經可以明確我的設計目的,也滿足了之前的圖形設計需求。

1、那就是 頭 腳 胳膊 分別定位乙個元素 那就是身體。不要想方設法移動去拼湊部位的位置。

2、計算好身體寬高後,可以進行0誤差,準確定位頭部,胳膊,腿的位置,如下圖。

2、在製作手臂的時候,是乙個小難點,大多數人,會為了追求當時效果,而去transform: rotate( 50px)一開始就移動手臂位置,問題確實沒有,但是手中還有2個手指,那時你再去定位手指 你就會暈頭轉向,因為整體的布局以及被旋轉了。

但是可以先旋轉手指。還有乙個就是旋轉點的位置。

旋轉預設是圖形正**,我們必須手動調整至合適位置。

差不多快成型了,這裡腿部用到乙個border-radius的另一種寫法。border-top-left-radius,控制單邊的弧度

這裡我**有一處錯誤。必須指出。那就是我把手臂和手指,關係設為了父子。

其實如果子集定位父集,那麼子集合永遠浮在父集上層。所以應該將

手臂和手指設為同級。

但是呢,其實我又沒錯。因為如果將兩者設為同級,那麼手指絕對定位就不是手臂了,就是身體。那麼其實不合情合理。

但是你將兩者都同級,那麼定位就得自己去計算尺寸,考慮到手是白色的,可以和手臂重合我就不改動了。

2023年3月20日17:58:31,大概花了40分鐘調式。

但是我覺得不僅僅於此,先吃個晚飯。然後散個步,回來我要大動干戈了,讓大白立體起來,

這是昨天晚上花了2小時才搞出來的。進度太慢,不過整體感覺有點了。硬說我學到了什麼,那就是調色的耐心,以及漸變的顏色深淺 色域廣度調整。rotatex軸旋轉的加深認識。

為了追求細節,我想純css做個大白的胸口圖案。第乙個想法就是通過三角的方式,讓寬度撐開,製成乙個梯形,再通過before偽元素複製乙個90%大小的梯形,去覆蓋上乙個梯形的部分區域,達到

這種效果,但是我仔細一想,很難實現。

首先元素不是純梯形,實際寬高撐開的而是圓,而且上頂部必留顏色。所以偽元素即便造出來,也會將梯形全部覆蓋。

那我就想到了第二條路,就是通過3d旋轉,視差的方式製造乙個平面圖示。

然後開始3d旋轉

再用偽元素 before 和after 完成剩餘部分.

其實我做的還不是最完美的純css仿製圖案。以後慢慢進步。

成品如下:

接下來就是去實驗樓比對一下**的差異。

撇開動畫效果,實驗樓的**更為簡潔。而我的重複**太多。

其他都大同小異了。

FIS3 大白話 一

1.fis3可以用fis.set進行一些全域性的配置,包括忽略檔案 檔案字尾處理型別 原始碼過濾等等,用fis3.get可以得到配置資訊,詳見 全域性屬性部分 2.fis3 作為工程化工具,完成的就是 單檔案編譯 打包 的過程,而這個過程用到的無外乎檔案匹配和某些外掛程式 fis.match 用於檔...

大屏模板製作

設計大屏駕駛艙遵循四個基本步驟 布局排版 色彩 點綴效果 動畫。業務部門的需求,是要重點展現集團銷售總額資料以及各地區的資料,其他次要內容包括歷年銷售對比 各產品線銷售 熱門產品 實時交易 新老客戶佔比等。我們從常見的幾種主次分布排版樣式裡挑選了一種作為此次的版面,如下圖所示 由於集團業務遍布全國,...

振動測試大白話(一) 大白話解釋啥是衝擊響應譜

摘要 有的振動測試行業同行除了要測試結果,也願意交流一下計算的過程,涉及到的計算知識比較多,有的也難以理解。為了讓大家盡可能簡單地理解這些概念,今天開始就逐步分享一些大白話振動測試知識。本篇講衝擊響應譜。於網路 為了檢驗可靠性,很多產品需要做衝擊實驗。對於易於實現的實驗,可以用真實工況或簡單的實驗裝...