看到别人用css3写的baymax ，大白，挺萌的
2024-05-15 03:09:02
http://www.w3cfuns.com/blog-5455933-5404334.html 这是作者博客，转载和使用请标明。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:#999;}
.Baymax{width:300px; height:600px; margin:20px auto auto auto; position:relative; }
.head{width:100px; height:75px; position:absolute; left:100px; border-radius:50%; background:#FFF; box-shadow: 0px 6px 6px #888888,6px 6px 6px #ccc inset; z-index:100; }
.eyes-l{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; left:20px; top:35px;}
.eyes-r{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; right:20px; top:35px;}
.mourse{width:30px; height:3px; position:absolute; top:42px; left:35px; border-radius:50%;box-shadow: 0px 1px 0px #000;}.body{ width:214px; height:320px; left:50%; transform:translate(-50%,0); position:absolute;border-radius:45% 45% 50% 50%; top:55px; background:#FFF; z-index:99; box-shadow: 6px 0px 6px #CCC inset,-6px 0px 6px #ccc inset;}
.belly{width:224px; height:264px; border-radius:42% 42% 50% 50%; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); background:#fff;box-shadow: 0px 3px 2px #888888, 0px -6px 6px #ccc inset ;}
.belly:before{width:20px; height:120px; position:absolute; left:-2px; content:" "; top:50px; border-radius:50% 20% 20% 50%;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(3deg);}
.belly:after{width:20px; height:120px; position:absolute; right:-2px; content:" "; top:50px; border-radius:20% 50% 50% 20%;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-3deg);}.leg-l{width:80px; height:145px; position:absolute; left:70px; top:290px; background:#fff;border-radius:40% 30% 10px 45%; box-shadow: -2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }
.leg-r{width:80px; height:145px; position:absolute; right:70px; top:290px; background:#fff;border-radius:30% 40% 45% 10px;box-shadow: 2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }.hand-l{width:78px; height:224px; position:absolute; left:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(16deg); box-shadow:6px 6px 6px #ccc inset; z-index:91;}
.hl-l{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(-20deg); left:15px;}
.hl-l:before{ content:""; width:15px; height:82px;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(-0deg); position:absolute; left:0; top:10px;border-radius:50% 20% 20% 50%;}
.f-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;left: 65px;transform: rotate(-35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;left: 50px;transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;left: 49px;transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}.hand-r{width:78px; height:224px; position:absolute; right:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(-16deg); box-shadow:-6px -6px 6px #ccc inset; z-index:91;}
.hr-r{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(20deg); right:15px;}
.hr-r:before{ content:""; width:15px; height:82px;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-0deg); position:absolute; right:0; top:10px;border-radius:20% 50% 50% 20%;}
.fr-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;right: 65px;transform: rotate(35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;right: 50px;transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;right: 49px;transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}.cover-s{width:64px; height:15px; position:absolute; left:50%; transform:translate(-50%,0); top:19px; z-index:101;}
.cover-x{width:64px; height:12px; position:absolute; left:50%; transform:translate(-50%,0); bottom:12px; z-index:101; overflow:hidden;}
.left{width:17px; height:15px; float:left; background:#fff;}
.right{width:17px; height:15px; float:right; background:#fff;}.heart{width:30px; height:30px; border-radius:50%; position:absolute; box-shadow:2px 2px 2px #ccc inset; right:55px; top:60px; z-index:111; border:1px solid #ccc;}@keyframes myfirst
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}@-moz-keyframes myfirst /* Firefox */
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {transform:rotate(0deg);}
25% {transform:rotate(10deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-10deg);}
100{transform:rotate(0deg);}
}.head{
animation: myfirst 10s infinite;
-moz-animation: myfirst 30s infinite; /* Firefox */
-webkit-animation: myfirst 30s infinite; /* Safari 和 Chrome */
}@keyframes eyeclose1
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:28px;}
40%{top:19px;}}@-moz-keyframes eyeclose1 /* Firefox */
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:27px;}
40%{top:19px;}}@-webkit-keyframes eyeclose1 /* Safari 和 Chrome */
{
0% {top:19px;}
5% {top:27px;}
10%{top:19px;}
15%{top:27px;}
20%{top:19px;}}.cover-s{
animation: eyeclose1 3s infinite 2s;
-moz-animation: eyeclose1 3s infinite 2s; /* Firefox */
-webkit-animation: eyeclose1 3s infinite 2s; /* Safari 和 Chrome */
}@keyframes eyeclose2
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}}@-moz-keyframes eyeclose2 /* Firefox */
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}}@-webkit-keyframes eyeclose2 /* Safari 和 Chrome */
{
0% {bottom:12px;}
5% {bottom:20px;}
10%{bottom:12px;}
15%{bottom:20px;}
20%{bottom:12px;}}.cover-x{
animation: eyeclose2 3s infinite 2s;
-moz-animation: eyeclose2 3s infinite 2s; /* Firefox */
-webkit-animation: eyeclose2 3s infinite 2s; /* Safari 和 Chrome */
}
</style>
</head><body>
<div class="Baymax"><div class="head"><div class="cover-s"><div class="left"></div><div class="right"></div></div><div class="cover-x"><div class="left"></div><div class="right"></div></div><div class="eyes-l"></div><div class="eyes-r"></div><div class="mourse"></div></div><div class="hand-l"><div class="hl-l"></div><div class="f-1"></div><div class="f-2"></div><div class="f-3"></div></div><div class="hand-r"><div class="hr-r"></div><div class="fr-1"></div><div class="fr-2"></div><div class="fr-3"></div></div><div class="body"><div class="heart"></div><div class="belly"></div></div><div class="leg-l"></div><div class="leg-r"></div>
</div>
</body>
</html>看到别人用css3写的baymax ，大白，挺萌的相关推荐
- 20个纯css3写的logo
2019独角兽企业重金招聘Python工程师标准>>> 随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 用html+css3写一个小丸子的头像
启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了. <!DOCTYPE html> ...
- 用Html标签和CSS3写的一个手机
手机外形上来说就是长方形,然后加上圆角边框,如果是简单的平面图形,几分钟就可以用html标签和css写一个手机模型.但如果有高光,菱角等让手机展示的更逼真,可以用到css背景渐变属性. 预览页面:CS ...
- 1.animation 判断动画结束，结束后执行另一事件；2.用css3写竖条纹背景
1.用css3的animation完成一个动画,并监听动画结束后才执行另一个事的实现方法: 动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以 2.用css3写带透明色的 ...
- 用CSS3写一个旋转轮播图
用CSS3写一个旋转轮播图 今天用css3写一个不一样的轮播图3D效果. 先看下最后效果吧 1.旋转轮播图结构制作 // html <body><section><div ...
- 我了个去，姐写博客还是挺多的。
我了个去,姐写博客还是挺多的. 装X就要装到底啊,命令模式的优点和缺点都有哪些 "不过上面我总结的第五点在例子当中没有体现,不过这个也好办,其实就相当于是任务可以组合,比如一个线上的问题(P ...
- 用css3写遨游的logo
实现方法: 先画一个外框 width: 240px; height: 240px;border-radius: 120px; 填充背景色background:#b1e4ff; 描边border:2px ...
最新文章
- 多路复用select和epoll的区别（转）
- Delphi绘制Alpha图像的函数
- 二分查找 寻找指定数 python 实现
- gamaredon_Gamaredon组织某样本分析
- JQuery Datatables 数据操作
- 10分钟教会你Apache Shiro
- 如何在html上做弹框效果,网页|利用提示框（Tooltip）实现弹窗效果
- c语言超市收银台程序,超市收银电脑操作流程
- 如何在计算机中快速新建TXT文本文档
- vscode自动快捷格式化代码_vscode格式化代码快捷键_解锁格式化的快捷键
- 电脑重装系统后c盘数据能恢复吗c盘重装后可以数据恢复吗
- W3Cschool从零开始学C语言笔记（1-2）位、字节及排列组合
- php薄饼,薄饼的做法大全
- arm云服务器虚拟安卓,ARM搭建云手机
- 浙大毕业演讲 --- 马一浮
- 比SQL还好用，又一门国产数据库语言诞生了
- 用Mediawiki做百科网站资源大参考
- 第一次在linux服务器上跑python项目Sklearn安装问题
- 百度的广告金主需要MarTech产品不？
- java中兴参与实参相同_java错题集