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 339C】Xenia and Weights
[链接] 我是链接,点我呀:) [题意] 在天平上放砝码 你要在左边放一下然后到右边放一下 一直重复这样放m次 每次你放在其中一边都要让另外一边的重量比你少 你可以用1~10中的某些砝码 问你要怎样放 ...
- 设置mysql5.7远程连接-----------https://blog.csdn.net/qiyueqinglian/article/details/52778230
https://blog.csdn.net/qiyueqinglian/article/details/52778230 设置mysql5.7远程连接
- E - 不容易系列之(4)――考新郎 错排数公式
国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎",具体的操作是这样的: 首先,给每位新娘打扮得几乎一模一 ...
- HDU——2588 GCD
题目大意: 求1~N中与N的最大公约数大于M的个数 思路: 这个题是不是可以想到暴力枚举??对于每一组数据枚举与他的最大公约数大于m的数的个数. 是,这种做法没错误,但是保准你T成狗.... 我们至少 ...
- Linux运行级别研究（转）
Linux系统中的运行级别 7种运行级别 运行级别(Runlevel)指的是Unix或者Linux等类Unix操作系统的运行模式,不同的运行模式下系统的功能也有所有不同.Linux 系统下通常分为7种 ...
- Ubuntu 16.04设置开机启动应用程序
在终端通过以下命令进行设置,Dash已经搜索不到Startup了: gnome-session-properties 或者直接在Dash中搜索:gnome-session
- MyBatis3-代码生成工具的使用
以下内容引用自http://www.yihaomen.com/article/java/331.htm: MyBatis应用程序,需要大量的配置文件,对于一个成百上千的数据库表来说,完全手工配置,这是 ...
- DELPHI7加载UNICODE编码格式的TXT显示为乱码的解决方法
DELPHI7的STRING默认是ANSI编码,加载UNICODE编码格式的TXT显示为乱码,解决方法如下: procedure TForm1.Button1Click(Sender: TObject ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- LeetCode 893. Groups of Special-Equivalent Strings (特殊等价字符串组)
题目标签:String 题目可以让在 偶数位置的 chars 互换, 也可以让 在 奇数位置的 chars 互换. 所以为了 return 正确的 group 数量,需要把 那些重复的 给排除掉. 可 ...