如何用 html 和 css 畫一拳超人

wuyangchun 發布于2019-08-29 12:26 / 690人閱讀

摘要：在繪制琦玉的頭像時，最重要的一個屬性就是，我們用它可以畫出圓形橢圓及各種變體。以下的樣式能夠畫出琦玉的臉部形狀在調整后，可畫出眼鼻嘴的形狀介紹屬性也是一個很強大的屬性，能夠對元素做各種變形。

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

看了幾個她在codepen上的作品，比如這個皮卡丘，發現用到的技術也并不多，于是我也想試試。

不過有哪個動漫中的人物足夠簡單，能夠用幾個基本的幾何圖形就畫出來呢？我想到了一個人，于是我決定畫一個《一拳超人》中的鹵蛋，不對，是~~禿頭披風俠~~——琦玉老師。

結果展示見下：
http://codepen.io/noiron/pen/...

技術概述

從html文件中你可以看到這張圖片實際上全部是由div元素組合而成的，一共用到了15個div。在給一個div元素加上適當的css樣式后，就形成了臉上的一個部位。

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

另一個需要說明的css屬性是transform，可以實現平移和旋轉。

border-radius 介紹

之前我對border-radius的認識只局限于可以給元素加上圓角，以及將其值設為50%可以讓矩形顯示為圓形。查了些資料后，才發現可以用它畫出許多圖形。

border-radius是以下四個屬性的簡寫，每一個屬性用于設置一個角的形狀：

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

圖片來自MDN

從上圖可以看出當只設置一個值或設置兩個相同的值時，顯示為圓；設置兩個不同的值時，顯示為橢圓。以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;

若是簡寫形式，則寫成如下格式：

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

"/"之前的四個值表示水平軸的長度，"/"之后的四個值表示垂直軸的長度，當水平軸的長度和垂直軸的長度相等時，可以省略"/"及之后的這一組值。

對于同一組的四個數值，也有簡寫方式。方法與 padding 和 margin 的簡寫類似，第一個值與第三個值相同或第二個值與第四個值相同時，可以只寫一遍。

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

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

transform 介紹

transform屬性也是一個很強大的屬性，能夠對元素做各種變形。不過我們這里只需要用它來進行平移和旋轉的操作。

/* 可以用 translate 來實現平移操作 */
/* translate() 的兩個參數分別表示水平方向和垂直方向的平移距離 */
transform: translate(12px, 50%);

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

/* 順時針旋轉20度 */
transform: rotate(20deg);

組合得到最終結果

在你已經將琦玉頭像進行拆解，把各個部分都用一個div來表示并加上了合適的樣式后，就能將它們組合起來了。你可以用transform來調整它們的距離，或者直接用absoulte定位。

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

額，禿子，你誰啊！？

看來不是所有的光頭都叫琦玉，還需要對細節進行一點調整：

OK，這樣就有點像琦玉老師了。最后，如果你愿意的話，還可以用transition屬性來稍微加上點動畫效果。

再放一遍代碼地址：

Codepen代碼及展示

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

如何用 html 和 css 畫一拳超人

GPU云服務器云服務器如何用css html如何用如何用html 如何用html發郵件

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

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

介紹如何用Python來繪制高清的交互式地圖，建議收藏

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

lixiang 2021-09-26 09:55 評論0 收藏0
前端每日實戰 167# 視頻演示如何用 1 個 dom 元素創作兩顆愛心

摘要：每一個陰影屬性值就可以繪制出一個圓點，因為可以接收多個屬性性，所以就可以用多個圓點來畫點陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻此視頻...

LdhAndroid 2019-08-30 10:56 評論0 收藏0
前端每日實戰 167# 視頻演示如何用 1 個 dom 元素創作兩顆愛心

摘要：每一個陰影屬性值就可以繪制出一個圓點，因為可以接收多個屬性性，所以就可以用多個圓點來畫點陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻此視頻...

mingde 2019-08-02 15:06 評論0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各部位的形狀，當然也不會使用任何圖片哦。有的同學說，用不是能畫得更逼真而且更簡單嗎這點我也非常贊同，但我的理由還是，那就沒意思了。這次寫的詳細一點，把各個部位都拆出來分析。收工歡迎大家吐槽僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各部位的形狀，當然也不會使用任何圖片哦。那就沒意思了。有的同學說，用c...

Codeing_ls 2019-08-02 15:54 評論0 收藏0