css3样式绘制腾讯企鹅

2024-03-13 05:30
文章标签 绘制 frontend css3 样式 腾讯 企鹅

本文主要是介绍css3样式绘制腾讯企鹅，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css3样式绘制腾讯企鹅

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绘制腾讯QQ</title>
<style>
*{margin:0;padding:0;}
#qq{
 position:relative;
 margin-left:40%;
 margin-top:5%; 
}
.head{
 position:absolute;
 width:270px;
 height:250px;
 overflow:hidden;
 background-color:#000;
 border:1px #000 solid;
 border-top-left-radius:50% 50%;
 border-top-right-radius:50% 50%;
 border-bottom-left-radius:50% 50%;
 border-bottom-right-radius:50% 50%;
 border-bottom-color:#FFF;
 display:block;
}

.mandible{
 position:absolute;
 width:362px;
 height:300px;
 top:-110px;
 left:-46px;
 background-color:#000;
 border:1px #000 solid;
 border-radius:50% 50%;
 z-index:6;
 border-top-color:#FFF;
 border-left-color:#FFF;
 border-right-color:#FFF;
}

.leftEye{
 position:absolute;
 width:40px;
 height:70px;
 background-color:#FFF;
 left:80px;
 top:50px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:10;
}

.leftEyes{
 position:absolute;
 width:20px;
 height:25px;
 left:93px;
 top:70px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#000;
}

.rightEye{
 position:absolute;
 width:40px;
 height:70px;
 left:140px;
 top:50px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:10;
 background-color:#FFF;
}

.rightEyes{
 position:absolute;
 width:20px;
 height:25px;
 left:148px;
 top:70px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#000;
}

.rightEyess{
 position:absolute;
 width:18px;
 height:25px;
 left:150px;
 top:77px;
 border:1px #FFF solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#FFF;
}

.eyeCenter{
 position:absolute;
 width:6px;
 height:6px;
 left:102px;
 top:77px;
 border:1px #FFF solid;
 border-radius:50% 50%;
 background-color:#FFF;
 z-index:12;
}

.mouthTop{
 position:absolute;
 width:200px;
 height:150px;
 left:38px;
 top:127px;
 overflow:hidden;
 border:1px #FFA600 solid;
 border-radius:50% 45%;
 z-index:10;
 border-left-color:
 transparent;
 border-right-color:transparent;
}

.mouthBottom{
 position:absolute;
 width:185px;
 height:100px;
 left:5PX;
 top:-59px;
 border:1px #FFA600 solid;
 border-radius:50% 50%;
 z-index:11;
 border-left-color:#FFF;
 border-right-color:#FFF;
 border-top-color:#FFF;
 background-color:#FFA600;
}

.mouthCenter{
 position:absolute;
 width:100px;
 heigt:28px;
 z-index:15;
 left:55PX;
 top:26px;
 border:1px #FFA600 solid;
 border-bottom-left-radius:50% 35%;
 border-bottom-right-radius:50% 35%;
 background-color:#FFA600;
}

.leftZui{
 position:absolute;
 left:118px;
 top:150px;
 z-index:20;
 height:5px;
 width:5px;
 border-radius:50% 50%;
 background-color:#FFF;
}

.rightZui{
 position:absolute;
 left:200px;
 top:150px;
 z-index:20;
 height:5px;
 width:5px;
 border-radius:50% 50%;
 background-color:#FFF;
}

.weibo{
 position:absolute;
 width:290px;
 height:150px;
 left:-10px;
 top:80px;
 border:5px #000 solid;
 border-radius:50% 50%;
 background-color:#FF0008;
 z-index:4;
}

.weiboleft{
 position:absolute;
 width:60px;
 height:80px;
 left:50px;
 top:200px;
 border:3px #000 solid;
 background-color:#FF0008;
 z-index:3;
 border-bottom-left-radius:40%;
 border-bottom-right-radius:20%;
 border-top-left-radius:50%;
}

.weiLeftGang{position:absolute;}

