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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
简单易懂的python环境安装教程
2017/07/13 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python模块导入的细节详解
2018/12/10 Python
python读取几个G的csv文件方法
2019/01/07 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
2013的个人自我评价
2013/12/26 职场文书
社区党员先进事迹
2014/01/22 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
预备党员承诺书
2014/03/25 职场文书
英语专业自荐书
2014/06/13 职场文书
2014最新离职证明范本
2014/09/12 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
现场施工员岗位职责
2015/04/11 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
介绍一下28个JS常用数组方法
2022/05/06 Javascript