css3 画小蜜蜂
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 bee</title>
<style>
.wrapper{
width:390px;
height:304px;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center; } .bee-body{
position: relative;
margin: 136px 130px 38px 130px;
min-width: 130px;
background: #ffca31;
height: 130px;
width: 130px;
border-radius: 50%;
background-size: 97px 64px, cover, cover, cover;
background-image:linear-gradient(to bottom,transparent 50%, #292929 50%)/*身上的黑色条纹*/,radial-gradient(circle at 51% 36%, #ffd764 47%, rgba(0, 0, 0, 0) 47%),
radial-gradient(circle at 51% 53%, #ffd764 55%, rgba(0, 0, 0, 0) 55%),radial-gradient(circle at 60% 53%, #ffebb1 60%,rgba(0,0,0,0) 60%); /*头 和 触角的原点*/
box-shadow:35px -105px 0 -44px #FFD764,-35px -105px 0 -44px #FFD764,/*眼睛黄色*/
32px -105px 0 -41px #ffebb1,-38px -105px 0 -41px #ffebb1,/*眼睛黄色外圈*/
-3px -90px 0 -19px #ffd764,-2px -95px 0 -18px #ffebb1,-10px -94px 0 -17px #ffca31,/*头和头的外圈*/
-40px -183px 0 -56px #262626,40px -183px 0 -56px #262626,/*触角的●*/
-39px -185px 0 -55px #505050,41px -185px 0 -55px #505050,/*触角的●的二层*/
-40px -185px 0 -52px #363636,40px -185px 0 -52px #363636;/*触角的●的三层*/
} .bee-body:before{
position:absolute;
content:'';
background-color:linear-gradient(to botom,transparent 50%,#434343 50%);
background: -webkit-linear-gradient(top, transparent 50%, #434343 50%);
width:130px;
height:130px;
right:0;
bottom:0;
background-size:130px 65px;
border-radius:50%;
-webkit-clip-path:ellipse(41% at 50% 50%);
clip-path:ellipse(41% at 50% 50%);
} /*尾巴*/
.bee-body:after{
position:absolute;
content:'';
width:30px;
height:30px;
bottom: -28px;
left: 50px;
background:linear-gradient(to right, #292929 50%, #363636 50%);
clip-path:polygon(0 0,50% 100%,100% 0);
} /*触角*/
.antenae{
position:relative;
width:65px;
height:65px;
border-left:8px solid #363636;
border-radius:50%;
left: 75px;
top: -125px;
box-sizing: border-box;
z-index: -2;
-webkit-transform:scaleY(-20deg);
transform:skewY(-20deg);
}
.antenae:before{
content:'';
position:absolute;
width:65px;
height:65px;
border-right:8px solid #363636;
border-radius:50%;
left: -95px;
top:-36px;
box-sizing: border-box;
z-index: -2;
-webkit-transform:scaleY(45deg);
transform:skewY(45deg);
} /*眼睛*/
.blink{
position:relative;
}
.blink:before,.blink:after{
content:'';
position:absolute;
width:46px;
height:46px;
top: -64px;
border-radius:50%;
background-color:#f0f0f0;
clip-path: ellipse(50% 20% at 50% 50%);
-webkit-animation: blink 10s linear infinite;
animation: blink 10s linear infinite;
} .blink:before{
left: 4px;
background-image:radial-gradient(circle at 70% 44%,#Fff 10%,rgba(0,0,0,0) 12%),
radial-gradient(circle at 67% 48%,#363636 18%,rgba(0,0,0,0) 20%),
radial-gradient(circle at 65% 49%,#434343 20%,rgba(0,0,0,0) 29%),
radial-gradient(circle at 65% 50%,#292929 30%,rgba(0,0,0,0) 32%),
radial-gradient(ellipse at 55% 58%, #f8f8ff 50%, rgba(0, 0, 0, 0) 50%),
radial-gradient(circle at 80% 71%, #ffffff 67%, rgba(0, 0, 0, 0) 65%);
}
.blink:after{
right: 9px;
background-image: radial-gradient(circle at 35% 44%,#Fff 11%,rgba(0,0,0,0) 13%),
radial-gradient(circle at 47% 48%,#363636 23%,rgba(0,0,0,0) 24%),
radial-gradient(circle at 45% 49%,#434343 30%,rgba(0,0,0,0) 33%),
radial-gradient(circle at 45% 50%,#292929 33%,rgba(0,0,0,0) 35%),
radial-gradient(ellipse at 55% 58%, #f8f8ff 50%, rgba(0, 0, 0, 0) 48%),
radial-gradient(circle at 73% 65%, #ffffff 67%, rgba(0, 0, 0, 0) 65%);
} /*嘴巴*/
.mouth{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
left: 50px;
top: -20px;
box-sizing:border-box;
border-bottom:5px solid #363636;
} /*翅膀*/
.bee-left{
position:absolute;
width:140px;
height:100px;
left: -110px;
top: -82px;
background-color:#f8f8ff;
transform:skewY(30deg);
border-radius:26px 108px 35px 60px;
box-shadow:inset 2px 35px 0px 6px #fff;
z-index:-1;
}
.bee-left:after{
content:'';
position:absolute;
width:100px;
height:120px;
left: 40px;
bottom: -95px;
background-color:#F0F0F0;
border-radius:135px 36px 135px 50px;
box-shadow:inset 13px 15px 1px -7px #fff, inset 18px 18px 3px 6px #f6f6f6;
}
.bee-right{
position:absolute;
width:140px;
height:100px;
left:92px;
top: -82px;
background-color:#f8f8ff;
transform:skewY(-30deg);
border-radius:108px 38px 75px 60px;
box-shadow:inset 2px 35px 0px 6px #fff;
z-index:-1;
}
.bee-right:after{
content:'';
position:absolute;
width:100px;
height:120px;
right: 25px;
bottom: -100px;
background-color:#F0F0F0;
border-radius:46px 184px 100px 185px;
box-shadow:inset -13px 15px 1px -7px #fff, inset -18px 18px 3px 6px #f6f6f6;
} /*眨眼睛*/
@-webkit-keyframes blink {
0% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
9% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
10% {
-webkit-clip-path: ellipse(50% 5% at 50% 50%);
clip-path: ellipse(50% 5% at 50% 50%);
}
11% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
30% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
31% {
-webkit-clip-path: ellipse(50% 5% at 50% 50%);
clip-path: ellipse(50% 5% at 50% 50%);
}
32% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
33% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
34% {
-webkit-clip-path: ellipse(50% 5% at 50% 50%);
clip-path: ellipse(50% 5% at 50% 50%);
}
35% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
50% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
60% {
-webkit-clip-path: ellipse(50% 20% at 50% 50%);
clip-path: ellipse(50% 20% at 50% 50%);
}
61% {
-webkit-clip-path: ellipse(50% 20% at 50% 50%);
clip-path: ellipse(50% 20% at 50% 50%);
}
69% {
-webkit-clip-path: ellipse(50% 20% at 50% 50%);
clip-path: ellipse(50% 20% at 50% 50%);
}
70% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
79% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
80% {
-webkit-clip-path: ellipse(50% 5% at 50% 50%);
clip-path: ellipse(50% 5% at 50% 50%);
}
81% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
100% {
-webkit-clip-path: ellipse(50% 50% at 50% 50%);
clip-path: ellipse(50% 50% at 50% 50%);
}
}
</style>
</head> <body style="background-color:#AFF;">
<div class="wrapper">
<div class="bee">
<div class="bee-body">
<div class="blink"></div>
<div class="antenae"></div>
<div class="mouth"></div>
<div class="bee-left"></div>
<div class="bee-right"></div>
</div>
</div>
</div> </body>
</html>
css3 画小蜜蜂的更多相关文章
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- 如何用CSS3画出一个立体魔方？
前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
- 如何用CSS3画出懂你的3D魔方？
作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- 关于用CSS3画图形的一些思考
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
- （转）浅谈HTML5与css3画饼图！
神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
随机推荐
- 【BZOJ4398】福慧双修（二进制，最短路）
题意: 此题中S=1 思路:Orz ManGod秒切此题 我觉得出入边权互换不太直观,就改了一下写法 第一次默认与1有关的第一条出边只出不入,第二次默认只入不出 ..]of longint; head ...
- [bzoj3289]Mato的文件管理_莫队_树状数组
Mato的文件管理 bzoj-3289 题目大意:给定一个n个数的序列.m次询问:一段区间中的逆序对个数. 注释:$1\le n\,mle 5\cdot 10^4$. 想法: 开始想这个题的大佬们,给 ...
- 马悦:《Linux内核分析》MOOC课程
http://www.cnblogs.com/20135235my/p/5237267.html
- ObjectiveC开发教程--字符串的连接
NSString *type = @"hello"; NSString *subtype = @"good"; NSString *typesub = [NSS ...
- NodeJS经常使用模块收集
收集了NodeJS开发中经常使用的一些模块. MVC框架 - Express Express 是轻量灵活的Nodejs Web应用框架.它能够高速地搭建站点. Express框架建立在Nodejs内置 ...
- 1250 Fibonacci数列
1250 Fibonacci数列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 定义:f ...
- JMeter常用函数 使用图解
函数的调用都是以${__function()}这种形式开始的注意:“__”是两个英文下划线 __UUID 生成唯一字符串
- Android中关于横竖屏问题
一.屏幕的方向可以在AndroidManifest.xml文件中通过设置screenOrientation属性来实现, screenOrientation用来指定Activity的在设备上显示的方向, ...
- Git:代码冲突常见解决方法【转】
本文转载自:http://blog.csdn.net/iefreer/article/details/7679631 如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时 ...
- YTU 2720: 删出多余的空格
2720: 删出多余的空格 时间限制: 1 Sec 内存限制: 128 MB 提交: 338 解决: 201 题目描述 小平在给弟弟检查英语作业时时,发现每个英语句子单词之间的空格个数不等,请你编 ...