代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML的小动画</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body{
max-height: 100%;
max-width: 100%;
background-color:#EAF5FF;
}
.box{
width: 800px;
margin: 200px auto;
}
.cartoon{
height: 100px;
margin:0 auto 10px auto;
padding-left: 20%;
}
.cartoon div{
height: 80px;
width: 80px;
float: left;
margin-left: 5%;
}
.cartoon input{
height: 65px;
width: 65px;
margin-top: 5%;
border-radius: 10px;
margin: 9% 0 0 9%;
-webkit-transition:margin-top 0.4s;
-webkit-transition-timing-function:linear;
}
.cartoon input:hover{
margin-top: 0%;
-webkit-transition:margin-top 0.3s;