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实现字体颜色渐变的实现
Mar 09 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
html5 标签
Jul 16 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript作用域问题实例分析
2015/07/13 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python 文件重命名工具代码
2009/07/26 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python自定义类并使用的方法
2015/05/07 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
详解rem 适配布局
2018/10/31 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
疾病捐款倡议书
2014/05/13 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
网吧员工管理制度
2015/08/05 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP