Css3之画哆啦A梦

最近学习完css3画图，然后就百度找了看有没有好的练手机会，看到别人博客上面有画哆啦A梦，还有小黄人，就自己看了哆啦A梦的来巩固下Css3的知识，先看看效果图

我们把这个图拆分开来，分为上下两部分，上面是头部和身体，头部主要难画的是胡须，胡须的画法是通过画椭圆，然后用border-bottom:1px solid #000,椭圆的背景颜色设置为透明background:transparent，然后通过定位旋转完成，还有一个比较不好做的就是鞋子是用渐变做出有点3D的效果，其实做这种不然，就是需要耐心，大家也去动手做下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>哆啦A梦</title></head><body><div class="robot"><div class="head"><div class="face"><!--眼睛--><div class="yes"><div class="robot-res"><div class="linear"></div><div class="left-yes"></div></div><div class="robot-res"><div class="linear"></div><div class="right-yes"></div></div></div><!--鼻子--><div class="nose"></div><!--嘴巴--><div class="mouth"><div></div><div></div></div><!--胡须--><div class="beard-left"></div><div class="beard-right"></div></div></div><div class="neck"></div><div class="bell"><div class="line"></div></div><div class="body"><div class="pocket-bg"></div><div class="hand"><div class="left-hand"></div><div class="right-hand"></div></div><div class="foot"><div class="left-foot"></div><div class="right-foot"></div></div></div></div></body><style>body{margin: 0;padding: 0;background: #fff;width:100%;}.robot{position: relative;}.head{width:400px;margin: 10px auto;margin-bottom: 0;height:350px;/*background-color:#53a8d9;*/background-image:radial-gradient(ellipse at top right,#73c1ef,#53a8d9);border-radius:50% 50% 25% 25% / 55% 55% 45% 45%;position:relative;z-index: 4;}.face{width:310px;height:260px;background-color:white;border-radius:50% 50% 25% 25% / 55% 55% 45% 45%;position:absolute;bottom: 0;left:45px;z-index: 4;cursor:pointer;}.yes{display: flex;flex-direction: row;position: absolute;left: 70px;top:-40px;z-index: 10;}.robot-res{width:80px;height:100px;border-radius: 50%;background: #fff;border:2px solid #000;z-index: 5;position: relative;          }.robot-res .linear{width:100%;height:2px;background: #000;position: absolute;top:45px;display: none;transition: all 1s;}.left-yes{width:20px;height:25px;border-radius: 50%;background: #000;position: absolute;right:0px;top:45px;border:2px solid #000;z-index: 5;}.left-yes:before{content: '';width:10px;height:10px;border-radius: 50%;background: #fff;position: absolute;right:0px;top:7px;z-index: 15;}.right-yes{width:20px;height:25px;border-radius: 50%;background: #000;position: absolute;left:0px;top:45px;border:2px solid #000;z-index: 5;transition: all 1s;}.right-yes:before{content: '';width:10px;height:10px;border-radius: 50%;background: #fff;position: absolute;right:0px;top:7px;z-index: 15;}.nose{width:30px;height: 30px;background:#c70000;border-radius: 50%;position: absolute;top:40px;left:50%;margin-left:-15px;z-index: 5;}.nose:before{content: '';width:10px;height:10px;border-radius: 50%;background: #fff;position: absolute;right:0px;top:10px;z-index: 15;}.mouth{width:250px;height:200px;background:snow;border-radius: 50%;border-bottom: 2px #000 solid;position: absolute;left:50%;margin-left:-125px;top:30px;z-index: 4;}.mouth:before{content: '';height:140px;width:2px;margin-left:-1px;background:#000;position:absolute;left:50%;top:20px;}.face:hover .mouth{position: absolute;left:50%;margin-left:-90px;width: 180px;height: 200px;border-radius: 0;z-index: 2;}.face:hover .right-yes{left:57px;}.face:hover .linear{display: block;}.beard-left{width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:70px;left:-20px;transform: rotate(190deg);}.beard-left:before{content: '';width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:-30px;left:-5px;transform: rotate(-5deg);}.beard-left:after{content: '';width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:-60px;left:-5px;transform: rotate(-10deg);}.beard-right{width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:70px;left:200px;transform: rotate(170deg);}.beard-right:before{content: '';width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:-30px;left:5px;transform: rotate(5deg);}.beard-right:after{content: '';width:130px;height:40px;border-radius: 50%;background:transparent;z-index: 999;border-bottom:2px solid #000;position: absolute;top:-60px;left:5px;transform: rotate(10deg);}.neck{width:330px;height:200px;background: #e30000;border-radius: 50% 50% 20% 20%/50% 50% 50% 50%;position: absolute;left:50%;margin-left:-165px;bottom:-22px;       z-index: 2; }   .neck:before{content: '';width:60px;height:4px;background: snow;border-radius: 10px;position: absolute;left:60px;bottom: 16px;z-index: 4;         }.bell{width:40px;height:40px;background: #ffdd2e;border-radius: 50%;position: absolute;left:50%;margin-left:-22px;bottom:-43px;border:2px solid #000;          transition: all 1s ease-in-out; z-index: 2;}.bell:before{content: '';width:42px;height:5px;background: #ffdd2e;border-radius: 10px;position: absolute;left:50%;margin-left:-23px;top:12px;z-index: 5;border:2px solid #000;   }.bell:after{content: '';width:10px;height:10px;background: #6c5844;border-radius: 50%;position: absolute;left:50%;margin-left:-6px;bottom:5px;border:1px solid #000; }.bell:hover{transform: scale(1.5);bottom:-55px;}.line{width:2px;height:5px;background: #000;position: absolute;left:50%;margin-left:-1px;bottom:0;}.body{width:280px;height:220px;background: #53a8d9;position: absolute;left:50%;margin-left:-140px;  border:1px solid #000;  }.pocket-bg{width:200px;height:200px;background:#fff;border-radius:50%;position: absolute;left: 50%;top:-20px;margin-left: -100px;border: 1px solid #000;}.pocket-bg:before{content: "";width:150px;height:75px;border-radius: 0 0 75px 75px;border:1px solid #000;position: absolute;top: 100px;left: 50%;margin-left:-76px;}.left-hand{width:110px;height:50px;background: #53a8d9;position: absolute;top:13px;left: -80px;border:1px solid #000;border-right: 0;border-bottom:0;transform: rotate(-38deg);z-index: 1;}.left-hand:before{content: '';width:65px;height:65px;background-color: #fff;border: 1px solid #000;border-radius: 50%;position: absolute;left: -25px;top:-9px}.left-hand:after{content: '';width:40px;height:1px;background-color: #000;position: absolute;left: 27px;bottom:0px}.right-hand{width:110px;height:50px;background: #53a8d9;position: absolute;top:13px;right: -75px;border:1px solid #000;border-left: 0;border-bottom:0;transform: rotate(38deg);z-index: 1;}.right-hand:before{content: '';width:65px;height:65px;background-color: #fff;border: 1px solid #000;border-radius: 50%;position: absolute;right: -35px;top:-8px}.right-hand:after{content: '';width:40px;height:1px;background-color: #000;position: absolute;right: 20px;bottom:0px}.left-foot{width:145px;height:30px;background:#fff;background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));border:1px solid #000;position: absolute;bottom: -30px;left:-20px;border-radius: 80px 60px 60px 40px;box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);}.right-foot{width:145px;height:30px;background:#fff;background: -webkit-gradient(linear, left top, right bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));border:1px solid #000;position: absolute;bottom: -30px;right:-22px;/*transform: rotate(-180deg);*/border-radius: 60px 80px 40px 60px;box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);}.body:before{content: '';width:40px;height:20px;background: #fff;position: absolute;border: 1px solid #000;border-bottom: 0;border-radius: 20px 20px 0 0;bottom:-1px;left: 50%;margin-left: -20px;}</style>
</html>

