css3.0 图形构成实例练习一


Posted in HTML / CSS onMarch 19, 2013

html部分内容

复制代码
代码如下:

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

HTML / CSS 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 #HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 #HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 #HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php自定义分页类完整实例
2015/12/25 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python 实现Harris角点检测算法
2020/12/11 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
公益广告宣传方案
2014/02/28 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
给朋友的赠语
2015/06/23 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android