css3.0 圖形構成實例練習一

發(fā)布時間：2013-03-19 10:41:22 作者：佚名

我要評論

css3.0 的出現(xiàn)給我們帶來了很大的影響，本文主要介紹下圖形構成，感興趣的朋友可以參考并學習下實例，希望對你學習css3有所幫助

html部分內(nèi)容

復制代碼

代碼如下:

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;}

Tag：CSS3 圖形構成

CSS3的常見transformation圖形變化用法小結
這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結,共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下
2016-05-13
純CSS3繪制可旋轉(zhuǎn)的太極圖形樣式效果源碼
這是一款基于純CSS3繪制可旋轉(zhuǎn)的太極圖形樣式效果源碼?？蓪崿F(xiàn)太極圖形的順時針動態(tài)旋轉(zhuǎn)效果。該源碼沒有引入任何外部圖形元素，采用純css3技術實現(xiàn)
2016-05-12
CSS3繪制不規(guī)則圖形的一些方法示例
這篇文章主要介紹了CSS3繪制不規(guī)則圖形的一些方法示例,包括polygon()的使用等很多實用技巧,需要的朋友可以參考下
2015-11-07
純css3樣式屬性制作各種圖形圖標樣式代碼
一款純css3樣式屬性制作各種圖形圖標樣式代碼
2014-05-16
css3的圖形3d翻轉(zhuǎn)效果應用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應用,需要的朋友可以參考下
2014-04-08
基于jquery+css3實現(xiàn)的Tabs帶圖形按鈕選項卡切換
一款基于jquery+css3實現(xiàn)的tab選項卡切換特效代碼
2013-11-22
css3.0 圖形構成實例練習二
css3.0 的出現(xiàn)給我們帶來了很大的影響，本文主要知識點 transform屬性/animate的應用，感興趣的朋友可以參考并學習下實例，希望對你學習圖形構成有所幫助
2013-03-19
純CSS3實現(xiàn)繪制各種圖形實現(xiàn)代碼詳細整理
純CSS3實現(xiàn)繪制各種圖形實現(xiàn)代碼詳細整理請在現(xiàn)代瀏覽器（IE9+、firefox、chrome、safari、opera等瀏覽器）中查看效果
2012-12-26
基于CSS3的按鈕圖形含有多種顏色風格代碼共享
用CSS3寫的多種風格的按鈕.可以參考一下.風格不錯的
2012-06-27
純CSS3繪制各種不規(guī)則圖形圖標樣式特效源碼
純CSS3繪制各種不規(guī)則圖形圖標樣式特效源碼是一款無需任何圖片即可實現(xiàn)逼真的圖形圖標特效，本段代碼適應于所有網(wǎng)頁使用，有需要的朋友可以直接下載使用
2016-07-14