用html画一个睡觉的熊动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>睡觉的熊动画</title><link rel="stylesheet" href="./style.css">
</head><body><div id="container"><div class="head"></div><div class="muzzle"></div><div class="ears"></div><div class="body"></div><div class="paws-front"></div><div class="paws-back"></div><div class="details"></div><div class="tail"></div><!-- zzz --><div class="sleep"><span class="s1">z</span><span class="s2">z</span><span class="s3">z</span><span class="s4">z</span><span class="s5">z</span></div></div>
</body></html>

body {background-color: #EBD8D0;text-align: center;height: 100%;margin: 0px;
}#container {margin: 120px auto;position: relative;height: 230px;width: 754px;
}#container div {position: absolute;
}#container div::before,
#container div::after {content: '';position: absolute;display: block;
}/* 头部 */.head {z-index: 10;width: 152px;height: 70px;bottom: 32px;left: 143px;background: #A78A7F;border-radius: 100%;
}.head:before {width: 122px;height: 122px;left: 54px;bottom: 0px;z-index: 199;background: #594a41;border-radius: 90% 50% 90% 90%;transform: rotateZ(226deg);
}.muzzle {z-index: 5;width: 152px;height: 70px;bottom: 30px;left: 143px;background: #A78A7F;border-radius: 100%;
}/* 耳朵 */.ears {width: 42px;height: 42px;background: #594a41;border-radius: 100%;left: 220px;top: 60px;box-shadow: 34px -8px 0 0 #594a41
}/* 身体 */.body {width: 300px;height: 150px;background: #594a41;left: 228px;border-radius: 50%;bottom: 29px;
}/* 前腿 */.paws-front {z-index: 15;background: #A78A7F;width: 100px;height: 50px;bottom: 14px;left: 272px;border-radius: 80% 22% 55% 50% / 55% 22% 80% 50%;transform: rotateZ(12deg);
}/* 后腿 */.paws-back {width: 100px;height: 52px;border-top-left-radius: 100%;background: #A78A7F;left: 420px;bottom: 29px;
}.paws-back:after {width: 36px;height: 52px;border-radius: 100%;left: 80px;background: #A78A7F;
}/* 鼻子、腮红 */.details {width: 25px;height: 25px;background: #221E22;border-radius: 100%;z-index: 20;box-shadow: 100px 0 0 #AD5D4E;bottom: 66px;left: 135px;
}/* 眼睛 */.details:after {width: 22px;height: 22px;border-bottom: 5px solid #221E22;border-top: 5px solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;border-radius: 50%;left: 68px;top: -30px;
}/* 尾巴 */.tail {width: 50px;height: 50px;background: #594a41;border-radius: 100%;left: 490px;top: 60px;
}/* 睡觉 zzz */.sleep {height: 90px;width: 80px;position: absolute;left: 80px;top: 30px;font-size: 55px;
}.sleep span {width: 15px;height: 15px;display: block;font-family: arial;font-weight: bold;text-align: center;line-height: 20px;background: #221E22;animation: zz 3s linear infinite;
}.sleep .s1 {margin-left: 180px;margin-top: -40px;
}.sleep .s2 {margin-left: 120px;margin-top: -5px;
}.sleep .s3 {margin-left: 60px;margin-top: 5px;
}.sleep .s4 {margin-left: 0px;margin-top: 12px;
}.sleep .s5 {margin-left: -5px;margin-top: 52px;
}@keyframes zz {0% {opacity: 0;transform: scale3d(.2, .2, .2) rotate(-20deg);}50% {opacity: 1;}80% {transform: translateY(-30px) translateX(20px) rotate(10deg);opacity: 0;}100% {opacity: 0;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/821729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费的 ChatGPT、GPTs、AI绘画(国内版)

&#x1f525;博客主页&#xff1a;白云如幻❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ ChatGPT3.5、GPT4.0、GPTs、AI绘画相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚…

袁庭新ES系列14节 | 搭建Elasticsearch集群

前言 单节点的Elasticsearch需要在处理大量数据的时候需要消耗大量内存和CPU资源&#xff0c;数据量大到一定程度就会产生处理瓶颈&#xff0c;甚至会出现宕机。 为了解决单节点ES的处理能力的瓶颈及单节点故障问题&#xff0c;我们考虑使用Elasticsearch集群。接下来袁老师带…

【前后端的那些事】SpringBoot 基于内存的ip访问频率限制切面(RateLimiter)

文章目录 1. 什么是限流2. 常见的限流策略2.1 漏斗算法2.2 令牌桶算法2.3 次数统计 3. 令牌桶代码编写4. 接口测试5. 测试结果 1. 什么是限流 限流就是在用户访问次数庞大时&#xff0c;对系统资源的一种保护手段。高峰期&#xff0c;用户可能对某个接口的访问频率急剧升高&am…

【算法刷题day27】Leetcode:39. 组合总和、40. 组合总和 II、131. 分割回文串

文章目录 Leetcode 39. 组合总和解题思路代码总结 Leetcode 40. 组合总和 II解题思路代码总结 Leetcode 131. 分割回文串解题思路代码总结 草稿图网站 java的Deque Leetcode 39. 组合总和 题目&#xff1a;39. 组合总和 解析&#xff1a;代码随想录解析 解题思路 还是回溯三部…

记录一下易语言post get使用WinHttp的操作

最近在学易语言&#xff0c;在进行通讯的时候&#xff0c;出现一些问题&#xff0c;现在记录下来&#xff0c;避免以后继续忘记&#xff0c; 先声明文本型变量jsonPostData jsonPostData &#xff1d; “{hostname:” &#xff0b; hostnameTxt &#xff0b; “,hardcode:” &…

【ARM 裸机】I.MX 启动方式之启动头文件 2

接上一节&#xff1a;【ARM 裸机】I.MX 启动方式之启动头文件 1&#xff1b; 2.3、DCD DCD&#xff0c;Device Configuration Data &#xff0c;就是配置 6ULL 寄存器的&#xff0c;DCD 数据最大限制 1768 字节&#xff1b; CCGR0 是不是很熟悉&#xff1f;对&#xff0c;在…

【数据挖掘】课程大纲

第1章 数据挖掘基础 1.1 某知名连锁餐饮企业的困惑 1.2 从餐饮服务到数据挖掘 1.3 数据挖掘的基本任务 1.4 数据挖掘建模过程 1.4.1 定义挖掘目标 1.4.2 数据取样 1.4.3 数据探索 1.4.4 数据预处理 1.4.5 挖掘建…

在flask服务中远程读取该Excel的内容

在flask服务中远程读取该Excel的内容: from flask import Flask, jsonify import requests import pandas as pd import os import tempfile app Flask(__name__) app.route(/read_excel, methods[GET]) def read_excel(): # Excel 文件的 URL excel_url http…

选购AWS服务时需要注意哪些问题?九河云详细评测

随着云计算技术的广泛应用,亚马逊网络服务(AWS)受到越来越多企业的欢迎。这是因为他们提供了丰富的云计算产品和服务,可满足企业不同阶段的IT需求。但在选购AWS服务时,企业仍需谨慎考虑以下几个方面&#xff1a; 首先要确定自身的需求&#xff0c;并评估成本效益。企业在选择A…

Yarn--npm Windows安装使用

Yarn简介及Windows 在现代的Web开发中&#xff0c;JavaScript项目的依赖管理是一个复杂而重要的任务。幸运的是&#xff0c;我们有多种工具可以帮助我们处理这些依赖&#xff0c;其中之一就是Yarn。Yarn是一个由Facebook、Google、Tilde和Exponent联合开发的跨平台包管理工具&a…

【静态分析】软件分析课程实验-前置准备

课程&#xff1a;南京大学的《软件分析》课程 平台&#xff1a;Tai-e&#xff08;太阿&#xff09;实验作业平台 1. 实验概述 Tai-e 是一个分析 Java 程序的静态程序分析框架&#xff0c;相比于已有的知名静态程序分析框架&#xff08;如 Soot、Wala 等&#xff09;&#xf…

java的总结

由于最近已经开始做项目了&#xff0c;所以对java的基础知识的学习都是一个离散化的状态没有一个很系统的学习&#xff0c;都是哪里不会就去学哪里。 先来讲一下前后端的区别吧 在我的理解前端就是&#xff1a;客户端在前端进行点击输入数据&#xff0c;前端将这些数据整合起来…

AI智能体技术突破:引领科技新浪潮

AI智能体技术突破&#xff1a;引领科技新浪潮 基于大模型的 AI Agent 工作流基于大模型的 AI Agent 工作流效果AI Agent 的四种设计模式Reflection 反思设计模式Tool use 工具使用设计模式Planning 规划设计模式Multiagent collaboration 多智能体协作设计模式 吴恩达在红杉美国…

Flink CDC在阿里云DataWorks数据集成应用实践

摘要&#xff1a;本文整理自阿里云 DataWorks 数据集成团队的高级技术专家 王明亚&#xff08;云时&#xff09;老师在 Flink Forward Asia 2023 中数据集成专场的分享。内容主要为以下四部分&#xff1a; 阿里云 DataWorks 数据集成介绍基于 Flink CDC 数据集成新版引擎架构和…

AGI来了?特拉斯用大模型帮助自动驾驶

Elon Musk 的 xAI 刚刚推出了Grok-1.5 Vision&#xff0c;这是对开源模型的多模式升级&#xff0c;允许处理视觉信息。 细节&#xff1a; Grok 1.5V 现在可以处理文档、图表、屏幕截图和照片等视觉信息&#xff0c;重点是对现实世界的理解。 xAI 创建了一个新的“RealWorldQA”…

学习java第四十五天

Spring框架中有哪些不同类型的事件&#xff1f; 上下文更新事件&#xff08;ContextRefreshedEvent&#xff09;&#xff1a;在调用ConfigurableApplicationContext 接口中的refresh()方法时被触发。 上下文开始事件&#xff08;ContextStartedEvent&#xff09;&#xff1a;…

【鸿蒙开发】生命周期

1. UIAbility组件生命周期 UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态。 UIAbility生命周期状态 1.1 Create状态 Create状态为在应用加载过程中&#xff0c;UIAbility实例创建完成时触发&#xff0c;系统会调用onCreate()回调。可以在该回调中…

会议室预约小程序开源版开发

会议室预约小程序开源版开发 支持设置免费预约和付费预约、积分兑换商城、积分签到等 会议室类目&#xff0c;提供多种类型和设施的会议室选择&#xff0c;满足不同会议需求。 预约日历&#xff0c;展示会议室预约情况&#xff0c;方便用户选择空闲时段。 预约记录&#xff0…

秋招复习笔记——八股文部分:网络基础

TCP/IP 网络模型 应用层 最上层的&#xff0c;也是我们能直接接触到的就是应用层&#xff08;Application Layer&#xff09;&#xff0c;我们电脑或手机使用的应用软件都是在应用层实现。那么&#xff0c;当两个不同设备的应用需要通信的时候&#xff0c;应用就把应用数据传…

java绘图在ubuntu报错

把JRT网站部署到ubuntu桌面系统上&#xff0c;开始没测试绘图部分功能&#xff0c;只试了连PostGreSql部分正常。后面试了生成位图部分发现报错。 报下面错误&#xff1a; (ColorModel.java:220)\n\tat java.desktop/java.awt.image.BufferedImage.(BufferedImage.java:286)\n…