css哆啦A梦代码重构

最新推荐文章于 2022-04-02 12:58:44 发布
最新推荐文章于 2022-04-02 12:58:44 发布
阅读量216 收藏
点赞数
分类专栏： 趣事
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40836518/article/details/104662481
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>哆啦A梦</title>
	<style type="text/css">
		#wrapper{
    
			width: 400px;
			margin: 10px auto 0 auto;
		}
		#head{
    
			position: relative;
			width: 300px;
			height: 300px;
			margin: 0 auto;
			background-color: rgb(2,156,226);
			border: 1px solid silver;
			border-radius: 150px;
		}
		#face{
    
			position: absolute;
			top: 50px;
			left: 25px;
			width: 250px;
			height: 250px;
			background-color: white;
			border: 1px solid silver;
			border-radius: 125px;
		}
		#necktie{
    
			position: absolute;
			left: 50%;
			margin-left: -111px;
			bottom: 30px;
			height: 20px;
			width: 220px;
			border-radius: 10px;
			background-color: rgb(213,4,35);
			border: 1px solid silver;
		}
		#body{
    
			position: relative;
			width: 210px;
			height: 120px;
			margin: -32px auto 0 auto;
			border: 1px solid silver;
			background-color: rgb(2,156,226);
		}
		#foot-left, #foot-right{
    
			width: 120px;
			height: 20px;
			margin-top: -1px;
			border-radius: 10px;
			border: 1px solid silver;
			background-color: white;
		}
		#foot-left{
    	
			margin-left: 70px;
			float: left;
		}
		#foot-right{
    
			margin-right: 70px;
			float: right;
		}
		#curve{
    
			position: absolute;
			bottom: -1px;
			width: 30px;
			height: 15px;
			left: 50%;
			margin-left: -15px;
			border: 1px solid silver;
			border-radius: 15px 15px 0 0;
			border-bottom-width: 0;
			background-color: white;
		}
		#belly{
    
			position: absolute;
			top: -1px;
			left: 50%;
			margin-left: -95px;
			width: 190px;
			height: 95px;
			border: 1px solid silver;
			border-radius: 0 0 95px 95px;
			background-color: white;
		}
		#pocket{
    
			position: absolute;
			top: 18px;
			left: 50%;
			margin-left: -70px;
			width: 140px;
			height: 70px;
			border: 1px solid silver;
			border-radius: 0 0 70px 70px;
			background-color: white;
		}
		#arm-left,#arm-right{
    
			position: relative;
			margin-top: -2px;
			width: 0;
			height: 0;
			border-width:40px;
			border-style: solid;
		}
		#arm-left{
    
			float: left
