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中的选择符
Oct 17 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP中“=&gt;
2019/03/01 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
使用JS动态显示文本
2017/09/09 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python内置类型性能分析过程实例
2020/01/29 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
介绍一下gcc特性
2012/01/20 面试题
本科毕业生求职信
2014/06/15 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
小学新教师个人总结
2015/02/05 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers