在学习HTML的时候，想让自己的网站，网页变的漂亮，美观。我们都会去想通过js（JavaScript）或者jq（jQuery）来美化自己的网站，在我的意识里，美化网站除了通过网站的布局，最主要的就是实现动态效果：
接下来我将要实现的是通过style（css）下的transition；transition-delay;transform：translate以及：hover的实现的动态效果：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<title>无标题文档</title>
<style>
@charset "utf-8";
/* CSS Document */
@media screen and (min-width:1001px)
{
figure{
width:33.33%;
}
@media screen and (max-width:600px)
{
figure{
width:100%;
}
}
@media screen and(min-width:601px) and (max-width:1000px)
{
figure{
width:50%;
}
}
*{
margin:0;
padding:0;
}
figure figcaption p,img,div{
transition:all 0.4s;
}
figure{
position:relative;
width:33.33%;
overflow:hidden;
height:350px;
float:left;
}
figcaption{
position:absolute;
top:0;
left:0;
color:#FFF;
font-family:微软雅黑;
}
.text1{
background:#2F0000;
}
figure img{
opacity:0.8;
}
.text1 figcaption p{
background:#FFF;
color:#333;
margin:3px;
text-align:center;
transform:translate(-120px,0)
}
.text1 figcaption p:nth-of-type(1){
transition-delay:0.1s;
}
.text1 figcaption p:nth-of-type(2){
transition-delay:0.2s;
}
.text1 figcaption p:nth-of-type(3){
transition-delay:0.3s;
}
.text1 figcaption p:nth-of-type(4){
transition-delay:0.3s;
}
.text1 figcaption{
padding:20px;
}
.text1:hover figcaption p{
transform:translate(0,0)
}
.text1:hover img{
transition:translate(-50px,0px);
opacity:0.5;
}
.text2{
background:green;
}
.text2 figcaption {
width:100%;
height:100%;
}
.text2 figcaption h2{
margin-top:15%;
margin-left:15%;
}
.text2 figcaption p{
margin-top:15%;
margin-left:15%;
transform:translate(0,40px);
opacity:0;
}
.text2 figcaption div{
border:2px solid #fff;
width:80%;
height:80%;
position:absolute;
top:10%;
left:10%;
transform:translate(0,-350px) rotate(0deg);
}
.text2:hover figcaption div{
transform:translate(0,0px) rotate(360deg);
}
.text2:hover img{
opacity:0.8;
}
.text2:hover figcaption p{
transform :translate(0,0);
opacity:1;
}
</style>
</head>
<body>
<figure class="text1">
<img src="img/background.jpg"/>
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure class="text2">
<img src="img/background.jpg"/>
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<div></div>
</figcaption>
</figure>
<figure>
<img src="img/1.png"/>
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure>
<img src="img/1.png"/>
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
</body>
</html>
