代码：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="con con1">
<img src="1.jpg" class="img1">
<h2>第一文字</h2>
<p>下方文字闪出来</p>
</div>
<div class="con con2">
<img src="2.jpg">
<p class="p p1">第一先锋</p>
<p class="p p2">第二二先锋</p>
<p class="p p3">第三三三先锋</p>
</div>
<div class="con con3">
<img src="3.jpg">
<p>好好学习，天天向上好好学习，天天向上好
好学习，天天向上好好学习，天天向上好好
学习，天天向上好好学习，天天向上好好学
习，天天向上
</p>
</div>
<div class="con con4">
<img src="4.jpg">
<div class="con44">
<p>晨落梦公子</p>
</div>
</div>
<div class="con con5">
<img src="5.jpg">
<div class="box"></div>
</div>
<div class="con con6">
<img src="6.jpg">
<h2>旋转消失</h2>
<p>我只是内容不要看我</p>
</div>
<div class="con con7">
<img src="7.jpg">
<div class="box"></div>
</div>
<div class="con con8">
<img src="8.jpg">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
<div class="con con9">
<img src="9.jpg">
</div>
</body>
</html>
css:
* {
list-style: none;
padding:;
margin:;
}
/*+++++++++++++++++++++con1++++++++++++++++++++++++++*/
.con {
position: relative;
float: left;
width: 350px;
height: 300px;
overflow: hidden;
}
.con img {
width: 100%;
height: 100%;
position: absolute;
}
.con1 .img1 {
width: 120%;
margin-left: -30px;
left:;
opacity:;
-webkit-transition: all 1s ease;
}
.con1:hover .img1 {
left: 30px;
opacity: 0.6;
}
.con1 h2 {
color: #fff;
position: absolute;
top: 180px;
left: 5px;
-webkit-transition: all 1s ease;
}
.con1:hover h2 {
top: 220px;
}
.con1 p {
color: #fff;
font-size: 12px;
position: absolute;
top: 300px;
left: 5px;
-webkit-transition: all 1s ease;
}
.con1:hover p {
top: 260px;
}
/*++++++++++++++++++++con2+++++++++++++++++++++++*/
.con2 p {
font-size: 12px;
color: #000;
position: absolute;
background: #ffffff;
padding: 5px;
}
.con2 .p1 {
top: 150px;
left: -80px;
-webkit-transition: all 1s ease-in-out;
}
.con2 .p2 {
top: 180px;
left: -100px;
-webkit-transition: all 1s ease-in-out;
-webkit-transition-delay: 0.2s;
}
.con2 .p3 {
top: 210px;
left: -120px;
-webkit-transition: all 1s ease-in-out;
-webkit-transition-delay: 0.4s;
}
.con2:hover .p1,
.con2:hover .p2,
.con2:hover .p3 {
left: 20px;
}
/*+++++++++++++++++++con3++++++++++++++++++++++++*/
.con3 p {
background: #fff;
color: #000000;
position: absolute;
text-indent: 2em;
font-size: 12px;
top: 300px;
-webkit-transition: all 1s ease-in-out;
}
.con3:hover p {
top: 255px;
}
/*+++++++++++++++++con4++++++++++++++++++++++++++++*/
.con4 .con44 {
width: 200%;
height: 100%;
background: #fff;
font-size: 12px;
color: #000000;
position: absolute;
top: 300px;
-webkit-transition: all 1s ease-in-out;
}
.con4 .con44 p {
margin-left: 300px;
line-height: 150px;
-webkit-transition: all 1s ease-in-out;
}
.con4:hover .con44 {
-webkit-transform: rotate(-20deg);
-webkit-transform-origin: 0 300px;
}
.con4:hover p {
-webkit-transform: rotate(20deg);
}
/*+++++++++++++++con5+++++++++++++++++++++++*/
.con5 img {
width: 120%;
left: -40px;
-webkit-transition: all 1s ease-in-out;
}
.con5:hover img {
left:;
}
.con5 .box {
border: 2px solid #000000;
width: 250px;
height: 250px;
position: absolute;
top: 25px;
left: 50px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: -100px -100px;
-webkit-transition: all 1s ease-in-out;
}
.con5:hover .box {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 0 0;
}
/*++++++++++++++++++con6++++++++++++++*/
.con6 h2 {
position: absolute;
color: #000;
top: 100px;
left: 10px;
-webkit-transition: all 1s ease-in-out;
}
.con6 p {
font-size: 24px;
color: #000;
position: absolute;
top: 150px;
left: 10px;
-webkit-transition: all 1s ease-in-out;
}
.con6:hover h2, .con6:hover p {
-webkit-transform: skewX(90deg);
}
/*++++++++++++++++con7++++++++++++++++++++++++++*/
.con7 .box {
position: absolute;
border: 2px solid #fff;
width: 350px;
height: 300px;
-webkit-transition: all 1s ease-in-out ;
}
.con7 img {
width: 450px;
height: 400px;
left: -50px;
top: -50px;
-webkit-transition: all 1s ease-in-out;
}
.con7:hover img, .con7:hover .box {
opacity: 0.6;
-webkit-transform: scale(0.8);
}
/*+++++++++++++con8++++++++++++++++++++++++++*/
.con8 .top {
position: absolute;
top: 35px;
left: 25px;
width: 300px;
height: 1px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .bottom {
position: absolute;
top: 265px;
left: 25px;
width: 300px;
height: 1px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .left {
position: absolute;
top: 25px;
left: 35px;
width: 1px;
height: 250px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .right {
position: absolute;
top: 25px;
left: 315px;
width: 1px;
background: black;
height: 250px;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8:hover .right,
.con8:hover .top,
.con8:hover .bottom,
.con8:hover .left {
-webkit-transform: scale(1);
}
/*++++++++++++++con9++++++++++++++++++++++*/
.con9 {
-webkit-transition: all 1s ease-in-out;
}
.con9:hover {
opacity: 0.5;
}
这里记录一下鄙人对于animation和transition不同之处的理解（待补充。）
animation
可以实现永远循环的动画
transition
可以实现hover鼠标移除移入的动画
一些注意点：（带补充。）
1，transform的行使对象应该是块级元素
2，写hover动画的时候，默然对象状态要有和hover状态中与之对应的属性，例子：如果hover里面有left:30px,对应的原始状态里面也应该有left:0;
3，初始状态中有rotate(90deg),再在hover里面写rotate(0deg)，hover后目标元素应该是保持其应有的状态（这里指角度），而不是其应有状态在旋转-90度，移动，缩放等同理
4，动画有时候会设置旋转点，而这个设置应该在本身样式里面设置，而不是在hover里面设置。