示例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開始動畫*/
}
@keyframes strechdelay{
0%,40%,100%{
-webkit-transform:scaleY(.4);
}
20%{
-webkit-transform:scaleY(1);
}
}
</style>
</head>
<body>
<div class="spinner">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
</body>
</html>
示例3（Loading動畫2）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading動畫2</title>
<style type="text/css">
body{
background-color: #222;
}
#loading{
width: 150px;
height: 150px;
margin: 100px auto;
border: 10px solid #444;
border-left-color: #eee;
border-radius: 50%;
animation: myload .8s infinite ease-in-out;
}
@keyframes myload{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="loading">
</div>
</body>
</html>
示例4（折角效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折角效果</title>
<style type="text/css">
body {
background-color: #eaf0f2;
}
h1{
font-size: 14px;
font-family: "Microsoft Yahei";
text-align: center;
}
.paper-flip {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
}
.share-layer {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 300px;
background-color: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.btn-wrap {
pointer-events: none;
opacity: 0;
text-align: center;
margin-top: 140px;
text-align: center;
}
.btn {
padding: 10px;
border-radius: 2px;
color: #fff;
display: inline-block;
}
.btn-facebook {
background-color: #3b5998;
}
.btn-twitter {
background-color: #00aced;
margin: 0 20px;
}
.btn-google {
background-color: #d34836;
}
.btn-close {
pointer-events: none;
position: absolute;
right: 15px;
top: 10px;
color: rgba(0,0,0,0.3);
font-size: 20px;
z-index: 11;
opacity: 0;
cursor: default;
}
.paper-flip.folded .btn-close {
-webkit-transition: 0.4s;
transition: 0.4s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
opacity:1;
cursor: pointer;
pointer-events: initial;
}
.paper-flip.folded .btn-wrap{
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
pointer-events: initial;
}
.paper-flip.folded .share-layer {
z-index: 1;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
/*image-layer*/
.image-layer {
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.image-layer img {
width: 500px;
cursor: pointer;
}
.image-layer:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-style: solid;
border-width: 0;
border-color: rgba(0,0,0,0.2) #fff;
border-radius: 0 0 0 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 0.4s ease-out;
transition:all 0.4s ease-out;
}
.image-layer:hover:before{ /*小折角*/
border-right-width:80px;
border-bottom-width:80px;
}
.paper-flip.folded .image-layer:before{ /*大折角*/
border-right-width:1000px;
border-bottom-width:600px;
}
</style>
</head>
<body>
<div class="paper-flip" id="paper-flip">
<div class="share-layer">
<div class="btn-wrap">
<a class="btn btn-facebook">FaceBook</a>
<a class="btn btn-twitter">Twitter</a>
<a class="btn btn-google">Google +</a>
</div>
<span class="btn-close">×</span>
</div>
<div class="image-layer" id="image-layer">
<img src="img/table.jpg" alt="">
</div>
</div>
<script type="text/javascript">
document.getElementById('paper-flip').addEventListener("click",function(e){
if(e.target.className=="btn-close"){
this.className = "paper-flip";
} else {
this.className = "paper-flip folded";
}
});
</script>
</body>
</html>
示例5（鐘擺效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弧形運動效果</title>
<style type="text/css">
body{
margin:0;
background:#111;
text-align:center;
}
h1{
font-size: 14px;
font-family: "Microsoft Yahei";
text-align: center;
}
.stage{
width:120px;
height:auto;
margin:0 auto;
position:relative;
-webkit-transform-origin:center top; /*設置旋轉中心點*/
-webkit-transform:rotate(-30deg);
-webkit-animation:sway 2.2s infinite alternate ease-in-out;
}
.watch{
width:100%;
height:auto;
}
.seconds{
position:absolute;
width:8%;
height:auto;
bottom:11.5%;
left:45.5%;
-webkit-transform-origin:center 72.4%; /*設置旋轉中心點*/
-webkit-animation:second 60s infinite linear;
}
@-webkit-keyframes second{
to{
-webkit-transform:rotate(355deg);
}
}
@-webkit-keyframes sway{
to{
-webkit-transform:rotate(30deg);
}
}
</style>
</head>
<body>
<div class="stage">
<img src="img/z.png" alt="鐘錶" class="watch"/>
<img src="img/m.png" alt="秒針" class="seconds">
</div>
</body>
</html>
示例6（組合動畫）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組合動畫</title>
<style type="text/css">
.demo,.img,.border,.mask{
width: 300px;
height: 300px;
}
.demo{
display: block;
position: relative;
margin:50px auto;
}
.img{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
border-radius: 50%;
}
.border{
position: absolute;
border: 10px solid #072256;
border-left-color:#E07514;
border-top-color:#E07514;
top: 0;
left: 0;
border-radius: 50%;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.mask{
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
color:rgba(255,255,255,0);
}
.demo:hover .mask{
background-color:rgba(0,0,0,0.5); /*蒙層透明度50%*/
color:rgba(255,255,255,1);
}
.demo:hover .border{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.info{
position: absolute;
width: 100%;
top: 50%;
left: 0;
text-align: center;
-webkit-transform:translateY(-50%);
}
</style>
</head>
<body>
<a href="#" class="demo">
<div class="img" style="background-image:url(img/back.jpg)"></div>
<div class="mask">
<div class="info">
<h3>美好的一天</h3>
<p>從這裏出發</p>
</div>
</div>
<div class="border"></div>
</a>
</body>
</html>