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的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
随机推荐
- JavaSE 学习笔记之Jdk5.0新特性（十九）
Jdk5.0新特性: Collection在jdk1.5以后,有了一个父接口Iterable,这个接口的出现的将iterator方法进行抽取,提高了扩展性. --------------------- ...
- 使用lombok提高编码效率-----不用写get set
使用lombok提高编码效率-----不用写get set https://blog.csdn.net/v2sking/article/details/73431364
- 转载 - Struts2拦截器配置
出处:http://blog.csdn.net/axin66ok/article/details/7321430 目录(?)[-] 理解拦截器 1 什么是拦截器 2 拦截器的实现原理 拦截器的配置 使 ...
- 微信最新开源的PhxSQL
在编者看到“[重磅]微信开源PhxSQL:高可用.强一致的MySQL集群”时,由衷赞叹,这等造福广大DBA及运维同仁的事情,真心赞.腾讯及微信的开放,真的不是说说而已. 本文由资深DB从业者撰写,相信 ...
- eclipse的Java项目修改后要不要重启tomcat问题
tomcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗? 答: omcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗?有没有不重启的方法,或者其他高效点的,让服 ...
- Javascript: 动态显示进度条
{% if not config.exec_id == '' %} <br /> <div class="progress"> <div class= ...
- Cocos2d-X中的菜单
在Cocos2d-X实现显示菜单的方式比較特殊,首先须要使用CCMenu创建一个菜单,然后使用CCMenuItem创建一个菜单项,实际上程序中显示的菜单是使用CCMenu和CCMenuItemFont ...
- 条款31: 千万不要返回局部对象的引用，也不要返回函数内部用new初始化的指针的引用
先看第一种情况:返回一个局部对象的引用.它的问题在于,局部对象 ----- 顾名思义 ---- 仅仅是局部的.也就是说,局部对象是在被定义时创建,在离开生命空间时被销毁的.所谓生命空间,是指它们所在的 ...
- Speak a Good Word for SB
今天举行了英语词汇发音交流会,通过这个会议我有了非常大了感触. 一共同拥有三个环节.第一个环节读单词我们组读的单词it.pen.do.stop.think.park.sink.wood.在这一个环节中 ...
- map， string 强大的STL
hdu 1247 Hat's Words Input Standard input consists of a number of lowercase words, one per line, in ...