<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>从前有座山</title>
<style>
.AA{width: 200px;
/*长款*/
height: 200px;
background-color: blue;
/*背景颜色*/
border: 5px solid yellow;
/*边框宽度 实线 颜色*/
margin: 50px 20px 50px 20px;
/*外边界四周*/
font-size: 150px;
/*字体大小*/
overflow: scroll;}
/*超出部分出来下拉线*/
.BB{width: 200px;
height: 200px;
background-color: yellow;
border: 5px solid black;
margin: 50px 20px 50px 20px;}
.BB:hover{cursor: pointer;
/*特殊效果*/
font-size: 60px;
border-radius: 50px;
/*圆角效果*/
transition: 5s;
/*渐变*/
text-shadow: 10px 10px 10px red;
/*阴影效果*/
transform: skew(360deg,);}
/*旋转*/
.CC{width: 200px;height: 200px;
background-image: url(img/123.jpg);
/*引入图片*/
margin: 50px 20px 50px 20px;
border: 5px solid yellow}
.CC:hover{cursor: pointer;
transform:translateY(-300px);
/*移动*/
transition: 3s;}
</style>
</head>
<body>
<div class="AA">从前有座山.</div>
<div class="BB">山上有座庙.</div>
<div class="CC"></div>
</body>
</html>
原文：http://www.cnblogs.com/buzhiheyan/p/7518545.html