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都是自己写的......所以就可以来当个简 ...
最新文章
- 要不要读博?机器学习博五学生和强化学习博士展开了一场battle
- 玹疯:这些年我走过的弯路
- svn is already under version control问题解决
- 华为又对计算机视觉下手了!
- 系统架构设计师软考考后回顾
- 论述计算机与外设的访问控制方法,试论述计算机与外设访问控制的方法有多少种各有什么优缺点...
- 计算机组成原理4位ALU运算器设计,计算机组成原理课程设计-alu设计和4位锁存器设计.doc...
- 使用泛型, 写一个为任意类型的动态数组添加元素的方法
- Coverity代码扫描工具
- 按蚂蚁金服面试不过,就因为不会RPC服务超时排查思路?
- 完美tbody滚动效果
- linux c++ 获取当前时间毫秒_Linux 切换工作目录
- 韩顺平 2021零基础学Java 学习笔记(2)(自用)
- 2010-2019,我,一个普通职场人的十年变迁
- python selenium 爬虫 网站seo刷流量 第一篇:百度搜索
- 中文书籍对《人月神话》的引用(2021.10.18更新共120本):告别失控、重构极限编程……
- 食品保质期提醒应用 android,保质期提醒app
- 一篇通俗易懂的Android视图系统设计与实现,阿里资深Android开发带你入门Framework
- rtl8188eu无线网卡驱动移植
- 30天自制操作系统——第12-13天实验总结
热门文章
- m语言控制rtw仿真
- Elastic-Job编译部署运维平台 Console
- oracle里面如何查询sqlid,CSS_oracle中如何查看sql, --查询表状态:select uo.O - phpStudy...
- 文章出轨被爆是愚人节整蛊 网民你知道吗?
- 旺旺老师JavaSE基础第一章(05)Java优点与缺点
- c# uwp html源码,调试 UWP 应用中的 HTML 和 CSS - Visual Studio | Microsoft Docs
- HDU 6917 Shorten the array
- kafka消息系统-Net开发库的使用与选择
- LCT 支持删边、加边并维护森林中每棵子树的大小
- 特斯拉再陷舆论危机!中控屏问题频发遭调查,官方将质保期减半