html画海绵宝宝css3,CSS3 海绵宝宝
CSS
语言:
CSSSCSS
确定
body {
background: #F9ED39;
zoom: .5;
}
.rosto {
position: absolute;
top: 30%;
left: 50%;
margin-left: -200px;
}
.olho {
height: 200px;
width: 200px;
background: #FFF;
border-radius: 100%;
border: 6px solid #000;
position: relative;
display: inline-block;
margin-left: -5px;
}
.olho1 {
background: #4AF;
height: 100px;
width: 100px;
border: 4px solid #000;
border-radius: 100%;
position: absolute;
}
#esquerdo > .olho1 {
left: 80px;
top: 50px;
}
#direito > .olho1 {
right: 80px;
top: 50px;
}
.olho2 {
background: #000;
height: 50px;
width: 50px;
border: 3px solid #000;
border-radius: 100%;
position: absolute;
}
#esquerdo > .olho2 {
left: 110px;
top: 75px;
}
#direito > .olho2 {
right: 110px;
top: 75px;
}
.sobrancelha {
height: 10px;
width: 40px;
background: #000;
position: absolute;
}
#primeira-sobrancelha {
margin-top: -5px;
margin-left: 10px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
#segunda-sobrancelha {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: 80px;
margin-top: -26px;
}
#terceira-sobrancelha {
margin-top: -5px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
margin-left: 150px;
}
.detail {
width: 50px;
height: 70px;
background-color: rgba(126, 67, 0, 0.15);
border-radius: 100%;
position: absolute;
z-index: -2;
}
.bg-details {
position: relative;
height: 20%;
width: 100%;
}
.nariz {
width: 70px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
height: 97px;
border-radius: 50%;
background: #000;
border: 6px solid #000;
position: absolute;
top: 110px;
left: 164px;
}
.nariz-detalhe {
width: 72px;
height: 106px;
border-radius: 50%;
background: #F9ED39;
position: absolute;
top: 8px;
-webkit-transform: rotate(4deg) translateY(-7px);
transform: rotate(4deg) translateY(-7px);
left: -2px;
}
.boca {
top: 170px;
z-index: -1;
left: -50px;
width: 500px;
height: 130px;
border-radius: 50%;
position: absolute;
background: #000;
}
.boca-detalhe {
width: 530px;
height: 140px;
margin-left: -19px;
border-radius: 50%;
background: #F9ED39;
margin-top: -15px;
}
.dente {
height: 50px;
width: 50px;
background: #FFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 4px solid #000;
position: absolute;
}
#dente-esquerdo {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
margin-left: 190px;
margin-top: 1px;
}
#dente-direito {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
margin-left: 260px;
}
html画海绵宝宝css3,CSS3 海绵宝宝相关推荐
- css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
- html实现画苹果,基于CSS3画一个iPhone
实现效果: 实现代码 html css3 html, body { height: 100%; } body { text-align: center; padding: 50px; backgrou ...
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- html 用css画出斑马线,CSS3实现斑马线、棋盘、格子复杂背景
我们知道CSS3能实现好看的渐变色背景,实际上它还可以实现更复杂的背景,比如条纹斑马线.棋盘.网格等,下面我们就来贴出代码,希望能为大家提供思路和帮助. 细线网格背景 .container{ back ...
- html css画小车,基于css3动画实现的旅行的小车
旅行的小车.gif 小丸子.gif 抱歉,用工具生成的gif有点卡,小车的轮子都转不利索了,完整demo可以点击文章最底下的[demo展示中心]. 这两个demo的所有元素和动效都是由html+css ...
- css怎么画小方块,CSS3 小方块矩阵变换动画
CSS 语言: CSSSCSS 确定 .spinning-pixels-loader { width: 10px; height: 10px; background: #f35626; margin: ...
- 纯css画梯形,纯CSS3实现的梯形立方体
CSS 语言: CSSSCSS 确定 html, body { position: relative; width: 100%; height: 100%; margin: 0; background ...
- css怎么画错号,CSS3 对/错符号的切换动画
CSS 语言: CSSSCSS 确定 .select { margin: 2rem; height: 40px; width: 200px; border: 1px solid #ededed; cu ...
- 放大 旋转 css3,CSS3详解:transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
最新文章
- JMS(1)——基本实例
- python项目简历内容包括哪些方面_简历的基本信息包括哪些?
- 集群系统与事务处理需要注意的一点
- OpenCV Aruco模块常见问题解答
- amie 规则挖掘_AMIE的完整形式是什么?
- PHP判断手机横向,H5横竖屏检测的方法
- hmm 求隐藏序列_自然语言处理(3)隐马尔科夫模型 HMM
- C#多线程学习(三) 生产者和消费者 1——解决线程间冲突的关键
- ADF文件数据结构解析和ADF文件读写
- matplotlib中subplot的各参数的作用
- 关于卡巴斯基KEY被列入黑名单的问题
- 支付宝授权登陆php,php实现支付宝授权登录
- linux下activityMQ安装
- pom文件变成灰色解决方案
- 时下流行的深度学习数据标注工具
- Oracle11.2.0.4升级补丁包
- VMware Fusion FOR MAC使用教程
- element ui 级联选择器,渲染后不显示数据
- 人类一败涂地做图教程_人类一败涂地自定义人物怎么制作 捏人实用技巧教学...
- 导出CAD文件的几种方法