Css3之画哆啦A梦相关推荐

哆啦a梦简单图画python编程_[python]画哆啦A梦,Python,绘制
from turtle import * #无轨迹跳跃 defmy_goto(x, y): penup() goto(x, y) pendown()#眼睛 defeyes(): fillcolor(& ...
多啦a梦的python代码_分享一篇文本文档画哆啦A梦代码！
#encoding=utf-8 #Drawcat 画多啦A梦 from turtle import * # 无轨迹跳跃 def my_goto(x, y): penup() goto(x, y) pe ...
MATLAB画哆啦A梦
MATLAB画哆啦A梦 %===========================================% %--------------MATLAB绘制哆啦A梦-------------% ...
用Python画哆啦A梦
from turtle import *# 无轨迹跳跃 def my_goto(x, y):penup()goto(x, y)pendown()# 眼睛 def eyes():fillcolor(&q ...
用python画哆啦a梦的头,用python画多来a梦-【Python】绘制哆啦A梦
from turtle import * #无轨迹跳跃 defmy_goto(x, y): penup() goto(x, y) pendown()#眼睛 defeyes(): fillcolor(& ...
用python画哆啦a梦的身体_每天一个Python小技巧，用Python 画个多啦A梦，小猪佩奇，文末还有Python入门学习视频...
见网络上有人用Python 画出来个多啦A梦,很是新奇,来来来,我们看一下他们主要用到的库. 其实主要用的库就一个 turtle 库先说明一下turtle绘图的基础知识: 1. 画布(canvas) ...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...
python编程100例海绵宝宝-用python画哆啦a梦
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 也收到了读者想用 python 画各种图的各种需求. 和一些读者沟通后才 ...
纯CSS3画哆啦A梦
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>哆啦A ...

Css3之画哆啦A梦

Css3之画哆啦A梦相关推荐

最新文章

热门文章