css3-简笔画 腾讯QQlogo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简笔画QQ</title>
<style>
.inner{
width:500px;
height: 700px;
margin:20px auto;
position: relative;
}
/*头部*/
.head{
width:200px;
height:170px;
background-color: #000;
z-index: 10;
position: absolute;
top:0;
left:100px;
border:1px solid #999;
border-top-left-radius: 105px 105px;
border-top-right-radius: 105px 105px;
border-bottom-left-radius: 105px 62px;
border-bottom-right-radius: 105px 62px;
}
/*眼睛*/
.eyes-lef{
width:40px;
height:60px;
background-color: #fff;
position: absolute;
top:40px;
left:50px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:flash 1s .2s ease both;
-moz-animation:flash 1s .2s ease both;
}
.eyes-rig{
width:40px;
height:60px;
background-color: #fff;
position: absolute;
top:40px;
right:50px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:flash 1s .2s ease both;
-moz-animation:flash 1s .2s ease both;
}
@-webkit-keyframes flash{
0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
}
@-moz-keyframes flash{
0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;}
}
.eye-lef{
width:20px;
height:30px;
background-color: #000;
position: absolute;
top:15px;
right:4px;
border:1px solid #999;
border-radius: 50% 50%;
-webkit-animation:bounce 1s .2s ease both;
-moz-animation:bounce 1s .2s ease both;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-10px)}
60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-10px)}
60%{-moz-transform:translateY(-5px)}
}
.eye-rig{
width: 20px;
height: 23px;
background-color: #000;
position: absolute;
top:15px;
left:4px;
border: 1px solid #999;
border-top-left-radius: 10px 27px;
border-top-right-radius: 10px 27px;
border-bottom-left-radius: 0px 0px;
border-bottom-right-radius: 0px 0px;
-webkit-animation:bounce 1s .2s ease both;
-moz-animation:bounce 1s .2s ease both;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-10px)}
60%{-webkit-transform:translateY(-5px)}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-10px)}
60%{-moz-transform:translateY(-5px)}
}
/*嘴巴*/
.mouse-top{
width: 145px;
height: 34px;
background: #FFA600;
position: absolute;
bottom: 29px;
left: 29px;
border: 1px solid #FFA600;
border-bottom: none;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
}
.mouse-bun{
width: 124px;
height: 24px;
background: #FFA600;
position: absolute;
bottom:15px;
left:40px;
border: 1px solid #FFA600;
border-top: none;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
margin-top: 20px;
}
/*围巾*/
.collar{
width: 241px;
height: 110px;
z-index: 5;
background-color: #FB0009;
position: absolute;
top: 100px;
left: 78px;
border:4px solid #000;
border-top-left-radius: 30px 34px;
border-top-right-radius: 38px 34px;
border-bottom-left-radius: 50% 76px;
border-bottom-right-radius: 50% 76px;
border-top: none;
}
/*身体*/
.body{
width: 270px;
height: 170px;
z-index: 3;
position: absolute;
top:160px;
left:69px;
overflow: hidden;
}
.body-out{
width: 260px;
height: 230px;
background-color: #000;
z-index: 3;
position: absolute;
bottom: 0px;
left: 0px;
border: 1px solid #000;
border-top: none;
border-radius:125px;
}
.body-int{
width: 215px;
height: 205px;
background-color: #fff;
z-index: 4;
position: absolute;
top: 18px;
left:24px;
border: 1px solid #000;
border-radius: 50%;
}
.pocket{
width: 50px;
height:60px;
z-index: 5;
background: #FB0009;
position: absolute;
top: 74px;
left:13px;
border:3px solid #000;
border-top-left-radius: 29px 54px;
border-bottom-left-radius: 37px 47px;
border-bottom-right-radius: 16px 13px;
}
/*手臂*/
.arms-lef{
width: 45px;
height: 111px;
position: absolute;
top: 153px;
left: 38px;
overflow: hidden;
transform: rotate(28deg);
-webkit-transform: rotate(28deg);
-moz-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
}
.arm-lef{
width:40px;
height: 110px;
background-color: #000;
position: absolute;
bottom: 0px;
left:0px;
border:1px solid #000;
border-top-left-radius: 74px 171px;
border-top-right-radius: 38px 93px;
border-bottom-left-radius: 103px 155px;
border-bottom-right-radius: 34px 159px;
}
.arms-rig{
width: 41px;
height: 108px;
position: absolute;
top: 158px;
left: 308px;
overflow: hidden;
transform: rotate(-21deg);
-webkit-transform: rotate(-21deg);
-moz-transform:rotate(-21deg);
-o-transform:rotate(-21deg);
-ms-transform:rotate(-21deg);
}
.arm-rig{
width:40px;
height: 110px;
background-color: #000;
position: absolute;
bottom: 0px;
right:0px;
border:1px solid #000;
border-top-left-radius: 17px 48px;
border-top-right-radius: 15px 53px;
border-bottom-left-radius: 20px 86px;
border-bottom-right-radius: 31px 80px;
}
/*脚*/
.foot-lef{
width: 111px;
height: 69px;
background: #FFA600;
position: absolute;
top: 279px;
left: 76px;
border:4px solid #000;
border-top: none;
border-top-left-radius: 70px 36px;
border-bottom-left-radius: 63px 38px;
border-bottom-right-radius: 50px 39px;
}
.foot-rig{
width: 110px;
height: 65px;
background: #FFA600;
position: absolute;
top: 285px;
left: 203px;
border: 4px solid #000;
border-top-right-radius: 60px 51px;
border-bottom-left-radius: 68px 41px;
border-bottom-right-radius: 69px 33px;
}
</style>
</head>
<body>
<div class="inner">
<!-- 头部 -->
<div class="head">
<!-- 眼睛 -->
<div class="eyes-lef">
<div class="eye-lef"></div>
</div>
<div class="eyes-rig">
<div class="eye-rig"></div>
</div>
<!-- 嘴巴 -->
<div class="mouse-top"></div>
<div class="mouse-bun"></div>
</div>
<!-- 围巾 -->
<div class="collar"></div>
<!-- 身体 -->
<div class="body">
<div class="body-out">
<div class="body-int">
<div class="pocket"></div>
</div>
</div>
</div>
<!-- 手臂 -->
<div class="arms-lef">
<div class="arm-lef"></div>
</div>
<div class="arms-rig">
<div class="arm-rig"></div>
</div>
<!-- 脚 -->
<div class="foot-lef"></div>
<div class="foot-rig"></div>
</div>
</body>
</html>
css3-简笔画 腾讯QQlogo相关推荐
- indesign如何画弧线_硬币画警车简笔画【图文+视频教程】
第221期原创教程 警车简笔画 ▼ 男孩福利来啦!小男孩都会喜欢警车和恐龙玩具吧,前面我们画了恐龙简笔画.消防车简笔画和挖掘机简笔画,今天我们来画警车简笔画,准备好两个硬币,一起来画吧. 绘画步骤 s ...
- 用python画出小人发射爱心_小人发射爱心biu简笔画表情-biu小人简笔画表情动态完整版-东坡下载...
最近微信上有个发红包的新玩法,可以发动态的表情,最好的当属biu小人简笔画表情了,可以一步步的画出那个小人,非常有创意的红包,东坡这里整理了一些biu小人简笔画表情分享给大家,有需要赶紧下载吧. 表情 ...
- 这个AI“大师级”简笔画水平，惊艳到了网友：竟然不用GAN
金磊 发自 凹非寺 量子位 报道 | 公众号 QbitAI AI画的简笔画能到什么水平? 给一张美国演员Rami Malek的照片,效果是这样的. 是不是和原图很逼近了? 再来看下输入<老友记& ...
- python绘制派大星_彩色派大星简笔画步骤
派大星是海绵宝宝的好朋友,一只粉红色的卡通海星.很多小伙伴都非常羡慕派大星和海绵宝宝的友谊,也非常喜欢派大星.下面露西学画画网给大家分享彩色派大星简笔画步骤,我们来按照步骤画一只派大星吧. 派大星是一 ...
- 中间画一条短竖线_许愿孔明灯怎么画，简约好看的孔明灯简笔画教程
日常许愿用的孔明灯简笔画如下,主要由直线和椭圆形构成.首先画一个椭圆形作为它的底部,然后在它的两端分别向上画一条线,接着线的一端继续画三条短直线,把整个轮廓描出来.然后在拐角处画上两竖线,让它有棱角更 ...
- 如何用catia画半圆_简笔画用半圆画卡通动物
[创意系列-半圆动物] ◁第一步 首先画出三个半圆形.大小是一样的. 第二步▷ 在第一个半圆上画出一对尖尖的耳朵. ◁第三步 然后画出它的表情.眼睛留出高光部分. 第四步▷ 还有一双小小的手臂.可爱的 ...
- python简笔画绘制 数据驱动绘图恐龙_使用python turtle绘制简笔画大白-Go语言中文社区...
使用python turtle绘制简笔画大白 完整代码: import turtle as t pen = t.Turtle() # 定义画笔实例 pen.speed(0) pen.pensize(5 ...
- html 直线变曲线,CSS3怎么画曲线？
CSS3怎么画曲线?下面本篇文章给大家介绍一下CSS3画曲线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3怎么画曲线? 大家都知道,CSS3中border已经可以实 ...
- 线条边框简笔画图片大全_简笔画猪 手抄报图片边框版式大全
小猪简笔画绘画教程步骤(6) 可爱简笔画猪剪影 动物剪影 手绘动物 简洁 动物简笔画 猪简笔画png q版可爱猪简笔画 简笔画猪的画法 简笔画小猪佩奇爸爸 简笔画大全 猪 胖猪简笔画 猪的简笔画步骤- ...
- opengl画的弧线 为什么有一个半径_怪兽怎么画？简笔画怪兽教程来啦！跟孩子一起学习画萌萌的怪兽吧...
怪兽怎么画?简笔画的画法,其实也是相对来说比较简单的.今天,就分享一个简笔画教程.家长可以跟孩子一起,来画萌萌哒的怪兽. 不知道为什么,孩子虽然看上去比较弱小,但是就是喜欢怪兽.而且,在孩子看来,怪兽 ...
最新文章
- 【转载】python学习之 字符串前'r'的用法
- eureka多台注册中心_微服务实战系列（五）-注册中心Eureka与nacos区别
- 数据查询分页 获取总数时间太长_干货：SQL Server 查询语句
- python文件粉碎传输_python使用stuck 实现scoket编程实现文件传输
- 21天精通python-21天学通Python 完整pdf扫描版[58MB]
- Keil forc51安装教程
- 国家文物局：长城沿线群众是文物保护的重要力量
- Matlab学习记录 1
- 热议 | 深圳中学教师年薪35万，有一半是博士
- 基于商品包含关系的飞猪搜索优化实践
- leetcode ---双指针+滑动窗体
- 设计原则 里氏替换原则
- 如何保护自己的机器不受“网络执法官”盗用IP地址及密码
- 【高性能Mysql 】读书笔记（一）
- win10如何调整计算机时间同步,win10电脑时间与Internet同步的设置方法
- ORA-20011, KUP-11024 外部表引发报错
- 组建团队和调整团队结构
- 一览数据异步加载的解决方案
- 职业能力测试之逻辑（一）
- 手写数字识别问题（5）——完结
热门文章
- 读书总结-《数学之美》
- 博世BMA400传感器API (中文说明)
- 计算机数学的外文翻译,计算机 数学 外文翻译 外文文献 英文文献 模糊随机森林.doc...
- 图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
- 零一背包问题（一维列表逆序的解释）
- c语言高级编程培训,C语言高级编程
- 《觉醒》：头脑编程与全息宇宙 大卫·艾克
- Java解析PDF文件（PDFBOX、itext解析PDF）导出PDF中的子图片，去除PDF中的水印
- 光敏电阻5506主要参数_光敏电阻器的主要参数
- Linux 触摸屏 笔记本,Linux 5.2应该可以解决许多AMD Ryzen笔记本电脑触摸屏/触摸板无法工作的问题...