2019年8月19日 星期一

[三國創傑傳] 夏候惇トールギスⅢ(夏侯惇托爾吉斯Ⅲ)

P1200578

三國創傑傳魏國(區)的第三隻就是曹操的好兄弟夏侯惇托爾吉斯Ⅲ啦,這次用托爾吉斯Ⅲ大概是為了要用鋼彈 W 系然後又因為有 I, II, III所以可以來當兄弟,目前也確定托爾吉斯會是夏侯淵了,就不知道是否會有托爾吉斯II了。

P1200572P1200573P1200574

一眼就能看出原型是托爾吉斯Ⅲ,瞎了一隻眼的部分不明顯,而且這次很奇怪的是這次不管原本是不是鋼彈臉都要在下面有一個鋼彈臉,大概還是有鋼彈臉可以賣得比較好吧,這隻就是用一個透明的零件遮住,拿下來就是鋼彈臉了。

P1200575P1200576

武器就真的不大想吐槽了,因為背景的關係(?)所以任何現代化的武器都可以直接拿來用,夏侯惇的武器就是跟原本的托爾吉斯Ⅲ一樣沒有太明顯的變化。

P1200577

可動性也是可以接受的範圍,補色的部分就腳部跟腰部有些地方要塗成白色,還算好處理,黃色的零件也都塗成金色後再把貼紙貼上去就還不錯了。

P1200578P1200579P1200580

Read more

2019年8月18日 星期日

CSS 的 content 與應用

content 是一個可以用來無中生有的 CSS 屬性,這邊先來看一個簡單的例子:

,我是

本來我們只有一個這樣的內容,那如果我們要在前後都無中生有加上東西,就可以像這樣用 css:
.content::before{
  content: "大家好";
}
.content::after{
  content: "紅色死神";
}

這邊我們使用 ::before 跟 ::after,照字面看大概可以知道我們就是在選擇器的前後加上東西,而加上的就是我們自訂的文字內容,結果如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.



content 可以使用的值有以下幾種:
1. 文字
2. unicode
3. attr
4. url
5. counter 函數
6. css變數

2. unicode
剛才我們看過純文字了,接下來看 unicode,unicode 是瀏覽器內建的特殊符號,比如說這邊我們就用 \2103 來自動產生攝氏溫度的單位:

See the Pen
css: content unicode
by deathhell (@deathhell)
on CodePen.



3. attr
attr 指的是 html 的屬性,這邊我們示範利用自訂屬性把值給帶到 content 裡
現在天氣:

再利用 css 去拿 data 裡的值
.content::after{
  content: attr(data-weather);
}

結果如下:

See the Pen
css: content attr
by deathhell (@deathhell)
on CodePen.



4. url
url 可以直接去拿一個線上的內容,比如說圖片的網址

See the Pen
css: content url
by deathhell (@deathhell)
on CodePen.



5. counter 函數
counter 是一個有趣的東西,我們必須先認識這些跟 counter 有關的屬性,也就是 counter-reset 跟 counter-increment
counter-reset: 自訂一個要當 counter 的變數,後面可以帶預設的值
counter-increment: 要如何累進,可填正數或負數

利用這個我們來把列表前面加上數字:
蘋果
香蕉
柳丁

.wrap{
  counter-reset: count;
}
.wrap div::before{
  counter-increment:count; 
  content:counter(count) '. ';
}

See the Pen
css: content counter
by deathhell (@deathhell)
on CodePen.



6. CSS 變數
這裡我們把第一個範例的名字變成 css 的變數,用法如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.


用 css 的 content 大多會搭配偽元素,用得好的話是可以讓你的 css 變得更有彈性,有興趣的朋友可以玩玩看。
Read more

2019年8月17日 星期六

[三國創傑傳] 張郃アルトロンガンダム (張郃雙頭龍鋼彈)

P1200570

三國創傑傳第二隻完成的系列是以 W 鋼彈(EW版)裡的哪吒為原型的張郃雙頭龍鋼彈,這也是魏國的第二隻機體,設定上原本是山賊,後來變成曹操的部下,不過這次的三國創傑傳的劇情真的可以不用理他了。


P1200558P1200559

原型:XXXG-01S2 雙頭龍鋼彈(EW版)
武器:兩尾銳槍、無盡雙頭(肩甲)
擅長槍術,也能控制雙肩的盔甲來戰鬥


P1200560P1200561

這次的造型滿滿意的,顏色也跟原型一樣以綠色為主,肩上的龍爪一樣可以伸展但顏色就改成紫色了。

P1200562P1200563

透明的槍就沒有跟原本的配色一樣,雙槍的頭可以裝到肩上的龍頭上。

P1200564P1200565P1200566

可動性一樣普普通通,裙甲上有搭配透明配件,但肩上的紫色就必須自己處理了,我這邊是使用有亮點的紫色油漆筆塗裝,覺得效果還不錯,裙甲後半部也是一樣的方式處理。

P1200567P1200568

龍頭伸出來就有點尷尬,看照片好像可以往前但我怎樣就沒辦法擺成這樣,可以往前的話應該就能更有魄力。

P1200569P1200570P1200571

這隻我也很滿意,現在也看到地獄死神的情報圖出來了,真希望五小強都能夠在這次實體化啊。
Read more

2019年8月16日 星期五

CSS 3 動畫- animation

CSS3 Animations

css 3 的動畫在網頁上執行起來很順,現在我在做動畫也都會以 css3 的 animation 為主,要互動的話再加上 js 就好了,基本用法是用一個 @keyframes 開始,這邊用法跟 function 很像,要替 keyframes 取一個名字如下:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

