哆啦A梦纯HTML代码

Web基础篇

HTML-05哆啦A梦

此页面主要知识点：
一、阴影： box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影；
设置多个阴影：用逗号隔开；
二、径向渐变： background:radial-gradient()
径向渐变
circle 圆
ellipse 椭圆
closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角

CSS样式：

.head{width:224px;height:200px;margin:100px auto 0 auto;/* background-color:#12a4d3; *//* background:linear-gradient(-135deg,#ffffff,#12a4d3 25%); */background:radial-gradient(closest-side at 88% 12%,#fff,#12a4d3);border:2px solid #365162;border-radius:50%;position:relative;box-shadow:-5px 5px 10px #9ba09c;
}
.face{width:185px;height:135px;border:2px solid black;background-color:white;border-radius:50%;position:absolute;margin:auto;left:0;right:0;top:50px;z-index:2;
}
.eye{width:50px;height:58px;border:2px solid black;background-color:white;border-radius:23px;position:absolute;top:-30px;z-index:2;
}
.eyeLeft{left:40px;
}
.eyeRight{right:40px;
}
.eyeDot{width:10px;height:10px;background-color:black;border-radius:50%;position:absolute;top:28px;
}
.eyeDotLeft{right:6px;
}
.eyeDotRight{left:6px;
}
.nose{width:20px;height:20px;border:1px solid black;background-color:#c13905;border-radius:8px;position:absolute;margin:auto;left:0;right:0;top:22px;z-index:1;
}
.noseShadow{width:0;height:0;box-shadow:0 0 3px 3px white;position:absolute;right:5px;top:8px;
}
.nostrils{width:2px;height:68px;background-color:black;position:absolute;margin:auto;left:0;right:0;top:44px;z-index:1;
}
.mouth{width:130px;height:100px;border-bottom:2px solid black;border-radius:50%;position:absolute;margin:auto;left:0;right:0;top:12px;
}
.mouthSquare{width:130px;height:50px;background-color:white;position: absolute;margin:auto;left:0;right:0;top:40px;
}
.beard{width:160px;height:2px;background-color:black;position:absolute;margin:auto;left:0;right:0;top:66px;
}
.beard02{transform:rotate(15deg);
}
.beard03{transform:rotate(-15deg);
}
.beardSquare{width:76px;height:25px;background-color:#ffffff;position:absolute;margin:auto;left:0;right:0;top:54px;
}
/* 身体 */
.body{width:154px;height:120px;background-color:#02a8d8;margin:0 auto; position:relative;top:-15px;
}
.belly{width:118px;height:118px;border:2px solid black;border-radius:50%;background-color:white;position:absolute;top:-20px;left:17px;
}
.pocket{width:90px;height:45px;border:2px solid black;border-radius:0 0 45px 45px;position:absolute;bottom:12px;left:12px;
}
.tie{width:160px;height:14px;border:1px solid black;background-color:#a51f02;border-radius:5px;position:absolute;top:-10px;left:-4px;z-index:3;
}
.bell{width:30px;height:30px;background-color:#d1c710;border:1px solid black;border-radius:50%;position: absolute;margin:auto;left:0;right:0;top:3px;
}
.bellLine{width:28px;height:2px;background-color:black;position: absolute;margin:auto;left:0;right:0;top:6px;
}
.bellLine02{width:30px;top:10px;
}
.bellDot{width:10px;height: 10px;background-color:black;border-radius:50%;position: absolute;margin:auto;left:0;right:0;bottom:6px;
}
.bellLine03{width:2px;height:6px;top:24px;
}
.bellSquare{width:0;height:0;box-shadow:0 0 5px 5px white;position: absolute;right:8px;top:8px;
}
.arm{width:30px;height:70px;background-color:#02a8d8;border:1px solid black;position: absolute;top:0;z-index:-1;
}
.armLeft{left:0;transform-origin:left top;transform:rotate(45deg);
}
.armRight{right:0;transform-origin:right top;transform:rotate(-45deg);
}
.hand{width:43px;height:43px;background-color:white;border:1px solid black;border-radius:45%;position:absolute;left:-7px;bottom:-23px;transform:rotate(45deg);
}
.foot{width:87px;height:22px;background-color:white;border:2px solid black;border-radius:22px 15px 15px 10px;position:absolute;bottom:-18px;
}
.footLeft{left:-18px;
}
.footRight{right:-18px;
}
.circle{width:14px;height:7px;border:2px solid black;border-bottom:none;border-radius:14px 14px 0 0;background-color:white;position: absolute;margin:auto;left:0;right:0;bottom:0;
}
.bodyLeft{width: 1px;height: 90px;background-color: black;position: absolute;top: 24px;left: 0px;}
.bodyRight{width: 1px;height: 90px;background-color: black;position: absolute;top: 24px;left: 153px;}

HTML部分：

<body><div class="head"><div class="face"><div class="eye eyeLeft"><div class="eyeDot eyeDotLeft"></div></div><div class="eye eyeRight"><div class="eyeDot eyeDotRight"></div></div><div class="nose"><div class="noseShadow"></div></div><div class="nostrils"></div><div class="mouth"></div><div class="mouthSquare"></div><div class="beard"></div><div class="beard beard02"></div><div class="beard beard03"></div><div class="beardSquare"></div></div></div><div class="body"><div class="belly"><div class="pocket"></div></div><div class="tie"><div class="bell"><div class="bellLine"></div><div class="bellLine bellLine02"></div><div class="bellLine bellLine03"></div><div class="bellDot"></div><div class="bellSquare"></div></div></div><div class="arm armLeft"><div class="hand"></div></div><div class="arm armRight"><div class="hand"></div></div><div class="circle"></div><div class="foot footLeft"></div><div class="foot footRight"></div><div class="bodyLeft"></div><div class="bodyRight"></div></div></body>

哆啦A梦纯HTML代码相关推荐

送小公主——哆啦A梦（Python代码实现）
目录 1 送她的多啦A梦 2 白驹过隙 3 Python代码实现 1 送她的多啦A梦一个哆啦A梦让她开心开心好久好久.我也很开心,昨天送了一个实体模型,今天用Python代码再弄一个送给她. 哆啦 ...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...
PHP画a梦,分享html打造动画哆啦A梦的示例代码
千篇一律先定义一个画哆啦a梦的大容器,确定它的大小和位置. /*哆啦A梦*/ .doa{position: relative;top: 100px;} 画哆啦a梦的头部(包括脸,脸部包括眼睛和鼻子) ...
java绘图机器猫_canvas哆啦A梦图形代码
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫. canvas画图的基本知识 context:一直觉得这个翻译成"上下文"真够蛋疼的, ...
用Python海龟画图画哆啦A梦
文章目录前言一.画哆啦A梦脸的外圈蓝色二.画哆啦A梦脸的内圈白色三.哆啦A梦的鼻子四.哆啦A梦的鼻尖五.哆啦A梦的左眼六.哆啦A梦的右眼七.哆啦A梦的左眼内部八.哆啦A梦的右眼内部 ...
纯CSS制作加div制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画, 动画的宽高比例为:" ...
用python画哆啦a梦的代码解释_python画哆啦A梦和大雄
最近从后台收到的消息来看,不少读者对 python 的 turtle 这个库感兴趣,也收到了读者想用 python 画各种图的各种需求.和一些读者沟通后才知道是学校布置了相关的作业,或者是自己想用这个 ...
多啦a梦的python代码_分享一篇文本文档画哆啦A梦代码！
#encoding=utf-8 #Drawcat 画多啦A梦 from turtle import * # 无轨迹跳跃 def my_goto(x, y): penup() goto(x, y) pe ...

哆啦A梦纯HTML代码

Web基础篇

HTML-05哆啦A梦

哆啦A梦纯HTML代码相关推荐

最新文章

热门文章