示例1(嫦娥奔月):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嫦娥奔月</title>
<style type="text/css">
body{
background-color: #000;
}
#moon{
margin: 50px auto;
width: 400px;
height: 400px;
background-image: url(img/moon.png);
background-size: cover;
border:15px solid #eee;
cursor: pointer;
}
#ce{
width: 250px;
height: 250px;
background-image: url(img/ce.png);
background-size: cover; /*看到图像全貌*/
opacity: 0; /*完全透明看不见*/
transform: translate(-65px,-65px); /*左移65,上移65*/
transition: all .5s linear;
}
#moon:hover #ce{
transform: translate(0px,0px); /*原位不动*/
opacity: 1; /*完全不透明*/
}
</style>
</head>
<body>
<div id="moon">
<div id="ce"></div>
</div>
</body>
</html>
示例2(Loading动画):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading动画</title>
<style type="text/css">
body{
color: #fff;
background: #222;
}
.spinner{
width:80px;
height:50px;
margin:100px auto;
text-align:center;
}
.spinner>div{
display:inline-block;
width:6px;
height:100%;
background:green;
animation: strechdelay 1.2s infinite ease-in-out ;
}
.spinner .line1{
animation-delay: -1.2s; /*提前1.2s开始动画*/
}
.spinner .line2{
animation-delay: -1.1s; /*提前1.1s开始动画*/
}
.spinner .line3{
animation-delay: -1.0s; /*提前1.0s开始动画*/
}
.spinner .line4{
animation-delay: -0.9s; /*提前0.9s开始动画*/
}
.spinner .line5{
animation-delay: -0.8s; /*提前0.8s开始动