最簡單的就是 from 到 to,{}內就是要改變的 css 屬性,只要是可以漸變的屬性套進去,css就會把他變成動畫了。

除了 from 到 to 外,還可以設定 %,這樣動畫就會有更多變化,如:
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

接下來我們要再選擇器上指定要使用這個動畫,最基本的就是指定動畫的名稱跟時間
animation: example 2s;

實際執行結果

See the Pen
css animation
by deathhell (@deathhell)
on CodePen.



比較完整的設定有這些屬性
animation-duration:
動畫執行時間,單位可為 s(秒),這樣動畫就會根據你設定的時間在每個百分比的階段變化



animation-delay:
延遲時間,以 s 為單位

animation-iteration-count:
播放次數,可為數字或是 infinite(無限播放)

animation-direction: 播放方向,有以下參數可以設定
normal: 從 0%播到100%
reverse: 從 100%播到0%
alternate: 播放兩次以上,奇數次從0%到100%,偶數次從100%到0%
alternate-reverse: 跟 alternate 相反


animation-fill-mode:
當動畫停止時顯示的狀態
forwards: 停在最後的狀態
backwards: 停在最初的狀態
both: 視 animation-direction 決定狀態


animation-timing-function:
時間函數,預設為 ease,如果設為 linear 則從頭到尾變化一樣,可以使用的值有
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)
其中 steps 可以用來作 sprite 動畫
而 cubic-bezier 可以用來自動時間函式,由於數字太抽象,我們可以使用產生器幫我們調整時間函式並產出

animation-play-state:
動畫執行狀態,使用 paused 就會暫停,running 則為執行動畫


可以分開設定,也可以併在一起像這樣:
animation: name 5s linear 2s infinite alternate;

其中除了時間第一個是執行時間,第二個是 delay 時間外,其他的值沒有順序問題。

也可以一次執行很多個動畫如下:
name 5s linear, name2 5s ease
Read more

2019年8月14日 星期三

[三國創傑傳] 曹操ウイングガンダム (曹操飛翼鋼彈)

P1200554

今年 BANDAI 又把三國系列重新拉出來出,大概上次的成效很好,這次一宣布要推出連動畫都安排好了,上次是推出好一陣子才出動畫,模型線也根據動畫有重出一次,編號也從原本的 BB 戰士獨立出來。

想當然重出一定又是以桃園三結義那三個打先鋒,但跟上次不一樣是這次的設定來說變成是公司而不是國家了,主要的勢力還是魏蜀吳,競爭的方式就不是國與國而是公司經營的競爭,講是這樣講但我覺得本質也沒啥變,就是賣模型。

三結義我有買,但那個補色地獄還是不說了,所以反而第一隻完成的是曹操飛翼鋼彈,剛好飛翼鋼彈就是我網站的域名的由來,補了色之後覺得完成度好很多。

P1200543
P1200544

曹操這次以飛翼鋼彈當基礎,但那個樣子應該已經是零式了,而目前釋出的情報來說魏國都是以鋼彈 W 當基礎,沒意外的話我應該會收滿。

P1200547P1200546P1200545

雖然設定已經不是冷兵器時代但武器還是給劍,好久沒做 BB 戰士沒想到分色進步那麼多,組裝的方式也跟以前差很多。

P1200551P1200550P1200549P1200548

兩把劍可以分開也可以合成一把,跟原本的飛翼零式的雙管來福槍滿像的,是說這種設定怎麼不是留給劉備啊.. 不過也還好我比較喜歡曹操飛翼留給曹操正好,這隻我很滿意,其他就看補色情況如何再分享好了。

P1200557P1200556P1200555P1200554P1200553P1200552
Read more

2019年8月13日 星期二

SVG 的圖形剪裁- clip-path

要在 svg 使用 clip-path 可以直接使用已經繪製好的圖形,先用 clipPath 來定義想要拿來當 clip-path 的形狀後,再使用 css 的 clip-path 去指定圖形就可以了,使用的方法為 clip-path:url(定義的形狀),以下則為使用的方法以及把 clip-path 的位置蓋在圖形上位置的表示圖。

See the Pen
svg clip-path
by deathhell (@deathhell)
on CodePen.



比較複雜的形狀以及文字都可以拿來當 clip-path

See the Pen
svg clip-path text
by deathhell (@deathhell)
on CodePen.

Read more

2019年8月12日 星期一

[SDCS] 真ゲッター1 (真蓋特1)

P1200525

前陣子推出的 SDCS 系列,打的是新的 SD 的骨架,除了可動性比以往又更加提升外,有一個有趣的特色是可以選擇是否要裝大腿的腿長切換模式。

P1200515P1200516

一開始的鋼彈我都沒買,反而引起我興趣的是其他機器人的系列,這次入手的就是世界最後之日的 真ゲッター1(真蓋特1)。

P1200517P1200518P1200519P1200520

可動性沒什麼問題,分色也都有貼紙幫忙解決,組完大概就是像這樣。

P1200522P1200523P1200524

手部有開掌及握武器兩種可以換,大斧的比例拿捏也不錯,很有魄力。

P1200526P1200527

價位算很便宜,買給小朋友組合還滿適合的,想想現在小朋友真幸福,只是不知道有多少小朋友還會有興趣做模型就是了。

P1200528P1200529P1200530

換手可以使出Stoner Sunshine的姿勢。

P1200531

真蓋特機器人 世界最後之日的介紹

Read more
Related Posts Plugin for WordPress, Blogger...