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

資訊專(zhuān)欄INFORMATION COLUMN

如何用 html 和 css 畫(huà)一拳超人

wuyangchun / 701人閱讀

摘要：在繪制琦玉的頭像時(shí)，最重要的一個(gè)屬性就是，我們用它可以畫(huà)出圓形橢圓及各種變體。以下的樣式能夠畫(huà)出琦玉的臉部形狀在調(diào)整后，可畫(huà)出眼鼻嘴的形狀介紹屬性也是一個(gè)很強(qiáng)大的屬性，能夠?qū)υ刈龈鞣N變形。

寫(xiě)這篇博客的起因是我看了Medium上的這篇文章：How I started drawing CSS Images，然后哇哦?，同樣是前端開(kāi)發(fā)，這區(qū)別怎么這么大呢？這位作者和我完全點(diǎn)了不同的技能點(diǎn)啊！

看了幾個(gè)她在codepen上的作品，比如這個(gè)皮卡丘，發(fā)現(xiàn)用到的技術(shù)也并不多，于是我也想試試。

不過(guò)有哪個(gè)動(dòng)漫中的人物足夠簡(jiǎn)單，能夠用幾個(gè)基本的幾何圖形就畫(huà)出來(lái)呢？我想到了一個(gè)人，于是我決定畫(huà)一個(gè)《一拳超人》中的鹵蛋，不對(duì)，是禿頭披風(fēng)俠——琦玉老師。

結(jié)果展示見(jiàn)下：
http://codepen.io/noiron/pen/...

技術(shù)概述

從html文件中你可以看到這張圖片實(shí)際上全部是由div元素組合而成的，一共用到了15個(gè)div。在給一個(gè)div元素加上適當(dāng)?shù)腸ss樣式后，就形成了臉上的一個(gè)部位。

在繪制琦玉的頭像時(shí)，最重要的一個(gè)css屬性就是border-radius，我們用它可以畫(huà)出圓形、橢圓及各種變體。圖中的臉部輪廓、眼睛、耳朵的形狀都是由border-radius來(lái)實(shí)現(xiàn)的，稍后將介紹其使用方法。

另一個(gè)需要說(shuō)明的css屬性是transform，可以實(shí)現(xiàn)平移和旋轉(zhuǎn)。

border-radius 介紹

之前我對(duì)border-radius的認(rèn)識(shí)只局限于可以給元素加上圓角，以及將其值設(shè)為50%可以讓矩形顯示為圓形。查了些資料后，才發(fā)現(xiàn)可以用它畫(huà)出許多圖形。

border-radius是以下四個(gè)屬性的簡(jiǎn)寫(xiě)，每一個(gè)屬性用于設(shè)置一個(gè)角的形狀：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

圖片來(lái)自MDN

從上圖可以看出當(dāng)只設(shè)置一個(gè)值或設(shè)置兩個(gè)相同的值時(shí)，顯示為圓；設(shè)置兩個(gè)不同的值時(shí)，顯示為橢圓。以border-top-left-radius為例：

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipsis */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

若是簡(jiǎn)寫(xiě)形式，則寫(xiě)成如下格式：

border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%;

"/"之前的四個(gè)值表示水平軸的長(zhǎng)度，"/"之后的四個(gè)值表示垂直軸的長(zhǎng)度，當(dāng)水平軸的長(zhǎng)度和垂直軸的長(zhǎng)度相等時(shí)，可以省略"/"及之后的這一組值。

對(duì)于同一組的四個(gè)數(shù)值，也有簡(jiǎn)寫(xiě)方式。方法與 padding 和 margin 的簡(jiǎn)寫(xiě)類(lèi)似，第一個(gè)值與第三個(gè)值相同或第二個(gè)值與第四個(gè)值相同時(shí)，可以只寫(xiě)一遍。

在了解了border-radius的用法后，通過(guò)給div元素合適的寬高比，在調(diào)整四個(gè)圓角的半徑，就能夠獲得你想要的形狀了。

// 以下的樣式能夠畫(huà)出琦玉的臉部形狀
// 在調(diào)整width, height, border-radius 后，可畫(huà)出眼、鼻、嘴的形狀
#div1 {
  width: 100px;
  height: 144px;
  border: 2px solid #000;
  border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%; 
}
transform 介紹