.weiRightGang{
 position:absolute;
 left:89px;
 top:124px;
 border-right: 7px solid black;
    width: 180px;
    height: 65px;
    border-bottom-right-radius: 70px 70px;
 transform:rotate(3deg);
 z-index:20;
}
.weiLeftGang{
 position:absolute;
 left:2px;
 top:140px;
 border-left: 5px solid black;
    width: 70px;
    height: 45px;
    border-bottom-left-radius: 70px 70px;
 transform:rotate(-1deg);
 z-index:20;
}
.dudu{
 position:absolute;
 left:17px;
 top:90px;
 width:250px;
 height:300px;
 border:1px #000 solid;
 border-radius:50% 50%;
 background-color:#FFF;
 z-index:2;
}

.waidudu{
 position:absolute;
 width:300px;
 height:360px;
 background-color:#000;
 border:1px #000 solid;
 left:-10px;
 top:35px;
 border-radius:50% 50%;
 z-index:1;
}

.leftarm{
 position:absolute;
 width:40px;
 height:160px;
 left:-53px;
 top:153px;
 overflow:hidden;
 transform:rotate(30deg);
 z-index:1;
}

#top{
 position:absolute;
 width:30px;
 height:130px;
 border:1px #000 solid;
 border-top-left-radius:40% 50%;
 border-bottom-left-radius:90% 40%;
 background-color:#000;
}

#leftArmBottom{
 position:absolute;
 width:40px;
 height:120px;
 left:-43px;
 top:164px;
 border:1px #000 solid;
 border-bottom-right-radius:100% 90%;
 border-top-left-radius:90% 90%;
 transform:rotate(6deg);
 background-color:#000;
 z-index:0;
}

.rightArm{
 position:absolute;
 width:30px;
 height:40px;
 left:783px;
 top:213px;
 background-color:#000;
 border:1px #000 solid;
 border-radius:50% 50%;
 transform:rotate(-20deg);
}


.leftFoot{
 position:absolute;
 width:110px;
 height:70px;
 left:533px;
 top:414px;
 border:5px #000 solid;
 background:#FFA600;
 border-radius:50% 50%;

}
.rightFoot{
 position:absolute;
 width:110px;
 height:70px;
 left:663px;
 top:414px;
 border:5px #000 solid;
 background:#FFA600;
 border-radius:50% 50%;
}

.tailLeft{
 position:absolute;
 left:537px;
 top:440px;
 border-right: 5px solid black;
    width: 30px;
    height: 25px;
    border-bottom-right-radius: 70px 70px;
 transform:rotate(210deg)
}

.tailRight{
 position:absolute;
 left:744px;
 top:442px;
 border-left: 5px solid black;
    width: 30px;
    height: 25px;
    border-bottom-left-radius: 70px 70px;
 transform:rotate(150deg)
}

#flower{
 position:absolute;
 left:480px;
 z-index:-1;
 transform:rotate(-20deg)
}
</style>
</head>
<body>
 <img src="meigui.png" id="flower" width="10%"></img>
    <div id="qq">
     <div class="head">
            <div class="leftEye"></div>
            <div class="leftEyes"></div>
            <div class="eyeCenter"></div>
            <div class="rightEye"></div>
            <div class="rightEyes"></div>
            <div class="rightEyess"></div>
            <div class="mouthTop">
             <div class="mouthCenter"></div>
             <div class="mouthBottom"></div>
           </div>
            <div class="mandible"></div>
       </div>
       <div class="weibo"></div>
       <div class="weiboleft"></div>
       <div class="weiRightGang"></div>
       <div class="weiLeftGang"></div>
       
       <div class="dudu"></div>
       <div class="waidudu"></div>
       
     <div class="leftarm">
         <div id="top"></div>
       </div>
     <div id="leftArmBottom"></div>
    </div>
    <div class="rightArm"></div>
    
    
    <div class="leftFoot"></div>
    <div class="rightFoot"></div>
    
    <div class="tailLeft"></div>
    <div class="tailRight"></div>
   
</body>
</html>
图片

这篇关于css3样式绘制腾讯企鹅的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/803772。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
【WebGPU Unleashed】1.1 绘制三角形

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123 在 3D 渲染领域，三角形是最基本的绘制元素。在这里，我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2