Html 哆啦A梦

最新推荐文章于 2024-05-27 13:26:13 发布
最新推荐文章于 2024-05-27 13:26:13 发布
阅读量729 收藏 12
点赞数 2
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46016079/article/details/118424852
版权

CSS动画 哆啦A梦 HTML 关键帧 挥手动画
关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <title>晕死挥手的哆啦A梦</title>
<meta charset="utf-8">
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;

    }
    .armLeft{
        animation: hh  2s linear infinite;
    }
    .armRight{
      animation: hh1  2s linear infinite;
    }

        @keyframes hh1 {
        0%{
            transform: rotate(325deg) ;
        }
        50%{
            transform: rotate(270deg);
        }
        100%{
            transform:rotate(325deg);

        }
    }

    @keyframes hh {
        0%{
            transform: rotate(45deg) ;
        }
        50%{
            transform: rotate(90deg);
        }
        100%{
            transform:rotate(45deg);

        }
    }
    
    .head{
    width:224px;
    height:200px;
    background-color: rgb(0, 176, 240);
    margin:100px auto 0 auto;
    border:2px solid #365162;
    border-radius:50%;
    position:relative;
}
.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:60%;
    position:absolute;
    top:-30px;
    z-index:2;
}
.eyeLeft{
    left:40px;
}
.eyeRight{
    right:40px;
}
.eyeDot{
    width:20px;
    height:20px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    top:28px;
}
 .eyeDotb{
    width:10px;
    height:10px;
    background-color:white;
    border-radius:50%;
    position:absolute;
    top:30px;


 }
 .eyeDotbleft{
    right: 21px;
   

 }
 .eyeDotbright{
   left: 21px;
 }
.eyeDotLeft{
    right:6px;
}
.eyeDotRight{
    left:6px;
}
.nose{
    width:20px;
    height:20px;
    border:1px solid black;
    background-color:rgb(245,27,44);
    border-radius:50%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:22px;
    z-index:1;
}
.nosedot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
}

.noseline{
    width:2px;
    height:68px;
    background-color:black;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:44px;
    z-index:1;
}

.mouth{
    width:140px;
    height:100px;
    border-bottom:2px solid black;
    border-radius:70%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:12px;
    z-index: 1;
}

.beard{
    width:174px;
    height:2px;
    background-color:black;
    position:absolute;
    border-radius: 4px;
    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:126px;
   background-color: rgb(0, 176, 240);
   border-radius: 45px;
   margin:0 auto; 
   position:relative;
   top:-18px;
   border: 1px solid black;
}

/*肚子*/
.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:110px;
    height:6px;
    border:1px solid black;
    background-color:rgb(205,11,28);
    border-radius:25px;
    position:absolute;
    top:-4px;
    left:23px;
    z-index:3;
}
/*铃铛*/
.bell{
    width:30px;
    height:30px;
    background-color:#F8DC06;
    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: rgb(0, 176, 240);
    border:1px solid black;
    position: absolute;
    top:0;
    z-index: -1;
}
.armLeft{
    top: 7px;
    left:20px;
    transform-origin:left top;
    transform:rotate(45deg);
}
.armRight{
    top: 7px;
    right:20px;
    transform-origin:right top;
    transform:rotate(-45deg);
}
.hand{
    width:43px;
    height:43px;
    background-color:white;
    border:1px solid black;
    border-radius:50%;
    position:absolute;
    left:-7px;
    bottom:-23px;
    transform:rotate(45deg);
}
.foot{
    width:80px;
    height:22px;
    background-color:white;
    border:2px solid black;
    position:absolute;
    bottom:-18px;
}
.footLeft{
    left:-4px;
     border-radius:50% 52% 10% 20%;
    
}
.footRight{
    right:-8px;
     border-radius:50% 48% 18% 0%;

}

.line{
    width:24px;
    border:1px solid black;
    transform: rotate(90deg);
    position: absolute;
    margin:auto;
    left:66px;
    top: 112px;
}


</style>
</head>
<body>
    <div class="main">
        <div class="head">
            <div class="face">
                <div class="eye eyeLeft">
                    <div class="eyeDot eyeDotLeft"></div>
                    <div class="eyeDotb eyeDotbleft"></div>
                </div>
                <div class="eye eyeRight">
                    <div class="eyeDot eyeDotRight"></div>
                    <div class="eyeDotb eyeDotbright"></div>
                </div>
                <div class="nose">
                   <div class="nosedot"></div>
                </div>
                <div class="noseline"></div>
                <div class="mouth"></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="line"></div>
            <div class="foot footLeft"></div>
            <div class="foot footRight"></div>
          
        </div>
       </div> 
    </body>

</html>

