必練案例來啦！用HTML和CSS徒手畫哆啦A夢和小黃人

天，小編帶大家用html和css，徒手畫一個哆啦A夢和小黃人，順帶畫個根據目前時間運行的小時鐘，而且小黃人還有特效哦！

先給大家看看，完成后的效果吧；同時小編建議大家多多打代碼，出來的效果很有成就感哦！

哆啦A夢版如下：

哆啦A夢

接下來畫個小黃人：

無效果的小黃人

當鼠標移動到小黃人時，效果是這樣的：（效果在于眼睛、嘴巴、和提示框）

鼠標懸停時的小黃人

最后，順帶畫個小時鐘（可以運行的哦）

可根據當前時間運行

最后貼上代碼（特別注意的是，為了時間一些效果等，文中會使用到簡單的js，同時也需要jQuery文件）：

第一部分：HTML部分的代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

$(function(){

$('.cat1').hover(function(){

$('.dialog').addClass('dialogs');

$('.mouth').addClass('mouths');

$('.circle').addClass('circles');

},function(){

$('.dialog').removeClass('dialogs');

$('.mouth').removeClass('mouths');

$('.circle').removeClass('circles');

})

// 畫機器貓

var ctx = document.getElementById('canvas').getContext('2d');

// 畫矩形

function drawRect(x, y, w, h, l, colorStroke, colorFill) {

ctx.beginPath();

ctx.lineWidth = l;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.fillRect(x,y,w,h);

ctx.strokeRect(x,y,w,h);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//畫不規則四邊形

function drawShape(x1,y1,x2,y2,x3,y3,x4,y4,w,colorStroke,colorFill){

ctx.beginPath();

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.lineWidth = w;

ctx.moveTo(x1,y1);

ctx.lineTo(x2,y2);

ctx.lineTo(x3,y3);

ctx.lineTo(x4,y4);

ctx.closePath();

ctx.stroke();

ctx.fill();

}

//畫圓

function drawCircle(x, y, r, w, colorStroke, colorFill) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.arc(x,y,r,0,Math.PI*2);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//畫圓弧

function drawRound(x, y, r, w, colorStroke, colorFill, sa, ea, flag) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.arc(x,y,r,sa,ea,flag);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//畫圓角矩形

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, l, colorStroke, colorFill) {

if (w < 2 * r) r = w / 2;

if (h < 2 * r) r = h / 2;

this.beginPath();

this.lineWidth = l;

this.strokeStyle = colorStroke;

this.fillStyle = colorFill;

this.moveTo(x+r, y);

this.arcTo(x+w, y, x+w, y+h, r);

this.arcTo(x+w, y+h, x, y+h, r);

this.arcTo(x, y+h, x, y, r);

this.arcTo(x, y, x+w, y, r);

this.closePath();

return this;

}

//畫橢圓

function EllipseTwo(context, x, y, a, b) {

context.save();

var r = (a > b) ? a : b;

var ratioX = a / r;

var ratioY = b / r;

context.scale(ratioX, ratioY);

context.beginPath();

context.fillStyle="green";

context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);

context.closePath();

context.restore();

context.fill();

}

//畫線段

function drawLine(x, y, a, b, w, color) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = color;

ctx.moveTo(x, y);

ctx.lineTo(a, b);

ctx.stroke();

ctx.closePath();

}

drawCircle(258, 150, 120, 4, "#333", "#0cacd8");

drawCircle(258, 170, 90, 0, "#fff", "#fff");

drawCircle(255, 123, 16, 2, "#000", "#c83000");

ctx.roundRect(194,50,60,70,30,2,"#000","#fff").fill();

ctx.roundRect(194,50,60,70,30,2,"#000","#fff").stroke();

ctx.roundRect(255,50,60,70,30,2,"#000","#fff").fill();

ctx.roundRect(255,50,60,70,30,2,"#000","#fff").stroke();

drawCircle(242, 90, 7, 0, "#fff", "#000");

drawCircle(267, 90, 7, 0, "#fff", "#000");

drawLine(255, 140, 255, 220, 3, "#333");