transform屬性也是一個(gè)很強(qiáng)大的屬性，能夠?qū)υ刈龈鞣N變形。不過(guò)我們這里只需要用它來(lái)進(jìn)行平移和旋轉(zhuǎn)的操作。

/* 可以用 translate 來(lái)實(shí)現(xiàn)平移操作 */
/* translate() 的兩個(gè)參數(shù)分別表示水平方向和垂直方向的平移距離 */
transform: translate(12px, 50%);

/* 上面這一行與下面的這兩行是等價(jià)的 */
transform: translateX(12px);
transform: translateY(50%);

/* 順時(shí)針旋轉(zhuǎn)20度 */
transform: rotate(20deg);
組合得到最終結(jié)果

在你已經(jīng)將琦玉頭像進(jìn)行拆解，把各個(gè)部分都用一個(gè)div來(lái)表示并加上了合適的樣式后，就能將它們組合起來(lái)了。你可以用transform來(lái)調(diào)整它們的距離，或者直接用absoulte定位。

最后就得到了琦玉的頭像：

額，禿子，你誰(shuí)?。?？

看來(lái)不是所有的光頭都叫琦玉，還需要對(duì)細(xì)節(jié)進(jìn)行一點(diǎn)調(diào)整：

OK，這樣就有點(diǎn)像琦玉老師了。最后，如果你愿意的話(huà)，還可以用transition屬性來(lái)稍微加上點(diǎn)動(dòng)畫(huà)效果。

再放一遍代碼地址：

Codepen代碼及展示

本文在我的博客上的地址：

如何用 html 和 css 畫(huà)一拳超人

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

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

相關(guān)文章

  • 介紹如何用Python來(lái)繪制高清的交互式地圖，建議收藏

    摘要：今天小編來(lái)為大家介紹一個(gè)叫做的模塊，我們可以用它來(lái)繪制高清的交互式地圖，并且標(biāo)注出重要的地理位置等等，讀者在看過(guò)本篇文章之后，讀者大致會(huì)掌握使用來(lái)進(jìn)行交互式地圖的繪制在地圖上標(biāo)注出重要的建筑物安裝模塊畫(huà)一張最簡(jiǎn)單的地圖我們先來(lái)繪制一張 今天小編來(lái)為大家介紹一個(gè)叫做Folium的模塊，我們...

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

  • 前端每日實(shí)戰(zhàn) 167# 視頻演示如何用 1 個(gè) dom 元素創(chuàng)作兩顆愛(ài)心

    摘要：每一個(gè)陰影屬性值就可以繪制出一個(gè)圓點(diǎn)，因?yàn)榭梢越邮斩鄠€(gè)屬性性，所以就可以用多個(gè)圓點(diǎn)來(lái)畫(huà)點(diǎn)陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻 此視頻...

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

  • 前端每日實(shí)戰(zhàn) 167# 視頻演示如何用 1 個(gè) dom 元素創(chuàng)作兩顆愛(ài)心

    摘要：每一個(gè)陰影屬性值就可以繪制出一個(gè)圓點(diǎn)，因?yàn)榭梢越邮斩鄠€(gè)屬性性，所以就可以用多個(gè)圓點(diǎn)來(lái)畫(huà)點(diǎn)陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻 此視頻...

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

  • 【二次元的CSS】—— 用 DIV + CSS3 畫(huà)咸蛋超人（詳解步驟）

    摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來(lái)繪制各部位的形狀，當(dāng)然也不會(huì)使用任何圖片哦。有的同學(xué)說(shuō)，用不是能畫(huà)得更逼真而且更簡(jiǎn)單嗎這點(diǎn)我也非常贊同，但我的理由還是，那就沒(méi)意思了。這次寫(xiě)的詳細(xì)一點(diǎn)，把各個(gè)部位都拆出來(lái)分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來(lái)繪制各部位的形狀，當(dāng)然也不會(huì)使用任何圖片哦。那就沒(méi)意思了。有的同學(xué)說(shuō)，用c...

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

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

0條評(píng)論

閱讀需要支付1元查看
<