**如下
>**梅麗號
title
>
<
style
type
="text/css"
>
body
/*face
*/.face
/*eye
*/.eye-out
.eye
.left
.eye-in
.right
/*nose
*/.nose-out
.nose-down
.nose-left
.nose-right
.nose-bottom
.nose-bottom-left
.nose-bottom-right
/*horn
*/.horn
.horn-big
.horn-left
.horn-right
.horn-link
.hornbig-right
.horn2
.horn-link2
style
>
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="face"
>
<
div
class
="eye-out"
>
<
div
class
="eye left"
>
<
div
class
="eye-in"
>
div>
div>
<
div
class
="eye right"
>
<
div
class
="eye-in"
>
div>
div>
div>
<
div
class
="nose-out"
>
<
div
class
="nose-left"
>
div>
<
div
class
="nose-right"
>
div>
<
div
class
="nose-bottom"
>
div>
div>
<
div
class
="nose-out nose-down"
>
<
div
class
="nose-bottom-left"
>
div>
<
div
class
="nose-bottom-right"
>
div>
div>
div>
<
div
class
="horn-left"
>
<
div
class
="horn-big"
>
<
div
class
="horn"
>
div>
div>
<
div
class
="horn-link"
>
div>
div>
<
div
class
="horn-right"
>
<
div
class
="horn-big hornbig-right"
>
<
div
class
="horn2"
>
div>
div>
<
div
class
="horn-link2"
>
div>
div>
div>
body
>
html
>
鬼畜梅利號用純css完成,主要有以下幾個點:
一.布局
①position:relative/absolute;
②display:flex;
③overflow: hidden;
二.特殊形狀
①border-radius
學到乙個如何畫
再結合一下transform等效果!
難度是真的不大,主要是練練手熟悉一下css屬性!
哈哈哈哈,越看越覺得搞笑
用純CSS畫大白
純css打造網頁大白知識點 首先要把大白分割,整體baymax中包含header eye1,eye2,mouth torso heart belly cover l bigfinger,r bigfinger,l smallfinger,r smallfinger,l leg,r leg。因為大白是...
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單,通過擷取border 邊框 的部分 拐角 實現,幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...
css畫橫線箭頭 如何用純CSS實現的箭頭的效果?
如何用純css實現的箭頭的效果?要點 用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單,通過擷取border 邊框 的部分 拐角 實現,幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 de...