没事吧，没事吧，赶紧去学习吧，这不会
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
canvas--多啦a梦.html
04-30
据大家熟知的一样，canvas在画图方面有很强大的应用，比如一些流程操作，图表等都可以使用canvas来开发，这是一个自己使用canvas来实现小时候希望自己拥有的一个哆啦A梦，小蓝胖子在这里哦！
html5自动生成的头部代码,HTML5利用canvas绘制哆啦A梦头部（代码实例）
weixin_28895791的博客
06-02 345
html5的canvas是很强大的，下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。效果如下：代码如下：您的浏览器不支持canvasvar face = document.getElementById('face').getContext("2d");face.arc(252,252,250,0,360*Math...
哆啦AAA萌也能用HTML画出来？看这里！【完整代码可运行】
最新发布
J_Jie_的博客
05-27 537
关注微信公众号「ClassmateJie」有完整代码以及更多惊喜等待你的发现。 简介/效果展示 你是否曾经想过，那些可爱的哆啦A梦角色是如何被创造出来的呢？今天，我要带你一起探索一个神奇的秘密——用HTML画出哆啦A梦！ 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
哆啦A梦纯HTML代码
热门推荐
qq_41418149的博客
11-14 1万+
Web基础篇 HTML-05哆啦A梦 此页面主要知识点： 一、阴影： box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影； 设置多个阴影：用逗号隔开； 二、径向渐变： background:radial-gradient() 径向渐变 circle 圆 ellipse 椭圆 clos...
用HTML绘制哆啦A梦
qq_44109821的博客
12-24 4491
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制叮当猫</title> </head> <body> <div> <canvas id="mycanvas" width="450" he...
PHP画a梦,html打造动漫人物--哆啦A梦
weixin_39812046的博客
03-10 535
我相信每个人的童年都有一个哆啦a梦，一个小小的肚皮里装满了不可思议的哆啦a梦，一个在你无助伤心的时候陪在你身边的哆啦a梦，一个陪你胡思乱想陪你吃铜锣烧的哆啦a梦~今天我们就来画一个我们心中的哆啦a梦吧~定义哆啦a梦的容器千篇一律先定义一个画哆啦a梦的大容器，确定它的大小和位置。/*哆啦A梦*/.doa{position: relative;top: 100px;}画哆啦a梦的头部(包括脸，脸部包括...
哆啦A梦.html
12-25
哆啦A梦
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
《CSS3与HTML5绘制哆啦A梦：技术解析与应用》 在现代网页设计领域，HTML5和CSS3的应用已经越来越广泛，它们为开发者带来了更丰富的表现力和更强的功能性。今天，我们将深入探讨一个有趣的示例——利用HTML5和CSS3...
HTML5 canvas哆啦A梦机器猫图形特效代码
03-20
综上所述，"HTML5 canvas哆啦A梦机器猫图形特效代码"是一个结合了HTML5 canvas基础绘图、动画制作、交互设计等多个方面的实例，对于学习canvas技术和提升Web前端开发技能非常有帮助。通过研究这个项目，开发者可以...
B站哆啦A梦主题网站源码（完整版）
05-06
《B站哆啦A梦主题网站源码：深入解析HTML5、CSS3与JavaScript的应用》 在当前数字化时代，网页设计已经成为一门不可或缺的技术。而"哆啦A梦主题网站"的源码，就是一个以热门动漫角色哆啦A梦为主题的网页项目，它...
像素画.html哆啦a梦
04-12
哆啦a梦
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
多啦A梦插画制作.html
01-03
多啦A梦插画制作.html 简单的多啦A梦插画制作，代码简单，通俗易懂，有兴趣的可以了解一下， 代码是静态的，技术还是有待提高》》》》》》
用HTML代码做哆啦A梦
weixin_52630329的博客
12-05 1591
用HTML代码做哆啦A梦 ![上图是css3的基本样式 上图是基本架构
html画哆啦a梦源代码,151行html+CSS3绘制出动态的“哆啦A梦”
weixin_29094775的博客
06-07 2098
#main{width:640px;height:550px;background:lightblue;margin:0 auto;position:relative;margin-top:30px;}header{width:330px;height:330px;background:#04a0ea;border-radius:50%;margin-left:150px;border:2px s...
哆啦a梦css html,用css画一个哆啦A梦
weixin_29173299的博客
07-01 404
原图：效果图：虽然说没用啥什么高级的技巧，但这让我感受到了css的乐趣！好好学习，天天向上！body{background-color: #66b3ff;height: 300px;overflow: hidden;}#head{width: 200px;height: 200px;position: absolute;left: 50%;top:31%;margin-left: -100px;m...
html 与 css 画哆啦A梦
小星落
03-09 2188
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big { width: 500px; height: 530px; position: absolute; .
html打造动画【系列4】- 哆啦a梦
python233的博客
06-15 1889
我相信每个人的童年都有一个哆啦a梦，一个小小的肚皮里装满了不可思议的哆啦a梦，一个在你无助伤心的时候陪在你身边的哆啦a梦，一个陪你胡思乱想陪你吃铜锣烧的哆啦a梦~今天我们就来画一个我们心中的哆啦a梦吧~ 哆啦a梦.png 定义哆啦a梦的容器 千篇一律先定义一个画哆啦a梦的大容器，确定它的大小和位置。 div class="doa">div> /*哆啦A梦*/
html哆啦a梦动态代码
06-01
以下是一个简单的HTML哆啦A梦动态代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>哆啦A梦动态代码</title> <style> #doraemon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: moveDoraemon 2s ease-in-out infinite alternate; } @keyframes moveDoraemon { 0% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(-10deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } </style> </head> <body> <img id="doraemon" src="https://cdn.jsdelivr.net/gh/ChrisLee0211/CDN/img/doraemon.png" alt="哆啦A梦"> </body> </html> ``` 这段代码会在页面中显示一个哆啦A梦的图片，并且图片会以一定的速度在页面内来回移动，同时还会有轻微的旋转动画。你可以将图片链接换成自己喜欢的图片地址，也可以调整动画效果来实现自己想要的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值