drawLine(170, 150, 220, 160, 2, "#333");

drawLine(165, 170, 220, 170, 2, "#333");

drawLine(170, 195, 220, 180, 2, "#333");

drawLine(295, 160, 345, 145, 2, "#333");

drawLine(295, 170, 349, 170, 2, "#333");

drawLine(295, 180, 345, 195, 2, "#333");

drawRect(170,260,180,170,2,"#333","#00a0cc");

drawRound(255,150,85,2,"#333","transparent",Math.PI/4,Math.PI*3/4,false);

drawRound(260,320,85,4,"#000","#fff",Math.PI*5/4,Math.PI*7/4,true);

drawRound(260,320,60,4,"#000","#fff",0,Math.PI,false);

drawLine(198, 320, 321, 320, 2, "#000");

drawRound(260,431,11,3,"#000","#fff",0,Math.PI,true);

ctx.roundRect(152,427,104,30,15,2,"#000","#fff").fill();

ctx.roundRect(152,427,104,30,15,2,"#000","#fff").stroke();

ctx.roundRect(263,427,104,30,15,2,"#000","#fff").fill();

ctx.roundRect(263,427,104,30,15,2,"#000","#fff").stroke();

drawShape(169,270,169,335,125,352,95,311,2,"000","#0094bc");

drawShape(351,270,351,335,400,352,425,311,2,"000","#0094bc");

drawCircle(100, 340, 30, 4, "#000", "#fff");

drawCircle(420, 340, 30, 4, "#000", "#fff");

drawLine(170, 270, 170, 325, 3, "#0094bc");

drawLine(350, 270, 350, 325, 3, "#0094bc");

ctx.roundRect(165,250,190,20,10,2,"#000","#a01c00").fill();

ctx.roundRect(165,250,190,20,10,2,"#000","#a01c00").stroke();

drawCircle(255, 278, 20, 4, "#000", "#e4dc18");

drawCircle(255, 285, 6, 0, "transparent", "#000");

drawLine(255, 285, 255, 299, 3, "#000");

drawRect(236,270,38,4,2,"#333","#d4cc10");

})

window.onload=function(){

//畫時鐘

var canvas1 = document.getElementById('canvas1');

var ctx1 = canvas1.getContext('2d');

// 畫圓

function drawCircle(x, y, r, w, colorStroke, colorFill) {

ctx1.save();

ctx1.beginPath();

ctx1.lineWidth = w;

ctx1.strokeStyle = colorStroke;

ctx1.fillStyle=colorFill;

ctx1.shadowOffsetX=3;

ctx1.shadowOffsetY=3;

ctx1.shadowBlur=15;

ctx1.shadowColor="#000";

ctx1.arc(x,y,r,0,Math.PI*2);

ctx1.stroke();

ctx1.fill();

ctx1.closePath();

ctx1.restore();

}

//畫針

function drawLine(x, y, a, b, w, color, time) {

ctx1.save();

ctx1.lineWidth = w;

ctx1.strokeStyle = color;

ctx1.shadowOffsetX=1;

ctx1.shadowOffsetY=1;

ctx1.shadowBlur=5;

ctx1.shadowColor="#333";

ctx1.translate(250,250);

ctx1.rotate(time*Math.PI/180);

ctx1.beginPath();

ctx1.moveTo(x, y);

ctx1.lineTo(a, b);

ctx1.stroke();

ctx1.closePath();

ctx1.restore();

}

function drawClock(){

ctx1.clearRect(0,0,500,500);

var now = new Date();

var hour = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

hour = hour + min/60;

hour=hour>12?hour-12:hour;

drawCircle(250, 250, 200, 5, "#0000ff", "transparent");

for (var i = 0; i < 60; i++) {

ctx1.save();

if (i%5==0) {

ctx1.lineWidth = 7;

}else{

ctx1.lineWidth = 5;

}

ctx1.strokeStyle = "#000";

ctx1.translate(250,250);

ctx1.rotate(i*Math.PI/30);

ctx1.beginPath();

if(i%5==0){

ctx1.moveTo(0,-170);

}else{

ctx1.moveTo(0,-180);

}

ctx1.lineTo(0,-190);

ctx1.stroke();

ctx1.closePath();

ctx1.restore();

}

drawLine(0, -100, 0, 10, 7, "red", hour*30);

drawLine(0, -150, 0, 15, 4, "green", min*6);

drawLine(0, -185, 0, 20, 2, "purple", sec*6);

drawCircle(250, 250, 5, 5, "purple", "#fff");

}

drawClock();

setInterval(drawClock,1000);

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

第二部分：CSS部分的代碼如下：

@charset "UTF-8";

margin: 0;

padding: 0;

list-style: none;

outline: none;

font-family: '微軟雅黑';

}

