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的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
随机推荐
- Codeforces 121A Lucky Sum
Lucky Sum Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Origi ...
- ViewService
ViewService 在分布式系统中,最常见的场景就是主备架构.但是如果主机不幸宕机,如何正确的通知客户端当前后端服务器的状况成为一个值得研究的问题.本文描述了一种简单的模型用于解决此问题. 背景 ...
- Introduction to TensorFlow
Lecture note 1: Introduction to TensorFlow Why TensorFlow TensorFlow was originally created by resea ...
- HDU5266 LCA 树链剖分LCA 线段树
HDU5266 LCA Description 给一棵 n 个点的树,Q 个询问 [L,R] : 求点 L , 点 L+1 , 点 L+2 -- 点 R 的 LCA. Input 多组数据. The ...
- 解决CDH SparkStreaming任务启动之后executor不停增长的问题,num-executors配置不管用。
spark2-submit --class SparkKafka --master yarn --executor-memory 1G --num-executors 6 --driver-memor ...
- F - Experienced Endeavour 矩阵快速幂
Alice is given a list of integers by Bob and is asked to generate a new list where each element in t ...
- xtrabackup 恢复单表步骤
1.apply-log应用redo日志,并导出表的数据字典innobackupex --apply-log --export 备份集 2.建表 如果知道表结构,则重建删除的表 create tabl ...
- 《WF in 24 Hours》读书笔记 - Hour 1 - Understanding Windows Workflow Foundation
1.1 Hour 1 - Understanding Windows Workflow Foundation 1.1.1 What workflow is in general A workflo ...
- 局域网部署docker--从无到有创建自己的docker私有仓库
因为GFW的关系.国内用户在使用docker的时候,pull一个主要的镜像都拉下来.更不用说使用官方的index镜像了.差点放弃使用docker了,google了一圈.总算找到办法. 第一步:安装do ...
- Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）
我们有时候会遇到这么一个情况.就是我在一个ListView里面须要显示的东西事实上是有种类之分的.比方我要分冬天,夏天.秋天.春天,然后在这每一个季节以下再去载入各自的条目数据. 还有,比方我们的通讯 ...