div+css制作哆啦A梦
纯CSS代码加上
哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS。代码，来做一个动画版的哆啦A梦.
效果图：
下面代码同学可以查看一下，每个线条及椭圆都是纯CSS代码生成。
首先分析结构
根据原图，将哆啦A梦分为几个结构，然后再分解其他部位。
画出各部分的形状和颜色，然后使用绝对定位（absolute）和相对定位（relative）改变其位置。
各种带弧度形状，使用border-radius属性实现。
倾斜角度，使用transform属性实现。
使用background属性的-webkit-gradient() / -moz-linear-gradient() 画出身体部分的线性色彩变化。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哆啦A梦（机器猫）动画版</title>
</head>
<body>
<!-- content是整个哆啦A梦的主体 -->
<div class="content">
<!-- 哆啦A梦的头部 -->
<div class="head"></div>
<!-- 哆啦A梦的脸部 -->
<div class="face">
</div>
<div class="eye">
<div></div>
<div></div>
</div>
<div class="eye-2">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<!-- 哆啦A梦的鼻子 -->
<div class="nose">
<div class="nose-2"></div>
<div class="nose-3"></div>
</div>
<!-- 哆啦A梦的胡子 -->
<div class="huzi">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="huzi2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 哆啦A梦围巾 -->
<div class="weijin"></div>
</div>
</body>
</html>
css代码如下：
<style>
/*给背景设置渐变色*/
body {
background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
/*给哆啦A梦整体设置宽度*/
.content{
width: 333px;
height: 350px;
position: relative;
margin: 50px auto;
/*让content 执行keyframes动画*/
animation: play 5s linear infinite;
}
/*头设置*/
.head {
width: 325px;
height: 325px;
border-radius: 50%;
background-color: #0dacd7;
border: 2px solid #555555;
transition: 3s;
}
/*脸设置*/
.face{
width: 270px;
height: 200px;
background-color: white;
border-radius: 130px;
position: absolute;
top: 115px;
left: 31px;
transition: 3s;
}
/*眼睛设置*/
.eye {
width: 158px;
position: absolute;
top: 82px;
left: 90px;
transition: 3s;
}
.eye>div{
width: 75px;
height: 90px;
background-color: white;
border: 2px solid black;
border-radius: 40px;
float: left;
transition: 3s;
}
.eye-2>div{
width: 17px;
height: 30px;
border-radius: 50%;
background-color: black;
position: relative;
}
.eye-2>div:nth-child(1){
position: absolute;
top: 116px;
left: 136px;
}
.eye-2>div:nth-child(2){
position: absolute;
top: 116px;
left: 184px;
}
.eye-2>div>div {
width: 9px;
height: 9px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 13px;
left: 5px;
}
/*鼻子设置*/
.nose{
width: 32px;
height: 32px;
background-color: #c93300;
border-radius: 50%;
position: absolute;
top: 159px;
left: 153px;
}
.nose-2 {
width: 3px;
height: 80px;
background-color: black;
position: absolute;
top: 32px;
left: 14px;
}
.nose-3 {
width: 147px;
height: 77px;
border-bottom: 3px solid black;
border-radius: 50%;
position: absolute;
top: 35px;
left: -58px;
}
/*围巾设置*/
.weijin{
width: 240px;
height: 24px;
background-color: #ab2800;
border-radius: 9px;
position: absolute;
top: 305px;
left: 45px;
}
/*胡子设置*/
.huzi {
position: absolute;
top: 186px;
left: 54px;
}
.huzi>div:nth-child(1){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(15deg);
transition: 3s;
}
.huzi>div:nth-child(2){
width: 60px;
height: 2px;
background-color: black;
margin-top: 20px;
margin-bottom: 20px;
transition: 3s;
}
.huzi>div:nth-child(3){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(-15deg);
}
.huzi2 {
position: absolute;
top: 186px;
left: 224px;
}
.huzi2>div:nth-child(1){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(165deg);
}
.huzi2>div:nth-child(2){
width: 60px;
height: 2px;
background-color: black;
margin-top: 20px;
margin-bottom: 20px;
}
.huzi2>div:nth-child(3){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(-165deg);
}
/*设置哆啦A梦移动路径的动画*/
@keyframes play {
0{
transform: rotate(0deg) translateX(0);
}
15%{
transform: translateX(400px) rotate(190deg);
}
30%{
transform: translateX(0px) rotate(-80deg);
}
45%{
transform: translateX(-400px) rotate(-175deg);
}
60%{
transform: translateX(-100px) rotate(-20deg);
}
80%{
transform: rotate(190deg) translateY(-300px);
}
100%{
transform: rotate(-20 deg) translateY(200px);
}
}
</style>
div+css制作哆啦A梦的更多相关文章
- 一言不合敲代码（1）——DIV+CSS3制作哆啦A梦头像
先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...
- DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- 纯css画哆啦A梦
今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...
- 项目实战之玩转div+css制作自己定义形状
项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- ODBC数据导入
这个方法其实是导入excel 首先进入pl/sql dev (1):tools-->ODBC importer (2):点击connect,选择需要导入的excel (3):如果事先数据库中没有 ...
- SpringCloud微服务基础学习
看了蚂蚁课堂的微服务学习,确实学习了不少关于微服务的知识,现在总结学习如下 : SpringCloud微服务基础单点系统架构传统项目架构传统项目分为三层架构,将业务逻辑层.数据库访问层.控制层放入在一 ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- flask与flask-script的使用
flask与flask-script的使用 一.安装 pip install Flask-Script 二.简单的使用 # manage.py from flask_script import Man ...
- 五 查询数据SELECT 一、单表查询
一 单表查询的语法 二 关键字的执行优先级 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 ...
- day 26作业
作业 1.整理TCP三次握手.四次挥手图 三次握手 起初A和B都处于CLOSED状态--B创建TCB,处于LISTEN状态,等待A请求--A创建TCB,发送连接请求(SYN=1,seq=x),进入SY ...
- PHP 根据配置转换数组中的键名 方便给前端的时候改键名
/** * 根据配置转换数组中的键名 * @param array $data 数据,必须为二维数组格式 [0=>[]] * @param array $keyNameMapArr 键名转换配置 ...
- MySQL Percona Toolkit--pt-osc重点参数
修改命令参数alter .不需要包含alter table关键字,可以包含多个修改操作,使用逗号分开,如"drop clolumn c1, add column c2 int" . ...
- Walle实现自动发布
walle是啥?能干啥?有啥用?这些我都不会去一一道来,如果你还没有明白前面提出的三个问题就不用往下看了,这里这回将walle安装了怎么去使用.如果都要面面俱到不是一两篇博客可以解决的问题,如果希望将 ...
- angular 升级到angular8 以及报错信息解决
1.升级全局angular-cli npm install -g @angular/cli@latest 2.升级项目内 angular-cli (在需要升级的项目中运行) npm i @angula ...