.cat{

width: 500px;

height: 500px;

border: solid 1px cyan;

padding: 50px;

position: relative;

background-color: #c1fbff;

margin:0 auto;

}

.cat1{

width: 160px;

height: 280px;

background-color: #ffdc40;

border-radius: 80px;

position: absolute;

left: 50%;

top: 50%;

margin: -150px 0 0 -150px;

overflow: hidden;

border: solid 3px #000;

z-index: 99;

}

.cat2{

width: 240px;

height: 240px;

position: absolute;

bottom: -160px;

left: -50px;

background-color: #2074a0;

border: solid 3px #000;

}

.cat3{

width: 110px;

height: 40px;

position: absolute;

bottom: 83px;

left: 22px;

background-color: #2074a0;

border: solid 3px #000;

border-bottom-color: #2074a0;

}

.middle{

width: 52px;

height: 32px;

border: solid 3px #000;

border-radius: 0 0 15px 15px;

position: absolute;

left: 27px;

top: 25px;

}

.eyes{

width: 60px;

height: 60px;

border-radius: 50%;

border: solid 3px #000;

background-color: #fff;

position: absolute;

top: 40px;

z-index: 99;

}

.left1{

left: 14px;

}

.right1{

right: 14px;

}

.circle{

display: block;

width: 26px;

height: 26px;

border-radius: 50%;

background-color: #000;

position: absolute;

left: 13px;

top: 18px;

transition:.3s;

}

.circles{

left: 23px;

}

.circle em{

display: block;

width: 13px;

height: 13px;

border-radius: 50%;

background-color: #fff;

position: absolute;

left: 8px;

top: 5px;

}

.mouth{

width: 40px;

height: 12px;

border: solid 3px #000;

border-radius: 0 0 100% 100%;

background-color: #fff;

position: absolute;

left: 57px;

top: 120px;

transition:.3s;

}

.mouths{

transform:scale(1.2);

}

.glass{

width: 30px;

height: 10px;

background-color: #000;

position: absolute;

top: 70px;

z-index: 88;

}

.left2{

left: -5px;

transform:rotate(10deg);

}

.right2{

right: -5px;

transform:rotate(-10deg);

}

.feet{

width: 100px;

height: 45px;

position: absolute;

left: 183px;

bottom: 133px;

}

.foot1{

width: 22px;

height: 40px;

background-color: #000;

border-radius: 0 0 10px 0;

position: absolute;

bottom: 0;

}

.foot2{

width: 45px;

height: 23px;

background-color: #000;

position: absolute;

bottom: 0;

}

.left3 .foot1{

border-radius: 0 0 10px 0;

left: 23px;

}

.left3 .foot2{

border-radius: 16px 0 3px 6px;

left: 0px;

}

.right3 .foot1{

border-radius: 0 0 0px 10px;

right: 23px;

}

.right3 .foot2{

border-radius: 0 16px 6px 3px;

right: 0px;

}

.arm{

width: 50px;

height: 50px;

background-color: #fcdf3b;

border:solid 3px #000;

border-radius: 10px;

transform:rotate(45deg);

position: absolute;

top: 290px;

z-index: 77;

}

.arm.left{

left:133px;

}

.arm.right{

left:278px;

}

.trou{

width: 50px;

height: 12px;

border: solid 3px #000;

background-color: #1b7c9c;

position: absolute;

top: 133px;

}