最低0.47元/天 解锁文章
xk-wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML哆啦A梦
兔子王
05-14 2万+
谁不想拥有一只可爱的叮当猫呢？本期小编给大家带来了一个萌萌的哆啦A梦。
css3+html5——机器猫哆啦A梦+手、脚、头动起来！
十二tel
06-10 4499
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;机器猫&lt;/title&gt; &lt;style type="text/css"&gt; *{
python用turtle画月亮_使用Python的turtle画小猪乔治和哆啦 A 梦
weixin_39688750的博客
11-23 861
本人是Python新人小白，欢迎各位大佬指正，本文介绍的是用Python的turtle画一只小猪乔治。还有本人画画基础超级差= =没天赋，画参考度娘上的一个图片画的。先上总代码，然后说说我写的思路，import turtle as t'''t.pu() 提起画笔t.pd() 移动时绘制图形，缺省时也为绘制t.seth 设置当前朝向为angle角度t.begin_fill() 准备开始填充图...
哆啦A梦 canvas
anglinzl71200的博客
12-06 234
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &lt...
用python画多来a梦-【Python】绘制哆啦A梦
q6q6q的专栏
10-28 1659
from turtle import *#无轨迹跳跃defmy_goto(x, y):penup()goto(x, y)pendown()#眼睛defeyes():fillcolor("#ffffff")begin_fill()tracer(False)a= 2.5for i in range(120):if 0
多啦爱梦~多啦A梦CSS3测试源代码
weixin_30646315的博客
02-09 546
先直接看图片，感觉一下！一直以来，我们都在说浏览器对CSS3支持度这个问题。可是，鉴于知识认识水平问题，又没几个人真正了解CSS3是什么东西，和它在网站显示上的重要性。现在好了，日本某位大神写了个CSS3的代码，你只需点击进去，看一下你见到的多啦A梦是什么样就知道你的浏览器如何了。在给出代码之前，先来个缺点申明（这个很重要，是否看，自己考虑）：哆啦A梦欺骗了你！浏览器CSS3测试遭质疑http:...
纯CSS3绘制哆啦A梦头像动画代码
09-08
在"纯CSS3绘制哆啦A梦头像动画代码"这个主题中，我们将重点关注以下知识点： 1. CSS3选择器：为了精准地选取和操作哆啦A梦头像的各个部分，我们需要掌握CSS3中的高级选择器，如类选择器、ID选择器、伪类和属性选择...
CSS3绘制哆啦A梦头像动画代码.zip
07-11
在压缩包中的"CSS3绘制哆啦A梦头像动画代码"文件，应该包含了一个或多个CSS文件（如style.css）和HTML文件（如index.html）。CSS文件中包含了绘制头像和实现动画的样式规则，HTML文件则负责结构布局和引入这些样式。...
纯css3绘图哆啦a梦机器猫头像特效
11-24
回到“哆啦A梦机器猫头像特效”这个项目，文件"texiao2680_1560929582"很可能是完成这一特效的源代码，包括HTML结构和CSS样式。要实现这个特效，开发者可能使用了SVG（可缩放矢量图形）元素结合CSS3来创建哆啦A梦的...
CSS3绘制哆啦A梦头像动画代码
05-01
在本文中，我们将深入探讨如何使用CSS3技术来创建一个具有互动效果的哆啦A梦头像动画。CSS3是层叠样式表的第三版，它引入了许多强大的新功能，如选择器、边框和背景、过渡、动画、以及3D变换等，使网页设计更加动态...
纯CSS3多啦A梦机器猫特效特效代码
03-20
【纯CSS3多啦A梦机器猫特效代码详解】 在现代网页设计中，CSS3的引入为开发者提供了更丰富的表现力和动态效果。本篇将详细介绍如何利用纯CSS3实现一款可爱的多啦A梦机器猫招手转眼睛的动画特效。这个特效不仅能够...
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
Python自动生成哆啦A梦源码.py
01-27
感谢各位大佬们的关注
css构造多啦A梦
06-05
使用单纯的css标记，来构造一个多啦A梦。这是别人分享的，上传希望和更多的人分享。
哆啦A梦.py
11-05
用python画一个哆啦A梦的程序，想要学习python画图的，可以参考一下
CSS3做的机器猫 测试CSS3性能
05-20
本页面用于测试各个浏览器对CSS3的解释效果，左边的“图像”并非图片，而是纯CSS。目前各个浏览器对CSS3的支持效果不一样，其中IE系的浏览器支持效果最差。
用CSS把文字显示成哆啦A梦
薄荷醇
04-02 447
先看一下最终效果 左面是最终效果，右面是原图 先说说要实现这个效果使用的方法:background-clip 一、background-clip介绍 background-clip：按照MDN上说的，“设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面” 简单的说，就是你设置的背景图片，如何裁剪背景图片，或者说如何填满它所在的容器 看例子，现在有这么个样式 计算样式如下 它的CSS如下 p { border: 10px red; border-style: dotted d
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4882
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
哆啦A梦简易设计
weixin_44239035的博客
04-01 789
用html和css来设计一个哆啦A梦，主要运用了css样式改变来实现，代码有点长还可以简化很多内容，加了一点点动画的效果，其实可以让整个人盒子动起来更能实现哆啦A梦的跳动感觉，不过我还没有做。很基础的css内容。 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
使用HTML css 代码实现一个哆啦A梦
最新发布
04-11
的头像效果怎么做？ 可以使用HTML和CSS来实现一个哆啦A梦的头像效果。...接下来，可以在这个div中添加一个img标签，并通过CSS将它设置为居中显示，并调整宽、高以适应容器大小，这样便可以实现一个哆啦A梦头像的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值