亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

如何用 html 和 css 畫一拳超人

wuyangchun / 751人閱讀

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

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

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

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

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

技術(shù)概述

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

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

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

border-radius 介紹

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

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

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

圖片來自MDN

從上圖可以看出當(dāng)只設(shè)置一個值或設(shè)置兩個相同的值時，顯示為圓；設(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;

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

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

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

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

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

// 以下的樣式能夠畫出琦玉的臉部形狀
// 在調(diào)整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屬性也是一個很強大的屬性，能夠?qū)υ刈龈鞣N變形。不過我們這里只需要用它來進行平移和旋轉(zhuǎn)的操作。

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

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

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

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

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

額，禿子，你誰?。?？

看來不是所有的光頭都叫琦玉，還需要對細節(jié)進行一點調(diào)整：

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

再放一遍代碼地址：

Codepen代碼及展示

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

如何用 html 和 css 畫一拳超人

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111895.html

相關(guān)文章

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

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

    lixiang 評論0 收藏0

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

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

    LdhAndroid 評論0 收藏0

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

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

    mingde 評論0 收藏0

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

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

    Codeing_ls 評論0 收藏0

發(fā)表評論

0條評論

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