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的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
随机推荐
- 我安装android studio的过程与经历
虽然android studio已经出来两年多了,但是我一直都没真正用过.之前用Eclipse还算用得挺好.我并不是一个专职的android开发者,我是个游戏开发者,打包的时候要用到android.不 ...
- [K/3Cloud] 首页增加一个自定义页签及页面内容
在K3Cloud登录后的门户首页增加一个页签,如增加一个[BBS论坛] 2013-7-30 11:18:51 上传 下载附件 (84.81 KB) 增加页签 可以这么来做: 进入BOS IDE ,找 ...
- 最小生成树 B - Networking
You are assigned to design network connections between certain points in a wide area. You are given ...
- tomcat服务器配置把Http协议强制转化为Https
1)在命令提示符窗口,进入Tomcat目录,执行以下命令: keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass ...
- SiteMesh2-sitemesh.xml的其它映射器的用法
在sitemesh.xml中做常用的三个映射器,总结如下: 映射器元素的顺序确定优先级.良好的应用程序应使用以下顺序, Parameter query = ParameterDecoratorMapp ...
- Unity uGui RawImage 渲染小地图
制作类似 RPG 游戏时,可能会须要显示小地图. 小地图的制作一种方式是用还有一个摄像机来渲染到一张纹理上.实时显示到UI界面. 以Unity 5.0 的 UI 系统为例: 在地图正上方放置一个摄像机 ...
- ssh远程连接出现someone counld be eavesdropping on you right now 的错误
master主机通过ssh远程连接slaves机子时出现下述错误 解决的方法: 一.删除/root/.ssh/下的kown_hosts文件 二.在master机子上又一次运行scp id_dsa.pu ...
- java线程和线程池的使用
java线程和线程池 一.创建多线程的方式 java多线程非经常见.怎样使用多线程,怎样创建线程.java中有两种方式,第一种是让自己的类实现Runnable接口.另外一种是让自己的类继承Thread ...
- C#实现马尔科夫模型例子
已知条件:三个缸N状态,每个缸中不同颜色球的个数M状态值,时间轴T,观察值序列O 参数:状态值序列,转移概率序列 求:概率 后台代码如下 , M = ;//N状态,M状态值 (0橙色,1绿色,2蓝色, ...
- 使用JavaScript开发IE浏览器本地插件实例
使用JavaScript开发IE浏览器本地插件实例 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2015-02-18我要评论 这篇文章主要介绍了使用JavaScript开发IE浏览器本 ...