HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下:
代码实现效果如下:
布局使用了绝对定位、相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是不够好。
代码如下:
CSS样式:
.cat:hover{
transform: scale(1.5);
transition: all 1s;
}
.cat{
position: relative;
z-index: 1;
}
.faceblue {
width: 372px;
height: 372px;
border-radius: 50%;
border: #3f4243 2px solid;
margin: 0 auto;
background-color: #07beea;
position: relative;
}
.facewhite{
width: 250px;
height: 250px;
border: #598680 solid 2px;
border-radius: 50%;
background-color: #fff;
position: absolute;
bottom: 35px;
left: 16%;
/* position: relative; */
}
.eyeleft,.eyeright{
width: 68px;
height: 37px;
border: #3f4243 2px solid;
background-color: #fff;
position: relative;
left: 50px;
top: 6px;
float: left;
}
.eyeright{
left: 60px;
}
.dotleft,.dotright{
background-color: #000;
width: 23px;
height: 23px;
border-radius: 50%;
position: absolute;
left: 28px;
top:6px;
}
.dotright{
left: auto;
right: 28px;
}
.nose{
width: 50px;
height: 50px;
background-image: radial-gradient(#fff 1%,#f00,#f00);
border-radius: 50%;
border: #3f4243 1px solid;
position: absolute;
left: 102px;
top: 50px;
}
.line{
height: 100px;
width: 2px;
background-color: #3f4243;
position: absolute;
left: 127px;
top: 102px;
}
.smile{
width: 163px;
height: 128px;
border: #3f4243 3px solid;
border-radius: 50%;
border-top:none;
border-right:none;
border-left:none;
position: absolute;
left: 44px;
top: 74px;
}
.beard{
position: relative;
top: 75px;
left: 5px;
}
.beard>div{
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.beard1,.beard2,.beard3{
width: 88px;
height: 1px;
background-color: #000;
}
.beard1,.last .beard1{
transform: rotate(16deg);
margin-left: 8px;
width: 80px;
}
.beard3,.last .beard3{
transform: rotate(164deg);
width: 88px;
/* margin-left: 8px; */
}
.last{
position: relative;
top: 22px;
left: -1px;
transform: rotate(180deg);
}
.last .beard3{
width: 80px;
margin-left:8px;
}
.last .beard1{
width: 88px;
margin-left: 2px;
}
HTML结构:
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像相关推荐
- 用HTML5+CSS3画一个简易的机器猫头像
原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是不够好. 代码如下: CSS样式: .ca ...
- 用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 什么软件有html5游戏,多款好玩HTML5小游戏带你认识HTML5优势
HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山>.现在介绍多款 HTML ...
- 好玩小游戏来啦,免费拿走,一个赞一个关注就够啦
话不多说,上代码 tips:外挂手段找找看哦 #include<bits/stdc++.h> #include<conio.h> #include<windows.h&g ...
- 贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...
- 关于python小游戏的毕业论文_使用Python写一个小游戏
引言 最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下 ...
- Python【小游戏合集】之自己做一个简单又好玩的推箱子小游戏
导语:哈喽铁汁们~今日游戏之旅开始! 想领取完整源码跟python学习资料可私信我或点击这行字体 这期就是带大家使用当前主流且易用的Python语言做一个简单的推箱子小游戏 现在小编的快乐源泉就是玩自 ...
- Python【小游戏合集】之自行开发一个猜数字游戏~
导语: 我们时常在电视台看到一些节目,这些节目,会展示一个商品,然后由嘉宾猜价格.嘉宾每猜一次价格,主持人会告诉嘉宾,高了,还是低了.然后嘉宾根据主持人提示,调整报价,直到最后答对.今天这期小编就向大 ...
- html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
最新文章
- Java11安装及环境变量设置
- 最重要的是跑完,而不是刚开始跑得有多快
- 用java程序实现记单词_java实现背单词程序
- nssl1186-字串数量【前缀和】
- delphi 更改DBGrid 颜色技巧
- ArcGIS Engine开发之TocControl
- qt中文显示乱码问题
- 命令行解压cab文件
- python提取html表格_用Python抓取HTML表格
- Android 之获取屏幕高度+状态栏高度
- c语言数组输入空格回车问题
- 为什么SEM竞价推广效果越来越差?
- CDR排钻教程-CorelDRAW服装设计中的排钻技术
- 计算机qwerty键盘,QWERTY键盘输入
- 利用java实现发送邮件
- BUUCTF web(三)
- POM文件配置详解(总体与单项)
- 樱桃键盘驱动在哪下_双十一这四款性价比樱桃轴机械键盘值得一看_搜狐汽车...
- 推荐系统之DIN模型(注意力机制对业务的理解)
- 12v电源正负极区分_直流12v电源线圆形插头正负极怎么认