用CSS实现多啦爱梦

最新推荐文章于 2024-07-23 22:43:52 发布
最新推荐文章于 2024-07-23 22:43:52 发布
阅读量72 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zero___0_0/article/details/130169754
版权

先上图

css实现机器猫

代码

<!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>
        body{
            margin: 0;
            background-color: aquamarine;
        }
        .wrap{
            margin: 50px auto;
            border: 1px solid;
            width: 586px;
            height: 650px;
            position: relative;
            animation: wrapexample 2s linear infinite;
        }
        @keyframes wrapexample{
            0%{background-color: chartreuse;}
            25%{background-color: rgb(241, 238, 9);}
            50%{background-color: rgb(243, 125, 7);}
            75%{background-color: rgb(16, 192, 245);}
            100%{background-color: rgb(216, 25, 82);}

        }

        .header{
            width: 370px;
            height: 350px;
            border: 1px solid;
            border-radius: 50%;
            background-color: #0096ea;
            margin: auto;
            animation: headexample 2s linear infinite;
            position: relative;
        }
        @keyframes headexample{
            0%{transform: rotate(360deg)}

        }
        .face{
            width: 300px;
            height: 280px;
            border: 1px solid;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .eyeleft{
            width: 77px;
            height: 100px;
            border: 1px solid;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 2%;
            left: 28%;
        }
        .eyeright{
            width: 77px;
            height: 100px;
            border: 1px solid;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 1%;
            right: 30%;
        }
        .eyeleft::before,
        .eyeright::before{
            content: "";
            display: block;
            width: 30px;
            height: 33px;
            background-color: black;
            border: 1px solid;
            border-radius: 50%;
            position: absolute;
            top: 38%;
            left: 32%;
            animation: eyeexample 2s linear infinite;
        }
        @keyframes eyeexample{
            0%{transform: translateY(9px);}
            100%{transform: translateY(-9px);}

        }

        .nose{
            width: 58px;
            height: 58px;
            border: 1px solid;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            top: 20%;
            left: 41%;
            z-index: 3;
        }
        .nose::before{
            content: "";
            width: 22px;
            height: 22px;
            position: absolute;
            border: 1px solid;
            border-radius: 50%;
            background-color: white;
            top: 25%;
            left: 29%;
        }
        .nose-line{
            width: 0;
            height: 200px;
            border: 1px solid;
            position: absolute;
            top: 23%;
            left: 49%;
            z-index: 2;
        }
        .mouse{
            width: 270px;
            height: 200px;
            border: 2px solid;
            border-radius: 50%;
            position: absolute;
            border-top: transparent;
            border-left: transparent;
            border-right: transparent;
            top: 23%;
            left: 13%;
            
        }
        .huzi{
            width: 205px;
            height: 110px;
            /* border: 1px solid; */
            position: absolute;
            top: 33%;
            left: 22%;
        }
        .huzi>p{
            width: 90px;
            border: 1px solid;
            position: absolute;
        }
        .huzi>p:nth-child(1){
            top: 3%;
            right: 3%;
            transform: rotate(162deg);
        }
        .huzi>p:nth-child(2){
            top: 33%;
            right: 3%;
            transform: rotate(0deg);
        }
        .huzi>p:nth-child(3){
            top: 66%;
            right: 3%;
            transform: rotate(-162deg);
        }
        .huzi>p:nth-child(4){
            top: 3%;
            left: 0%;
            transform: rotate(198deg);
        }
        .huzi>p:nth-child(5){
            top: 33%;
            left: 0%;
            transform: rotate(360deg);
        }
        .huzi>p:nth-child(6){
            top: 66%;
            left: 0%;
            transform: rotate(164deg);
        }
        .section{
            width: 183px;
            height: 153px;
            background-color: #0096ea;
            position: relative;
            top: -4%;
            left: 35%;
            z-index: 10;
        }
        .section::before{
            content: "";
            display: block;
            width: 100%;
            height: 13px;
            background-color: red;
            position: absolute;
            z-index: 12;

        }

        .bell{
            width: 40px;
            height: 40px;
            border: 1px solid;
            border-radius: 50%;
            background-color: yellow;
            position: absolute;
            left: 36%;
            top: 4%;
            z-index: 11;
            
        }
        .bell>.tu{
            width: 37px;
            height: 10px;
            border: 1px solid;
            position: absolute;
            border-radius: 50%;
            top: 20%;
        }
        .bell>.yu{
            width: 10px;
            height: 10px;
            border: 1px solid;
            position: absolute;
            border-radius: 50%;
            top: 61%;
            left: 36%;
            background-color: black;
        }
        .bell>.xian{
            width: 0px;
            height: 4px;
            border: 1px solid;
            position: absolute;
            top: 85%;
            left: 49%;
            background-color: black;
        }
        .dz{
            width: 170px;
            height: 150px;
            background-color: white;
            border: 1px solid;
            border-radius: 50%;
            position: absolute;
            left: 3%;

        }
        .dz::before{
            content: "";
            display: block;
            width: 109px;
            height: 56px;
            border: 1px solid;
            border-bottom-left-radius: 65%;
            border-bottom-right-radius: 65%;
            position: absolute;
            top: 51%;
            left: 18%;
        }
        .armleft{
            width: 90px;
            height: 41px;
            position: relative;
            border: 1px solid;
            background-color: #0096ea;
            top: -23%;
            left: 21%;
            border-bottom-left-radius: 74%;
            transform-origin: 100% 50%;
            animation: example 2s linear infinite;

        }
        @keyframes example {
            0% { transform: rotate(-20deg); }
            25% { transform: rotate(0deg); }
            50% { transform: rotate(20deg); }
            75% { transform: rotate(0deg); }
            100% { transform: rotate(-20deg); }
        }

        .armleft::before{
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border: 1px solid;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: -23%;
            left: -14%;
        }
        .armright{
            width: 90px;
            height: 41px;
            position: relative;
            border: 1px solid;
            background-color: #0096ea;
            top: -30%;
            left: 64%;
            border-bottom-right-radius: 74%;
        }
        .armright::before{
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border: 1px solid;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: -16%;
            left: 58%;
        }
        .leftfoot{
            width: 116px;
            height: 80px;
            border: 1px solid;
            background-color: #0096ea;
            border-radius: 50%;
            position: relative;
            top: -23%;
            left: 27%;
            z-index: 14;
        }
        .rightfoot{
            width: 116px;
            height: 80px;
            border: 1px solid;
            background-color: #0096ea;
            border-radius: 50%;
            position: relative;
            top: -35%;
            left: 52%;
            z-index: 14;
        }
        .yufoot{
            width: 65px;
            height: 97px;
            border: 1px solid;
            border-radius: 50%;
            position: relative;
            background-color: aliceblue;
            top: -50%;
            left: 44%;
            z-index: 14;

        }
        

    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            <div class="face"></div>
            <div class="eyeleft"></div>
            <div class="eyeright"></div>
            <div class="nose"></div>
            <div class="nose-line"></div>
            <div class="mouse"></div>
            <div class="huzi">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="section">
            <div class="bell">
                <div class="tu"></div>
                <div class="yu"></div>
                <div class="xian"></div>
            </div>
            <div class="dz"></div>
        </div>
        <div class="armleft"></div>
        <div class="armright"></div>
        <div class="leftfoot"></div>
        <div class="rightfoot"></div>
        <div class="yufoot"></div>

    </div>
    
</body>
</html>
小贾日记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用python画多啦爱梦图片_哆啦a梦画画步骤
weixin_39634443的博客
12-16 1260
哆啦a梦画画大全(共6篇)word绘图哆啦A梦多啦A梦哆啦A梦和大雄闯进中国国画啦,真是毫无违和感啊!哆啦A梦和大雄闯进中国国画啦真是毫无违和感啊！哆啦A梦图片哆啦A梦3D立体拼图哆啦A梦3D立体拼图多啦A梦立体拼图，超Q的脑袋由多达60块拼图组成，担心难度有点高？没关系，拼图内部有数字提示，按照提示一步步操作就简单多了！整...2018-07-29阅读全文 >>word绘图哆啦A梦_...
如何用python画哆啦爱梦_python3 turtle 绘制哆啦A梦
weixin_34864191的博客
12-23 774
是使用pythonde turtle画的一个小猪佩奇，于是自己跟着画了一个哆啦A梦，算是只实现了头部的部分吧，如果有时间了会把代码改进。源代码附上：import turtle as timport math as mt.pensize(4) # 设置画笔的大小t.colormode(255) # 设置GBK颜色范围为0-255t.color((0,0,255),"blue") # 设置画笔颜色和填...
多啦爱梦的奇妙幻想
ralph_wren的博客
04-04 106
点击链接开户，领取新人福利，获取最新爬虫课程
用CSS实现一个哆啦A梦
weixin_46659420的博客
07-22 833
随便画着玩的，画出来的效果如图，有点丑 HTML代码 <body> <div class="main"> <!-- 头 --> <div class="head"> <!-- 脸部 --> <div class="face"> <div class="eyes left"><div cla...
python画图-使用Python+turtle实现画哆唻爱梦.zip
03-11
这个压缩包文件“python画图-使用Python+turtle实现画哆唻爱梦.zip”显然包含了一个示例，教我们如何利用Python的turtle库来绘制哆啦A梦的图像。现在，我们将深入探讨Python的turtle库以及如何使用它来创建哆啦A梦...
python礼物turtle绘制多啦爱梦的可执行文件.zip
07-10
该资源是利用python的turtle库绘制多啦爱梦图像封装成的.exe可执行文件，下载后直接解压即可在无python环境的Windows系统PC端直接运行，是表白、送女朋友和小朋友的神器。不包含代码，如需代码参看下面链接，另外...
爱梦摄像头录像
11-27
现在的摄像头清晰度越来越高了，使用普通摄像头就可以进行录像和监控的廉价解决方案。
趣味PPT绘制哆啦A梦教程.rar
09-03
趣味PPT绘制哆啦A梦教程。脸部画法：1、画1个大圆盘，工具：任意多边形，技巧：编辑顶点。2、画1个小圆盘，工具：任意多边形，技巧：编辑顶点。3、画2个小椭圆，工具：圆角矩形，技巧：拖动小黄点。4、画2个小圆弧，...
WPF远程桌面AxInterop.MSTSCLib.dll Interop.MSTSCLib.dll 一个demo
01-09
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 应用程序中实现远程桌面功能，重点是使用AxInterop.MSTSCLib.dll和Interop.MSTSCLib.dll这两个组件。这两个组件是Microsoft Terminal ...
css class 多种规则判断样式
Little___Turtle的博客
07-22 274
商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断。
CSS进阶探索：动画与过渡效果
2301_79375313的博客
07-23 443
在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让你的网页设计更上一层楼。
CSS学习笔记
ngczx的博客
07-23 428
CSS学习笔记
CSS Text(文本)
lly202406的博客
07-23 465
CSS中文本属性非常丰富，通过合理运用这些属性，可以创造出各种美观、实用的文本效果。希望本文能帮助您更好地掌握CSS文本属性的使用方法。
一个案例明白(css变量，路由守卫,路由鉴权,pinia,自定义指令)
qq_62012466的博客
07-22 1312
在案例的实现中，我们会遇到不同权限的用户展示的页面是不一样的。权限高的用户页面显示的内容比权限低的用户展示的内容更多。所以在进入页面的时候，我们需要对一些需要权限校验的页面元素进行判断是否进行展示。实现的方法有不少，比如v-if指令也可以判断，但今天我要讲的是自定义指令。相信v-if,v-show等官方自定义指令大家都知道，vue官方允许开发者扩展框架的功能，通过创建自己的指令来处理一些标准指令。在 Vue.js 中，自定义指令可以通过方法来注册。
关于css中flex布局垂直居中失效问题的原因
zuo-yiran的博客
07-19 438
flex布局垂直居中失效原因
CSS实现的扫光效果组件
毛毛的博客
07-23 316
详细内容与注释：CSS实现的扫光效果组件。组件代码在底部掘金平台，如有遗漏，及时与我联系~扫光效果的原理就是从左到右无限循环的一个位移动画。图片和内容如有侵权，及时与我联系~
CSS 两种盒模型 box-sizing content-box 和 border-box
最新发布
wuyujin1997的博客
07-23 489
和它的两个属性值是做什么用的？以前我并不知道它的存在，也做了很久的前端开发。等宽高属性的值 究竟落实到盒子box的哪一部分？当对一个用作容器的DOM元素设置了。
scss基本语法---嵌套、循环、条件（@for,@if），混入@mixin，继承@extend，导入@import，
I_am_shy的博客
07-22 553
scss是css预编译器，可以简化css代码的书写，并可以编译成css文件使用；
用python画一个多啦爱梦
05-01
以下是使用 Python 的 Turtle 模块画多啦爱梦的代码示例： ```python import turtle # 创建画布和画笔 window = turtle.Screen() doraemon = turtle.Turtle() # 设置画笔速度和颜色 doraemon.speed(10) doraemon....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值