css3.0 圖形構(gòu)成實(shí)例練習(xí)一
發(fā)布時(shí)間：2013-03-19 10:41:22 作者：佚名 
我要評(píng)論
我要評(píng)論css3.0 的出現(xiàn)給我們帶來(lái)了很大的影響，本文主要介紹下圖形構(gòu)成，感興趣的朋友可以參考并學(xué)習(xí)下實(shí)例，希望對(duì)你學(xué)習(xí)css3有所幫助
html部分內(nèi)容
<div class="header">
<div class="eye_left"></div>
<div class="eye_right">
<div class="eye_in"></div>
</div>
<div class="head_bottom"></div>
</div>
css部分
*{ padding:0; margin:0;}
.header{ width:300px; margin:100px auto; position:relative; }
.eye_left,.eye_right{
width:30px;
height:30px;
background:#FFF;
position:absolute;
border:70px solid #0C0;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
.eye_left{
left:10px;
top:0px;}
.eye_right{
right:0px;
top:0px;}
.head_bottom{
width:200px;
border:#0C0 solid 60px;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;
height:30px;
left:0px;
position:absolute;
top:120px;
z-index:-5;}
.eye_in{
background:#0C0;
height:30px;
width:30px;
position:absolute;
right:-30px;
top:-30px;
border:#FFF 30px solid;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
復(fù)制代碼
代碼如下:<div class="header">
<div class="eye_left"></div>
<div class="eye_right">
<div class="eye_in"></div>
</div>
<div class="head_bottom"></div>
</div>
css部分
復(fù)制代碼
代碼如下:*{ padding:0; margin:0;}
.header{ width:300px; margin:100px auto; position:relative; }
.eye_left,.eye_right{
width:30px;
height:30px;
background:#FFF;
position:absolute;
border:70px solid #0C0;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
.eye_left{
left:10px;
top:0px;}
.eye_right{
right:0px;
top:0px;}
.head_bottom{
width:200px;
border:#0C0 solid 60px;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;
height:30px;
left:0px;
position:absolute;
top:120px;
z-index:-5;}
.eye_in{
background:#0C0;
height:30px;
width:30px;
position:absolute;
right:-30px;
top:-30px;
border:#FFF 30px solid;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
相關(guān)文章
CSS3的常見(jiàn)transformation圖形變化用法小結(jié)
這篇文章主要介紹了CSS3的常見(jiàn)transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下2016-05-13
這是一款基于純CSS3繪制可旋轉(zhuǎn)的太極圖形樣式效果源碼?？蓪?shí)現(xiàn)太極圖形的順時(shí)針動(dòng)態(tài)旋轉(zhuǎn)效果。該源碼沒(méi)有引入任何外部圖形元素，采用純css3技術(shù)實(shí)現(xiàn)2016-05-12- 這篇文章主要介紹了CSS3繪制不規(guī)則圖形的一些方法示例,包括polygon()的使用等很多實(shí)用技巧,需要的朋友可以參考下2015-11-07
一款純css3樣式屬性制作各種圖形圖標(biāo)樣式代碼2014-05-16css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08
基于jquery+css3實(shí)現(xiàn)的Tabs帶圖形按鈕選項(xiàng)卡切換
一款基于jquery+css3實(shí)現(xiàn)的tab選項(xiàng)卡切換特效代碼2013-11-22css3.0 圖形構(gòu)成實(shí)例練習(xí)二
css3.0 的出現(xiàn)給我們帶來(lái)了很大的影響，本文主要知識(shí)點(diǎn) transform屬性/animate的應(yīng)用，感興趣的朋友可以參考并學(xué)習(xí)下實(shí)例，希望對(duì)你學(xué)習(xí)圖形構(gòu)成有所幫助2013-03-19純CSS3實(shí)現(xiàn)繪制各種圖形實(shí)現(xiàn)代碼詳細(xì)整理
純CSS3實(shí)現(xiàn)繪制各種圖形實(shí)現(xiàn)代碼詳細(xì)整理請(qǐng)?jiān)诂F(xiàn)代瀏覽器（IE9+、firefox、chrome、safari、opera等瀏覽器）中查看效果2012-12-26
基于CSS3的按鈕圖形 含有多種顏色風(fēng)格 代碼共享
用CSS3寫(xiě)的多種風(fēng)格的按鈕.可以參考一下.風(fēng)格不錯(cuò)的2012-06-27
純CSS3繪制各種不規(guī)則圖形圖標(biāo)樣式特效源碼
純CSS3繪制各種不規(guī)則圖形圖標(biāo)樣式特效源碼是一款無(wú)需任何圖片即可實(shí)現(xiàn)逼真的圖形圖標(biāo)特效，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友可以直接下載使用2016-07-14