.trou.left{

left:-16px;

transform:rotate(45deg);

}

.trou.right{

right:-16px;

transform:rotate(-45deg);

}

.lines{

display: block;

width: 30px;

height: 30px;

border-style: solid;

border-width: 3px;

border-radius: 50%;

position: absolute;

bottom: 50px;

}

.lines.left{

left:-14px;

border-color: transparent transparent #000 transparent;

transform:rotate(-45deg);

}

.lines.right{

right:-13px;

border-color: #000 transparent transparent transparent;

transform:rotate(-135deg);

}

.line_middle{

display: block;

width:3px;

height: 35px;

background-color: #000;

position: absolute;

bottom: 0;

left: 79px;

}

.hair{

width: 47px;

height:77px;

border-color: #000 #000 transparent transparent;

border-style: solid;

border-width: 0 6px;

border-radius: 50%;

position: absolute;

left: 168px;

top: 128px;

transform:rotate(-90deg);

}

.hairs{

width: 27px;

height:47px;

border-color: #000 #000 transparent transparent;

border-style: solid;

border-width: 0 3px;

border-radius: 50%;

position: absolute;

right: 2px;

top: 26px;

}

.dialog{

overflow: hidden;

width: 150px;

height: 75px;

position: absolute;

right: 160px;

top: 130px;

transition:.3s;

opacity: 0;

}

.sen{

width: 140px;

height: 70px;

border: solid 2px green;

border-radius: 100%;

color: orange;

font-weight: bold;

line-height: 70px;

text-align: center;

position: absolute;

right: 0px;

top: 0px;

}

.tri{

display: block;

width: 10px;

height: 10px;

transform:skewY(-45deg) rotate(-75deg);

border-style: solid;

border-width: 2px;

border-color: green transparent transparent green;

position: absolute;

bottom: 7px;

left: 20px;

}

.dialog .line{

width: 8px;

height: 3px;

background-color: #c1fbff;

transform:rotate(25deg);

position: absolute;

left: 23px;

top: 60px;

}

.dialogs{

opacity: 1;

right: 130px;

top: 100px;

}

#canvas{

display: block;

margin: 20px auto;

background:#fff;

border:solid 1px #ff6600;

}

#canvas1{

display: block;

background-color: #ffff00;

margin: 20px auto;

}

最后，小編覺得以上的畫不過是自己的興趣同時也是舉個例子，大家可以畫出各種各樣的你想要的圖像，只要你動手畫絕對沒有問題。

近在網上看到有人用CSS3寫了一個可愛的小黃人，就自己也試試看，下面是代碼，大家可以看看效果，很好玩。純屬娛樂！注：不兼容ie9以下瀏覽器。

效果圖：

代碼如下

html結構代碼：

css樣式代碼（樣式有點多，需要代碼的可以私聊我！）：

些人就不要看了

如果明顯感到不適，就不要看了。

人生苦短，勤勤懇懇是唯一答案。

事無綱則繁

測試三連？

1.整個小黃人包含在div的container中，請寫出container的div標簽;

2.container類的div標簽，包含一個minion類，請寫出minion的div標簽中；

3.小黃人的頭發可以用什么標簽表示？

你以為行了？

疑問三連

1.position中，小黃人使用的定位使用的定位是absolute,fixed,relative,static,inherit其中的那個？
2.container {}中，padding margin display perspective perspective-origin中的透視圖作用？
.goggle-frame可以分為幾部分？

評論區:

張三:這也太難了？

李四:太難了？不想學？UPWork /h到/h不等，你需要的Web Developer都有。網址如下:

https://www.upwork.com.

在線咨詢

上一篇：在網頁設計時都會用到哪些HTML標題標簽？
下一篇：HTML網頁編程之Span標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

必練案例來啦！用HTML和CSS徒手畫哆啦A夢和小黃人

第一部分：HTML部分的代碼如下：

第二部分：CSS部分的代碼如下：

些人就不要看了

事無綱則繁

評論區:

您的項目需求