<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin-top: 0;
text-align: center;
color: #414142;
background: rgb(246,241,232);
background-image: -moz-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
background-size: cover;
}
h1, em, #information {
display: block;
font-size: 25px;
font-weight: normal;
margin-top: 1em;
}
#container {
margin: 0 auto;
width: 1024px;
}
.wrapper {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover {
-webkit-transform: translateZ(-50px) rotateX(90deg);
-moz-transform: translateZ(-50px) rotateX(90deg);
-ms-transform: translateZ(-50px) rotateX(90deg);
-o-transform: translateZ(-50px) rotateX(90deg);
transform: translateZ(-50px) rotateX(90deg);
}
.item img {
display: block;
position: absolute;
top:0;
border-radius: 20px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(-50px);
-moz-transform: translateZ(-50px);
-ms-transform: translateZ(-50px);
-o-transform: translateZ(-50px);
transform: translateZ(-50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 100px;
height: 100px;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 100px;
width: 290px;
text-align: left;
border-radius: 30px;
padding: 5px;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgb(236,241,244);
background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
strong {
color: #e9e11a;
display: block;
margin: .2em 0 .5em 0;
font-size: 16px;
font-family: "Oleo Script";
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 15px;
}
</style>
</head>
<body>
<div id="container">
<h1 style="color: #8B4513 ;font-size: 30px"><strong>薪传成员简介</strong></h1>
<div class="wrapper">
<div class="item">
<img src="css/头像1.jpg"/><strong>田孝文</strong>湖南凤凰人，土家族，男，吉首大学物理与机电工程学院电子信息科学与技术系讲师
<span class="information">
ksajdflajfjeriotjeritjerytkjopirejyoiyjhgd
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像8.jpg" />
<span class="information">
<strong>杨老师</strong>dkpfgfgfggdgadfsdfjgjoifdgjkdfgfdgdfgghfdhfghgf
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像2.jpg" />
<span class="information">
<strong>狄俊</strong>sjdfaljrertrtrggfdfsgdfgtyutuytyiuyiuiykhjkkhj
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像3.jpg" />
<span class="information">
<strong>陈建</strong>fdgdfgjfdiogrtgfggdsfgfdgrtoieutiu89ujteirtjertiretret
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像4.jpg" />
<span class="information">
<strong>李飞</strong>sdfjdsfdsffdfdfeijpiospfwoaibeijingtianmentiananmrns
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像5.jpg" />
<span class="information">
<strong>朱式业</strong>dfdfdfgfghhjiuryutryryryerytryrtytyrtyuyyujhgjh
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像6.jpg" />
<span class="information">
<strong>李海滨</strong>dkpfgfgfggdgadfsdfjgjoifdgjkdfg
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像7.jpg" />
<span class="information">
<strong>田桂英</strong>dkpfgfgfggdgadfsdfjgjoifdgjkdfggfdgdfg
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="css/头像9.gif" />
<span class="information">
<strong>向武胜</strong>dkpfgfgfggdgadfsdfjgjoifdgjkdfgsdgfgfdgfdgfg
</span>
</div>
</div>
</div>
</body>
</html>
Stardust1001