Action_卡通大白
来源:互联网 发布:java传输文件 编辑:程序博客网 时间:2024/04/25 16:22
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>卡通css大白</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
body{background: #af2024;}
.wrap{
width: 500px;
height: 700px;
margin:0 auto;
position: relative;
}
/* 头部 */
.header{
width: 114px;
height: 76px;
background: -webkit-linear-gradient(top,#fff 50%,#d6d6d6 100%);
background: linear-gradient(top,#fff 50%,#d6d6d6 100%);
border-radius: 50% 50% 45% 45%;
position: relative;
margin:0 auto;
top: 60px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
z-index:400;
animation:turn 6s infinite;
-webkit-animation:turn 6s infinite;
}
.eyeLeft{
width: 14px;
height: 14px;
background: #333;
border-radius: 50%;
position: absolute;
left:23px;
top:30px;
animation:nication 2.3s ease infinite;
-webkit-animation:nication 2.3s ease infinite;
}
.eyeRight{
width: 14px;
height: 14px;
background: #333;
border-radius: 50%;
position: absolute;
left:74px;
top:30px;
animation:nication 2.3s ease infinite;
-webkit-animation:nication 2.3s ease infinite;
}
@keyframes nication{
0%,20%, 100%{
-webkit-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
@-webkit-keyframes nication{
0%,20%, 100%{
-webkit-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
@keyframes turn{
0%,10%,20%,30%,80%,90%,100%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
35%,40%,45%,50%,55%,65%,75%{
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
}
}
@-webkit-keyframes turn{
0%,10%,20%,30%,80%,90%,100%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
35%,40%,45%,50%,55%,65%,70%,75%{
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
}
}
.eyeMouth{
width: 55px;
height: 5px;
border-radius: 50%;
box-shadow: 0 1.5px 0 #333;
position: absolute;
top:33px;
left: 30px;
}
/* 身体 */
.body_top{
width: 226px;
height: 160px;
background: -webkit-linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
background: linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
border-radius: 105px 105px 5px 5px;
position: absolute;
top:118px;
left: 135px;
z-index:200;
}
.body_top_heart{
width: 30px;
height: 30px;
background: #eee;
border-radius: 50%;
position: absolute;
top:60px;
left: 155px;
box-shadow: 0px 3px 1px rgba(0,0,0,.1), 0px 3px 2px rgba(255,255,255,1) inset;
-webkit-transform:skew(10deg,0) rotate(10deg);
transform:skew(10deg,0) rotate(10deg);
overflow: hidden;
cursor: pointer;
}
.body_top_heart>span{
width: 8px;
height: 1px;
background: rgba(0,0,0,0.1);
position: absolute;
}
.body_top_heart>span:nth-child(1){
top:17px;
left: 0px;
}
.body_top_heart>span:nth-child(2){
width: 6px;
left: 7px;
top: 15px;
transform: rotate(-45deg);
}
.body_top_heart>span:nth-child(3){
width: 8px;
left: 12px;
top: 13px;
transform: rotate(0deg);
}
.body_top_heart>span:nth-child(4){
width: 6px;
left: 19px;
top: 15px;
transform: rotate(45deg);
}
.body_top_heart>span:nth-child(5){
left: 24px;
top:17px;
}
.body_middle_left{
width: 200px;
height: 280px;
background: #eee;
position: absolute;
top:200px;
left: 115px;
border-radius: 15% 30%;
transform: rotate(10deg);
box-shadow: -3px 0 3px rgba(0,0,0,0.1);
z-index:100;
}
.body_middle_right{
width: 200px;
height: 280px;
background: #eee;
position: absolute;
top:200px;
left: 180px;
border-radius: 30% 15%;
transform: rotate(-10deg);
box-shadow: 3px 0 3px rgba(0,0,0,0.1);
z-index:100;
}
.body_tummy{
width: 286px;
height: 233px;
border-radius: 50%;
position: absolute;
top:290px;
left: 103px;
background: -webkit-linear-gradient(top, #eee 50%,#d2d2d2 100%);
background: linear-gradient(top, #eee 50%,#d2d2d2 100%);
box-shadow: 0px 5px 5px rgba(0,0,0,.2);
z-index:300;
}
.body_foot_left{
width: 118px;
height: 180px;
position: absolute;
top:450px;
left:132px;
background:#eee;
border-radius: 10% 20% 18% 58%;
box-shadow:-1px 0px 8px rgba(0,0,0,0.2) inset;
z-index: 20;
}
.body_foot_right{
width: 118px;
height: 180px;
position: absolute;
top:450px;
left:250px;
background:#eee;
border-radius: 18% 10% 58% 20%;
box-shadow:1px 0px 8px rgba(0,0,0,0.2) inset;
z-index: 20;
}
.head .head_left1{
width: 260px;
height: 150px;
background: #eee;
position: absolute;
top: 170px;
left: 36px;
transform: rotate(-48deg);
border-radius: 50%;
}
.head .head_left2{
width: 100px;
height: 237px;
background: #eee;
position: absolute;
top:215px;
left: 56px;
transform: rotate(2deg);
border-radius: 50%;
}
.head .head_right1{
width: 260px;
height: 150px;
background: #eee;
position: absolute;
top: 170px;
left: 200px;
transform: rotate(48deg);
border-radius: 50%;
}
.head .head_right2{
width: 100px;
height: 237px;
background: #eee;
position: absolute;
top:215px;
left: 338px;
transform: rotate(-2deg);
border-radius: 50%;
}
.body_shadow{
width: 100px;
height: 80px;
position: absolute;
bottom: 100px;
left: 180px;
}
.body_shadow:before{
content: '';
width: 150px;
height: 80px;
position: absolute;
bottom:0px;
left: 125px;
box-shadow: -200px 70px 30px rgba(160,28,32,0.58);
}
.body_shadow:after{
content: '';
width: 150px;
height: 80px;
position: absolute;
bottom:0px;
left: 273px;
box-shadow: -200px 70px 30px rgba(160,28,32,0.58);
}
.body_display{
width: 135px;
height:0px;
background: #f3f3f3;
position: absolute;
top:320px;
left:170px;
z-index:99999;
box-shadow: 1px 1px 5px #eee inset;
font-size: 12px;
font-family: \5FAE\8F6F\96C5\9ED1;
line-height: 25px;
letter-spacing: 2px;
color: #a2a2a2;
overflow: hidden;
}
</style>
<body>
<div class="wrap">
<div class="header">
<div class="eyeLeft"></div>
<div class="eyeRight"></div>
<div class="eyeMouth"></div>
</div>
<div class="body">
<!-- 身体上部分 -->
<div class="body_top">
<!-- 心脏部位 -->
<div class="body_top_heart" id="TUMMY">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 身体中间部分 -->
<div class="body_middle">
<div class="body_middle_left"></div>
<div class="body_middle_right"></div>
</div>
<!-- 身体中间肚子 -->
<div class="body_tummy"></div>
<!-- 身体肚子上的显示块 -->
<div class="body_display" id="SHOW"></div>
<p hidden id="TELL">您好!我是大白,您的私人健康助理!</p>
<!-- 身体手部分 -->
<div class="head">
<div class="head_left">
<div class="head_left1"></div>
<div class="head_left2"></div>
</div>
<div class="head_right">
<div class="head_right1"></div>
<div class="head_right2"></div>
</div>
</div>
<!-- 身体脚部分 -->
<div class="body_foot">
<!-- 左边 -->
<div class="body_foot_left"></div>
<div class="body_foot_right"></div>
</div>
<!-- 身体阴影 -->
<div class="body_shadow"></div>
</div>
</div>
0 0
- Action_卡通大白
- 大白
- Action_画板
- Action_立方体
- Action_倒计时
- Android -Intent -ACTION_
- Action_移入改变
- Action_美化下拉框
- Action_九宫格
- Action_特殊符号对比
- 大白象?
- 大白电话亭
- 全能大白
- 卡通着色
- 卡通滤波
- SpringMVC项目 URL不进ACTION_
- 怎样才能做一个大白?
- svg画大白
- LBP人脸识别
- Windows下安装Docker, GitBash环境配置
- CentOS下安装Mysql
- 用File打印和改写文件中的内容。
- QT开发小结]LNK1104: cannot open file ‘gdi32.lib’ 解决方法
- Action_卡通大白
- linux命令分类和帮助手册
- 星级评分的演示
- 模板
- centos7网络配置
- mysql 常用命令和增删改查常用语句
- storm笔记:Trident应用
- Java NIO系列教程(十二) Java NIO与IO
- 单向链表倒数k个结点