css+html弄出哆啦a梦,祝儿童节快乐(DIV+CSS绘制哆啦A梦)
之前看到别人用DIV+CSS绘制大白,就顺手绘制了一个哆啦A梦,刚好昨天蓝胖子3D版上映,借此祝大家儿童节快乐。
效果图:
请在CHROME & FIREFOX查看
HTML
[html]
[/html]
CSS
[css]
body {
background: #357FE0;
}
.doraemon {
width: 504px;
height: 600px;
position: relative;
margin: 0 auto;
}
.head {
width: 500px;
height: 500px;
border: 2px solid #0E538B;
border-radius: 100%;
background: #2E84C3;
clip: rect(0px 504px 400px 0px);
position: absolute;
transform: scaleX(1.05);
}
.eyes {
width: 100px;
height: 80px;
border: 2px solid #131313;
border-radius: 100px/80px;
position: absolute;
top: 5%;
background: #fff;
}
.eyes-left {
right: 50%;
transform: rotate(100deg);
margin-right: -2%;
}
.eyes-right {
left: 50%;
transform: rotate(70deg);
margin-left: -2%;
}
.eyes-wrap {
position: relative;
}
.eyes > span {
display: block;
position: absolute;
width: 20px;
height: 20px;
border: 5px solid #000;
border-radius: 100%;
transform: rotate(-100deg);
clip: rect(0px 30px 15px 0px);
top: 10px;
right: 15px;
}
.eyes-right > span {
transform: rotate(-70deg);
top: 40px;
}
.nose {
width: 50px;
height: 50px;
border-radius: 100%;
background: #C82F41;
border: 2px solid #131313;
position: absolute;
top: 100px;
left: 225px;
}
.nose > i {
display: block;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
margin: 10px auto;
}
.mouse {
position: absolute;
top: 100px;
left: 30px;
width: 440px;
height: 360px;
border: 1px solid #0E538B;
border-radius: 100%;
background: #fff;
transform: scale(1.05, 1.3) rotateX(30deg);
z-index: -1;
}
.mouse-con {
position: relative;
width: 100%;
height: 100%;
z-index: 999;
}
.beard-left {
width: 50%;
float: left;
position: relative;
}
.beard-right {
width: 50%;
float: right;
position: relative;
}
.beard > span,
.beard > i,
.beard > em {
position: absolute;
display: block;
height: 2px;
background: #131313;
}
.beard > span {
transform: rotate(15deg);
top: 30px;
right: 40px;
width: 120px;
}
.beard > i {
transform: rotate(5deg);
top: 65px;
right: 45px;
width: 140px;
}
.beard > em {
transform: rotate(-5deg);
top: 95px;
right: 45px;
width: 140px;
}
.beard-right > span {
transform: rotate(345deg);
top: 30px;
left: 40px;
width: 120px;
}
.beard-right > i {
transform: rotate(355deg);
top: 65px;
left: 45px;
width: 140px;
}
.beard-right > em {
transform: rotate(5deg);
top: 95px;
left: 45px;
width: 140px;
}
.line {
position: absolute;
top: 60px;
left: 220px;
width: 2px;
height: 65px;
background: #131313;
}
.mouse-out{
position: absolute;
top: 80px;
width: 100%;
height: 63px;
z-index: 99;
}
.mouse-shadow{
position: absolute;
top: 0;
left: 20px;
width: 380px;
height: 63px;
background: #fff;
}
.lips-left,.lips-right{
position: absolute;
display: block;
width: 60px;
height: 60px;
background: #fff;
border-radius: 100%;
border: 1px solid #131313;
clip: rect(0px 62px 50px 0px);
transform: rotate(-75deg) scale(1.2,1);
}
.lips-right{
right: 0;
transform: rotate(75deg) scale(1.1,1);
}
.lips-middle{
position: absolute;
left: 120px;
top: 62px;
display: block;
width: 200px;
height: 30px;
border-radius: 100%;
background: #B92B37;
border: 1px solid #131313;
transform: scale(2) rotateX(180deg);
clip: rect(23px 200px 32px 0px);
}
.mouse-in {
position: absolute;
left: 30px;
top: -160px;
width: 380px;
height: 380px;
border-radius: 100%;
border: 1px solid #33224C;
background: #B92B37;
transform: scale(1.05, 1.3) rotateX(180deg);
clip: rect(0px 380px 120px 0px);
overflow: hidden;
}
.heart {
margin: 0 auto;
position: relative;
width: 150px;
height: 50px;
transform: rotate(180deg);
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 80px;
top: 0;
width: 80px;
height: 120px;
background: #D57135;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
clip: rect(0px 80px 100px 0px)
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.neck {
width: 442px;
height: 20px;
border-radius: 10px;
position: absolute;
border: 2px solid #33224C;
top: 400px;
left: 30px;
background: #BF2934;
}
.bell {
margin: 10px auto;
background: #EAD15B;
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid #131313;
}
.bell > p {
margin: 8px 0 0 -5px;
width: 55px;
height: 7px;
border-radius: 7px;
background: #EAD15B;
border: 2px solid #131313;
}
.bell > span {
margin: 5px auto 0;
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #6A5E5E;
border: 2px solid #131313;
}
.bell > i {
margin: 0 auto;
display: block;
background: #6A5E5E;
width: 2px;
height: 12px;
}
[/css]
css+html弄出哆啦a梦,祝儿童节快乐(DIV+CSS绘制哆啦A梦)相关推荐
- html菜单树实现原理,HTML_DIV+CSS构成树型菜单,这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单 这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- 【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
- 别再拿div+css误导人了
标准的推广~虽然你们很尽责,但是请别用div+CSS这种说法来涵盖所谓的"标准". div+CSS是一回事,标准又是一回事,你看过哪个W3C成员开口闭口就是div+CSS这句话? ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
- 关于DIV+CSS和XHTML+CSS的理解
WEB标准是一系列标准的集合,并不是仅"DIV+CSS"布局就可以实现.以CSS网页布局只是标准的基础之一."DIV+CSS"布局只是一种通俗的称呼罢了.而我们 ...
- HTML5div css入门案例,div+css教学教案(学习入门到精通~)详细讲解.doc
| div+cssHYPERLINK "/"教程(入门到精通) 目录: 一.div+css教程(入门到精通)详细讲解 二.DIV+CSS网页布局常用基础知识 三.div+css常用 ...
- html 向上滚动 不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板 上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
最新文章
- 2-Runtime objc_object objc_class
- 漫画:你真的懂Github吗?
- android socket 服务,android 创建socket 通信型service
- 11个好用到起飞的「Python字典」知识点!
- Python 第五天
- 1万并发服务器配置_小程序后端服务器搭建:云服务器配置(1)
- Angular_PWA使用+Demo
- 用vhdl实现4位加减法计数器_32位加减法器设计
- 作者:庄会富(1985-),男,中国科学院昆明植物研究所科技信息中心主管
- Jquery - jquery 插件,jQuery.Switchable
- 4.16-4.22课题(拼团系统)进度汇报
- 15.UNIX 环境高级编程--进程间的通信
- python简单代码恶搞-一个可以套路别人的python小程序实例代码
- win7开启不了Aero
- D3.js 绘制地图
- 用Python实现温度转换程序
- latex特殊字体咋打?+下标打在左边
- Android 点击换头像(拍照和从相册选择)
- 攻防世界高手进阶区——dice_game
- 【转】由滤波器系数绘制尺度函数和小波函数图像的Matlab程序
热门文章
- 10976 - Fractions Again?!
- mysql 执行存储过程_MySQL存储过程的3种循环
- php获取扫码枪的数据,js 获取扫码枪输入数据的方法
- 求平均数、百分率、最大值、最小值、两个字段相差秒数的SQL
- php5.5 getter setter,实现了一个PHP5的getter/setter基类的代码
- 华为鸿蒙系统可能,【图片】华为鸿蒙系统的厉害之处在于 你可能非用不可
!【手机吧】_百度贴吧...
- IAR平台移植TI OSAL到STC8A8K64S4A12单片机中
- (82)zabbix如何选择适合的监控类型
- 用友U8固定资产总账重算语句
- Spring集成activeMQ