#html#画哆啦a梦

于 2021-06-26 10:57:50 发布
阅读量336 收藏 5
点赞数 1
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44849854/article/details/118162545
版权 
简单画图，对html还是不太熟悉，画得不太像。
<!--
 * @Descripttion: 
 * @version: 
 * @Author: ZhuJianwei
 * @Date: 2021-06-22 09:14:06
 * @LastEditors: ZhuJianwei
 * @LastEditTime: 2021-06-23 17:49:18
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
            
        }

        html,
        body {
    
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
    
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 怪异盒模型 */
            box-sizing: border-box;
            position: relative;

        }

        .box div {
    
            position: absolute;
        }

        /* 头部 */
        .head {
    
            width: 320px;
            height: 300px;
            justify-content: center;
            align-items: center;
            border: 2px solid #223b41;
            background: #09b8e3;
            border-radius: 160px 160px 170px 170px;
            position: relative;
            z-index: 0;
            box-shadow: -15px 30px 30px -30px #fff inset, 15px -30px 30px -30px #000 inset, -68px 40px 85px -60px #8b8b8b;
        }

        .head p {
    
            position: absolute;
        }

        .face {
    
            /* 大小 */
            width: 270px;
            height: 200px;
            /* 位置 */
            top: 90px;
            left: 24px;
            border-radius: 50%;
            /* 圆边界 */
            background: #fff;
            /* 背景色 */
            /* 边界 */
            border: 2px solid #223b41;
            z-index: 3;
            position: relative;
        }

        .face i {
    
            position: absolute;
        }

        .bread1 {
    
            width: 60px;
            height: 2px;
            top: 94px;
            left: 24px;
            transform: rotate(-15deg);
            background: #000;
        }

        .bread2 {
    
            width: 60px;
            height: 2px;
            top: 63px;
            left: 24px;
            transform: rotate(15deg);
            background: #000;
        }

        .bread3 {
    
            width: 60px;
            height: 2px;
            top: 78px;
            left: 24px;
            background: #000;
        }

        .bread4 {
    
            width: 60px;
            height: 2px;
            top: 94px;
            right: 24px;
            transform: rotate(15deg);
            background: #000;
        }

        .bread5 {
    
            width: 60px;
            height: 2px;
            top: 63px;
            right: 24px;
            transform: rotate(-15de
最低0.47元/天 解锁文章
睡觉哇啊
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
weixin_30294759的博客
07-01 1674
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:复制代码接着定义一个div，用来显示坐标复制代码接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(...
【基础教程】超可爱CSS3叮当猫动画（含源码）
weixin_52578018的博客
12-02 509
一、项目教程 运行效果 教程 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超可爱CSS3叮当猫动画</title> <style> body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; to
html 与 css 画哆啦A梦
小星落
03-09 2160
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big { width: 500px; height: 530px; position: absolute; .
用基础的HTML和CSS画出一个哆啦A梦
weixin_45172028的博客
08-16 1342
利用html和css中的定位和css3的2D转换属性，画出一个蓝胖子。
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
总的来说，这个“CSS3+HTML5画哆啦A梦”的项目不仅展示了HTML5和CSS3的强大功能，也体现了开发者创新和趣味性的结合。通过这样的实践，我们可以更好地理解和掌握这些技术，同时也能激发更多关于网页设计的灵感。无论...
duolaameng:js画哆啦A梦
05-06
在本项目"duolaameng:js画哆啦A梦"中，我们主要探讨的是如何使用JavaScript编程语言绘制哆啦A梦的形象。这个项目可能是为了展示JavaScript在网页动画或者图形绘制方面的应用，同时也可能是一个有趣的编程练习。我们...
CSS3绘制哆啦A梦头像动画代码.zip
07-11
在压缩包中的"CSS3绘制哆啦A梦头像动画代码"文件，应该包含了一个或多个CSS文件（如style.css）和HTML文件（如index.html）。CSS文件中包含了绘制头像和实现动画的样式规则，HTML文件则负责结构布局和引入这些样式。...
纯CSS3绘制哆啦A梦头像动画代码
09-08
在本项目中，我们将探讨如何使用纯CSS3技术来创建一个动态的哆啦A梦头像。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，使网页设计更为丰富和交互性更强。在"纯CSS3绘制哆...
H5-svg-画哆啦A梦
12-22
<path id='path1' d='m 101 236 A 116 116 0 1 1 245 236'> <path id='path2' d='m 118 235 A 93 70 0 1 1 233 236'> <!-- <path id='path3' d='m 231 118 A 93 70 0 0 1 233 236'></path> --> ...
h5哆啦A梦机器猫
05-03
html5+javascript 代码实现的一个哆啦A梦机器猫，方便学习h5 Canvas标签的编程爱好者
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
哆啦A梦纯HTML代码
热门推荐
qq_41418149的博客
11-14 1万+
Web基础篇 HTML-05哆啦A梦 此页面主要知识点： 一、阴影： box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影； 设置多个阴影：用逗号隔开； 二、径向渐变： background:radial-gradient() 径向渐变 circle 圆 ellipse 椭圆 clos...
css3+html5——机器猫哆啦A梦+手、脚、头动起来！
十二tel
06-10 4505
&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; *{
多来a梦html代码,html5 canvas绘制哆啦A梦机器猫图形代码
weixin_42499159的博客
06-09 994
特效描述：html5 canvas绘制 哆啦A梦 机器猫图形代码。html5 canvas利用画布绘制哆啦A梦代码结构1. HTML代码window.onload=function(){var cxt=document.getElementById('canvas').getContext('2d');cxt.beginPath();cxt.lineWidth=1;cxt.strokeStyle=...
用css3画一个哆啦A梦
chengzihy的专栏
07-28 4883
今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。 **1.
用canvas画出可爱的哆啦A梦
FleshyAPP的博客
05-11 981
用canvas画出可爱的哆啦A梦 提示：这里可以添加本文要记录的大概内容： 例如：本文就介绍了canvas案例的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、canvas是什么？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、使用步骤 1.哆啦A梦基本代码 代码如下（示例）： <!DOCTYPE html> <html l
canvas的实例--每个人都想拥有的哆啦A梦
哈喽234的博客
04-01 783
学习canvas时画的一个哆啦A梦，还有不足，以后改进
用html+css做机器猫 源代码
weixin_34054931的博客
07-07 815
先来看一下做出来的效果图，然后再来看源代码 是不是还是很像的 下面来看源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>机器猫</title> <style type="text/...
用HTML+css画一个哆啦a梦
最新发布
06-08
好的，下面是一个用HTML+CSS画哆啦A梦的示例： 1. 首先，我们需要一个HTML文件，可以使用以下代码： ``` <!DOCTYPE html> <html> 哆啦A梦 #doraemon { position: relative; width: 200px; height: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值