用CSS3画了一只猫

在这里插入图片描述

感觉我写得技术含量不高,全都是用绝对定位写的,一定会有更好的,代码量更少的做法吧

<!DOCTYPE html>
<html>
<head>
    <title>Cute Cat</title>
    <style type="text/css">
        *{
            box-sizing: border-box;
        }
        :root{
            --brown: #470000;
        }
        body{
            background-color: #ffd2d2;
        }
        .cat {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 50px auto 0;
            
        }
        .cat .ear{
            position: absolute;
            width: 160px;
            height: 90px;
            background-color: #fff;
            border-radius: 52% / 52% ;
            border: 2px solid var(--brown);
            z-index: 5;
            padding: 16px;
        }
        .cat .ear>div{
            width: 100%;
            height: 100%;
            background-color: #fc1717;
            border-radius: 52% / 52% ;
            border: 1px solid #333
        }
        .cat .ear1{
            top: 0;
            left: -16px;
            transform: rotate(45deg);
        }
        .cat .ear2{
            top: 0;
            right: -16px;
            transform: rotate(135deg);
        }
        .cat .head{
            position: relative;
            width: 300px;
            height: 220px;
            background-color: #ffffff;
            border-radius: 50%;
            border: 2px solid var(--brown);
            z-index: 8;
            overflow: hidden;
        }
        .cat .head .decoration{
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            height: 120px;
            width:  62px;
            background-color: #eee5bc;
            border-radius: 50%;
            border: 2px solid var(--brown);
            overflow: hidden;
        }
        .cat .head .decoration::after{
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 120px;
            width:  30px;
            border-radius: 50%;
            border: 2px solid var(--brown);
        }
        .cat .eye{
            position: absolute;
            width: 58px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid var(--brown)
        }
        .cat .eye1{
            top: 78px;
            left: 60px;
        }
        .cat .eye1::before{
            content: '';
            position: absolute;
            top: -10px;
            left: -12px;
            height: 20px;
            width: 20px;
            border-bottom: 1px solid var(--brown);
            border-radius: 33%;
            transform: rotate(20deg);
        }
        .cat .eye1::after{
            content: '';
            position: absolute;
            top: 0;
            left: -16px;
            height: 20px;
            width: 20px;
            border-bottom: 1px solid var(--brown);
            border-radius: 33%;
            transform: rotate(20deg);
        }

        .cat .eye2{
            top: 78px;
            right: 60px;
        }

        .cat .eye2::before{
            content: '';
            position: absolute;
            top: -10px;
            right: -12px;
            height: 20px;
            width: 20px;
            border-bottom: 1px solid var(--brown);
            border-radius: 33%;
            transform: rotate(-20deg);
        }
        .cat .eye2::after{
            content: '';
            position: absolute;
            top: 0;
            right: -16px;
            height: 20px;
            width: 20px;
            border-bottom: 1px solid var(--brown);
            border-radius: 33%;
            transform: rotate(-20deg);
        }
        .cat .eye>div{
            position: absolute;
            bottom: 2px;
            right: 2px;
            border-radius: 50% 50% 50% 50%;
            background-image: radial-gradient(circle,#fff 0%, #fff 12%, var(--brown) 22%, var(--brown) 100%);
            height: 34px;
            width: 36px;
        }
        .cat .mouth-wrap{
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
        }
        .cat .mouth-wrap .nose{
            position: relative;
            width: 26px;
            height: 18px;
            border-radius: 50%;
            background-color: var(--brown);
            padding-top: 5px;
            padding-left: 2px;
            z-index: 4;
            
        }
        .cat .mouth-wrap .nose>div{
            background: #fff;
            width: 8px;
            height: 4px;
            border-radius: 50%;
            filter: blur(2px);
        }
        .cat .mouth-wrap .fossa1{
            position: absolute;
            top: 18px;
            left: -16px;
            border-radius: 50%;
            width: 30px;
            height: 10px;
            border-bottom: 1px solid var(--brown);
            transform: rotate(-26deg);
            background-color: #fff;
            z-index: 3;
        }
        .cat .mouth-wrap .fossa2{
            position: absolute;
            top: 18px;
            right: -16px;
            border-radius: 50%;
            width: 30px;
            height: 10px;
            border-bottom: 1px solid var(--brown);
            transform: rotate(26deg);
            background-color: #fff;
            z-index: 3;
        }
        .cat .mouth-wrap .mouth{
            position: relative;
            width: 22px;
            height: 40px;
            background-color: #ff7070;
            border-radius: 50%;
            margin: 0 auto;
            border: 1px solid var(--brown);
            z-index: 2;
        }
        .cat .beard1{
            position: absolute;
            bottom: 20px;
            left: 40px;
        }
        .cat .beard1>div{
            width: 42px;
            height: 16px;
            border-top: 2px solid var(--brown);
            border-radius: 33%;
            transform: rotate(-8deg);
        }
        .cat .beard2{
            position: absolute;
            bottom: 20px;
            right: 40px;
        }
        .cat .beard2>div{
            width: 42px;
            height: 16px;
            border-top: 2px solid var(--brown);
            border-radius: 33%;
            transform: rotate(8deg);
        }
        .cat .body{
            position: relative;
            top: -70px;
            width: 300px;
            height: 260px;
            background-color: #fff;
            border-radius: 50%;
            border: 2px solid var(--brown);
            z-index: 7;
            overflow: hidden;
        }
        .cat .body .ribbon{
            position: relative;
            top: -166px;
            width: 300px;
            height: 260px;
            background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 174, 0));
            border-radius: 50%;
            border: 2px solid var(--brown);
            z-index: 2;
        }
        .cat .body .bell{
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgb(255, 255, 0);
            border: 2px solid var(--brown);
            z-index: 1;
        }
        .cat .body .bell::before{
            content: '';
            position: absolute;
            width: 50px;
            height: 20px;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            border-top: 2px solid var(--brown);
        }
        .cat .body .bell .hole{
            position: absolute;
            width: 2px;
            height: 16px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            background-color:  var(--brown);
        }
        .cat .body .bell .hole::before{
            content: '';
            position: absolute;
            top: 0;
            width: 8px;
            height: 8px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            background-color:  var(--brown);
        }
        .cat .body .left-hand{
        }
        .cat .body .left-hand>div:nth-child(1){
            position: absolute;
            top: -10px;
            right: 48px;
            width:  180px;
            height: 180px;
            border-radius: 50%;
            border: 2px solid var(--brown);
            clip-path: polygon( 58% 100%, 100% 60%, 100% 100%);
        }
        
        .cat .body .left-hand>div:nth-child(2){
            position: absolute;
            top: 40px;
            right: 30px;
            width:  160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid var(--brown);
            clip-path: polygon( 38% 100%, 100% 60%, 100% 100%);
        }

        .cat .body .left-hand>div:nth-child(3){
            position: absolute;
            top: 150px;
            right: 98px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid var(--brown);
            background-color: #fff;
            overflow: hidden;
        }
        .cat .body .left-hand>div:nth-child(3)::before{
            content: '';
            position: absolute;
            top: 7px;
            left: -3px;
            width:  20px;
            height: 20px;
            border-bottom: 2px solid var(--brown);
            border-radius: 33%;
            transform: rotate(-8deg);
        }
        .cat .body .left-hand>div:nth-child(3)::after{
            content: '';
            position: absolute;
            top: 23px;
            width:  20px;
            height: 20px;
            border-bottom: 2px solid var(--brown);
            border-radius: 33%;
            transform: rotate(-8deg);
        }
        .cat .foot1{
            position: absolute;
            bottom: 62px;
            left: 36px;
            width:  60px;
            height: 40px;
            border-radius: 40%;
            background-color: rgb(253, 253, 253);
            border: 2px solid var(--brown);
            transform: rotate(16deg);
            z-index: 1;
        }
        .cat .foot2{
            position: absolute;
            bottom: 62px;
            right: 36px;
            width:  60px;
            height: 40px;
            border-radius: 40%;
            background-color: rgb(255, 255, 255);
            border: 2px solid var(--brown);
            transform: rotate(-16deg);
            z-index: 1;
        }
        .cat .finger-wrap{
            position: absolute;
            top: 140px;
            left: -80px;
            background: #fff;
            width:  70px;
            height: 50px;
            border-radius: 33%;
            border: 2px solid var(--brown);
            transform: rotate(150deg);
            z-index: 10;
        }
        .cat .finger-wrap>div:nth-child(1){
            position: absolute;
            background: #fff;
            height: 40px;
            width: 30px;
            border-radius: 0 0 50% 50%;
            border: 2px solid var(--brown);
            border-top: none;
            top: 40px;
            left: 16px;
        }
        .cat .finger-wrap>div:nth-child(2){
            position: absolute;
            background: #fff;
            height: 40px;
            width: 30px;
            border-radius: 0 0 50% 50%;
            border: 2px solid var(--brown);
            border-top: none;
            top: 28px;
            left: -17px;
            transform: rotate(36deg);
        }
        .cat .finger-wrap>div:nth-child(3){
            position: absolute;
            background: #fff;
            height: 40px;
            width: 30px;
            border-radius: 0 0 50% 50%;
            border: 2px solid var(--brown);
            border-top: none;
            top: 29px;
            left: 52px;
            transform: rotate(-36deg);
        }
        .cat .right-arm1{
            position: absolute;
            top: 103px;
            left: -52px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 2px solid var(--brown);
            clip-path: polygon( 0 0, 0% 100%, 100% 100%);
            background-color: #fff;
            z-index: 0;
        }
        
        .cat .right-arm2{
            position: absolute;
            top: 59px;
            left: -30px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid var(--brown);
            clip-path: polygon( 0 43%, 0% 100%, 100% 100%);
            background-color: #ffd2d2;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="cat">
        <div class="ear ear1">
            <div></div>
        </div>
        <div class="ear ear2">
            <div></div>
        </div>
        <div class="head">
            <div class="decoration"></div>
            <div class="eye eye1">
                <div></div>
            </div>
            <div class="eye eye2">
                <div></div>
            </div>
            <div class="mouth-wrap">
                <div class="nose"><div></div></div>
                <div class="fossa1"></div>
                <div class="fossa2"></div>
                <div class="mouth"></div>
            </div>
            <div class="beard1">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="beard2">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="body">
            <div class="ribbon"></div>
            <div class="bell">
                <div class="hole"></div>
            </div>
            <div class="left-hand">
                <div></div>
                <div></div>
                <div><div></div></div>
            </div>
        </div>
        <div class="right-arm1"></div>
        <div class="right-arm2"></div>
        <div class="finger-wrap">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="foot1"></div>
        <div class="foot2"></div>
    </div>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

100天精通Python(可视化篇)——第81天:matplotlib绘制不同种类炫酷饼图参数说明+代码实战(自定义、百分比、多个子图、圆环、嵌套饼图)

文章目录专栏导读0. 前言1. 参数说明2. 普通饼图3. 百分比饼图4. 突出某一块的饼图5. 自定义颜色的饼图6. 多个子图7. 圆环饼图8. 圆环分离饼图9. 饼图圆环图组合10. 多层圆环饼图专栏导读 &#x1f525;&#x1f525;本文已收录于《100天精通Python从入门到就业》&#xff1a…

【VScode】远程连接Linux

目录标题1. 安装扩展插件2. 在Linux上操作3. 确定Linux的IP地址4. 远程连接到Linux5. 实现免密码登录使用 VScode 远程编程与调试的时有会用到插件 Remote Development&#xff0c;使用这个插件可以在很多情况下代替 vim 直接远程修改与调试服务器上的代码&#xff0c;同时具备…

超详细讲解C语言文件操作!!

超详细讲解C语言文件操作&#xff01;&#xff01;什么是文件文件名文件的打开和关闭文件指针文件的打开和关闭文件的顺序读写文件的随机读写fseekftellrewind文本文件和二进制文件文件读取结束的判定文件缓冲区什么是文件 磁盘上的文件是文件。但是在程序设计中&#xff0c;我…

Python | 蓝桥杯系列文章总结+经典例题重做

欢迎交流学习~~ 专栏&#xff1a; 蓝桥杯Python组刷题日寄 从 4 个月前开始写蓝桥杯系列&#xff0c;到目前为止一共是 19 篇&#xff0c;其中&#xff1a;入门篇 5 篇&#xff0c;简单篇 8 篇&#xff0c;进阶篇 6 篇。 这篇文章主要是为了为先前内容进行总结&#xff0c;并对…

蓝桥杯冲刺 - Lastweek - 你离省一仅剩一步之遥!!!(掌握【DP】冲刺国赛)

文章目录&#x1f4ac;前言&#x1f3af;week3&#x1f332;day10-1背包完全背包多重背包多重背包 II分组背包&#x1f332;day2数字三角形 - 线性DP1015. 摘花生 - 数字三角形&#x1f332;day3最长上升子序列 - 线性DP1017. 怪盗基德的滑翔翼 - LIS1014.登山 - LIS最长公共子…

【JaveEE】多线程之阻塞队列(BlockingQueue)

目录 1.了解阻塞队列 2.生产者消费者模型又是什么&#xff1f; 2.1生产者消费者模型的优点 2.1.1降低服务器与服务器之间耦合度 2.1.2“削峰填谷”平衡消费者和生产的处理能力 3.标准库中的阻塞队列&#xff08;BlockingQueue&#xff09; 3.1基于标准库&#xff08;Bloc…

笔记本只使用Linux是什么体验?

个人主页&#xff1a;董哥聊技术我是董哥&#xff0c;嵌入式领域新星创作者创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01;近期&#xff0c;也有朋友问我&#xff0c;笔记本只安装Linux怎么样&#xff0c;刚好我也借此来表达一下我的感受…

数据结构MySQL —— 索引

目录 一、索引概述 二、索引结构 三、索引分类 四、索引语法 五、SQL性能分析 1. 查看执行频次 2. 慢查询日志 3. show profiles指令 4. explain执行计划 六、索引使用规则 1. 验证索引效率 2. 最左前缀法则 3. 范围查询 4. 索引失效情况 5. SQL提示 6. …

【C++】AVL树

文章目录一、什么是 AVL 树二、AVL 树的节点结构三、AVL 树的插入四、AVL 树的旋转1、左单旋2、右单旋3、左右双旋4、右左双旋5、总结五、VAL 树的验证六、AVL 树的删除七、AVL 树的性能八、AVL 树的代码实现一、什么是 AVL 树 我们在前面学习二叉搜索树时提到&#xff0c;二叉…

【linux】深入了解TCP与UDP

认识端口号 端口号(port)是传输层协议的内容. 端口号是一个2字节16位的整数; 端口号用来标识一个进程, 告诉操作系统, 当前的这个数据要交给哪一个进程来处理; IP地址 端口号能够标识网络上的某一台主机的某一个进程; 一个端口号只能被一个进程占用理解 "端口号" 和…

【Java 并发编程】一文详解 Java 中有几种创建线程的方式

Java 中有几种创建线程的方式?1. Java 程序天然就是多线程的2. 线程的启动与终止2.1 线程的启动&#xff08;1&#xff09;继承 Thread 类&#xff0c;重写 run() 方法&#xff08;2&#xff09;实现 Runnable 接口&#xff0c;重写 run() 方法&#xff08;3&#xff09;Threa…

jwt 学习笔记

概述 JWT&#xff0c;Java Web Token&#xff0c;通过 JSON 形式作为 Web 应用中的令牌&#xff0c;用于在各方之间安全地将信息作为 JSON 对象传输&#xff0c;在数据传输过程中还可以完成数据加密、签名等相关处理 JWT 的作用如下&#xff1a; 授权&#xff1a;一旦用户登…

初识操作系统

目录 1.操作系统是什么 2.为什么要有操作系统 3.操作系统的相关关系 1.驱动程序 2.系统调用接口 3.用户调用接口 4.用户程序 4.用具体的例子理解操作系统 1.操作系统是什么 &#xff08;1&#xff09;操作系统是一组管理计算机硬件与软件资源的计算机软件程序 。 &#xff08;…

STM32入门教程课程简介(B站江科大自化协学习记录)

课程简介 STM32最小系统板面包板硬件平台 硬件设备 STM32面包板入门套件 Windows电脑 万用表、示波器、镊子、剪刀等 软件介绍 Keil MDK 5.24.1 是一款嵌入式软件开发工具&#xff0c;它提供了一个完整的开发环境&#xff0c;包括编译器、调试器和仿真器。它支持各种微控制…

浅谈Dubbo的异步调用

之前简单写了一下dubbo线程模型&#xff0c;提到了Dubbo底层是基于NIO的Netty框架实现的&#xff0c;通过IO线程池和Work线程池实现了请求和业务处理之间的异步从而提升性能。 这篇文章要写的是Dubbo对于消费端调用和服务端接口业务逻辑处理的异步&#xff0c;在2.7版本中Dubb…

异构数据库转换工具体验:将SQLServer数据转换迁移到MySQL

背景 想将一个线上数据库从 SQLServer 转换迁移到 MySQL &#xff0c;数据表70多张&#xff0c;数据量不大。从网上看很多推荐使用 SQLyog &#xff0c;还有 Oracle MySQL Server 官方的 Workbeach 来做迁移&#xff0c;但是步骤稍显繁琐&#xff1b;后来从一篇文章的某个角落…

进程间通信【Linux】

文章目录1. 进程间通信1.1 什么是进程间通信1.2 进程间通信的必要性1.3 进程间通信的本质1.4 进程间通信的方式2. 匿名管道2.1 匿名管道的概念2.2 匿名管道的原理注意2.3 实现匿名管道pipe函数步骤1. 创建管道2. 创建子进程3. 构建单向信道子进程父进程构建一个变化的字符串写入…

代码质量提升,代码扫描 review 之 Codacy 工具使用

目录一、什么是Codacy二、GitHub 上使用 Codacy三、Codacy上导入GitHub项目一、什么是Codacy Codacy 是用于代码 review 检测(即代码审查)的工具&#xff0c;目前支持对40多种编程语言检测&#xff0c;如 c、c、c#、java 、python、javascript 等。 Codacy 可用于 GitHub 和 …

【Java 并发编程】我们为什么要学并发编程?

我们为什么要学并发编程&#xff1f;1. 为什么要并发编程&#xff1f;1.1 面试需要1.2 性能调优&#xff08;1&#xff09;加快响应时间&#xff08;2&#xff09;代码模块化、异步化&#xff08;3&#xff09;充分利用 CPU 的资源2. 并发编程的基础概念2.1 进程和线程&#xf…

python自动发送邮件(html、附件等),qq邮箱和网易邮箱发送和回复

在python中&#xff0c;我们可以用程序来实现向别人的邮箱自动发送一封邮件&#xff0c;甚至可以定时&#xff0c;如每天8点钟准时给某人发送一封邮件。今天&#xff0c;我们就来学习一下&#xff0c;如何向qq邮箱&#xff0c;网易邮箱等发送邮件。 一、获取邮箱的SMTP授权码。…
最新文章