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中border-image的使用
Jul 18 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 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网站提速三大“软”招
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python创造虚拟环境方法总结
2019/03/04 Python
使用python实现滑动验证码功能
2019/08/05 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
django从后台返回html代码的实例
2020/03/11 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
银行求职自荐信
2014/06/30 职场文书
给客户的检讨书
2014/12/21 职场文书
保险内勤岗位职责
2015/04/13 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Moment的feature导致线上bug解决分析
2022/09/23 Javascript