## 简单的图片动效制作
效果及源码如下:
源码:
1.HTML部分
<!--第一个-->
<div class="container container1 ">
<h3>
<span>NICE</span> LILY
</h3>
<p>
LILY LIKES TO PLAY WITH CRAYONS AND PENCILS
</p>
</div>
<!--第二个-->
<div class="container container2">
<div id="box">
<h3>
<span>CHARMING</span>
ROXY
</h3>
<p>
ROXY WAS MY BEST FRIEND.SHE'D CROSS ANY <br/>
BORDER FOR ME.
</p>
</div>
</div>
<!--第三个-->
<div class="container container3">
<div class="bg">
<h3>
<span>FREE</span>
SARAH
</h3>
<div class="hr"></div>
<p>
SAEAH LIKES TO WATCH CLOUDS.SHE'S QUITE DEPRESSED.
</p>
</div>
</div>
<!--第四个-->
<div class="container container4">
<div class="bg">
<h3>
<span>SILLY</span>
CHICO
</h3>
<p>
CHICO'S MAIN FEAR WAS <br/>
MISSING THE MORNING BUS.
</p>
<div class="box">
</div>
</div>
</div>
<!--第五个-->
<div class="container container5">
<div class="bg">
<p>
MILO WENT TO THE WOODS. <br/>
HE TOOK A FUN RIDE AND <br/>
NEVER CAME BACK.
</p>
<h3>
<span>FAITHFUL</span>
MILO
</h3>
</div>
</div>
<!--第六个-->
<div class="container container6">
<div class="bg">
<div class="box_big">
<h3>
<span>CRAZY</span>
LAYLA
</h3>
<p>
When Layla appears she brings ao eternal summer <br/>
along
</p>
</div>
<div class="box_small"></div>
</div>
</div>
<!--第七个-->
<div class="container container7">
<div class="bg">
<h3>
<span>WILD</span>
ROMEO
</h3>
<p>
ROMEO NEVER KNOWS WHAT HE WANTS. HE SEEMED TO BE <br/>
VERY CROSS ABOUT SOMETHING.
</p>
</div>
<div class="hr hr1"></div>
<div class="hr hr2"></div>
</div>
<!--第八个-->
<div class="container container8">
<div class="bg">
<h3>
<span>HOLY</span>
SADIE
</h3>
<p>
SADIE NEVER TOOK HER EYES OFF ME. <br/>
SHE HAD A DARK SOUL.
</p>
</div>
</div>
<!--第九个-->
<div class="container container9">
<div class="bg">
<h3>
<span>DREAMY</span>
HONEY
<span id="now">NOW</span>
</h3>
<div id="down_div"></div>
</div>
</div>
2.CSS样式部分
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
width: 400px;
height: 400px;
/*border: 1px solid black;*/
float: left;
cursor: pointer;
}
.bg {
width: 400px;
height: 399px;
border-top: 1px solid transparent;
}
.container p{
color: white;
}
.container h3 {
color: white;
font-size: 24px;
}
/*第一个*/
.container1 {
background-image: url("img/lanrenzhijia1.jpg") ;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all .5s linear;
}
.container1 h3 {
margin-top: 300px;
margin-left: 50px;
transition: all .3s linear;
}
.container1 p {
color: #999999;
font-size: 12px;
margin-left: 50px ;
opacity: 0;
transition: all .3s linear;
}
.container span {
font-weight: 400;
}
.container1:hover {
background-position: left 1px;
}
.container1:hover h3{
margin-top: 270px;
}
.container1:hover p {
opacity: 1;
}
/*第二个*/
.container2 {
background: url("img/lanrenzhijia3.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
}
.container2 #box {
width: 300px;
height: 300px;
border: 0 solid white;
margin: 50px 0;
transition: all .3s linear;
float: left;
}
.container2 #box h3 {
margin:80px 0 10px 10px ;
/*position: absolute;*/
top: 80px;
left: 10px;
}
.container2 #box p {
font-size: 13px;
color: white;
opacity: 0;
transition: all .3s linear;
}
.container2:hover {
background-position:left center;
}
.container2:hover #box {
margin-left:55px;
border: 1px solid white;
}
.container2:hover>#box p {
opacity: 1;
}
/*第三个*/
.container3 {
background: url("img/lanrenzhijia13.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
}
.container3 .bg {
background-color: rgba(134, 204, 172, 0);
overflow: hidden;
transition: background-color .2s linear;
}
.container3 h3 {
margin: 50px 0 10px 10px;
}
.container3 p {
color: white;
font-size: 12px;
margin-left: 410px;
transition: margin-left .2s linear;
white-space: nowrap;
}
.container3 .hr {
border-top: 3px solid white;
margin: 0 10px ;
width: 0;
transition: width .3s linear;
}
.container3:hover {
background-position: left center;
}
.container3 .bg:hover {
background-color: rgba(134, 204, 172, .3);
}
.container3 .bg:hover>.hr {
width: 380px;
}
.container3 .bg:hover>p {
margin-left: 10px;
}
/*第四个*/
.container4 {
background: url("img/lanrenzhijia15.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
}
.container4 .bg {
background-color: rgba(114, 161, 178, 0);
transition: all .2s linear;
position: relative;
}
.container4 .bg .box {
width: 270px;
height: 270px;
border: 0 solid white;
margin: 10px auto;
padding: 50px 50px;
transition: all .2s linear;
}
.container4 .bg h3 {
position: absolute;
top: 125px;
left: 120px;
}
.container4 .bg p {
transition: all .2s linear;
text-align: center;
position: absolute;
top: 170px;
left: 80px;
/*font-size: 20px;*/
opacity: 0;
}
.container4:hover {
background-size: 157%;
}
.container4 .bg:hover {
background-color: rgba(114, 161, 178, 0.29);
}
.container4 .bg:hover .box {
width: 240px;
height: 240px;
margin-top: 30px;
border: 1px solid white;
}
.container4 .bg:hover p {
transform: scale(.7);
opacity: 1;
}
/*第五个*/
.container5 {
background: url("img/lanrenzhijia11.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
}
.container5 .bg {
background-color: rgba(136, 155, 137, 0);
position: relative;
transition: all .2s linear;
overflow: hidden;
}
.container5 .bg p {
font-size: 12px;
text-align: right;
width: 200px;
border-right: 1px solid white;
margin-top: 50px;
margin-left: -20px;
opacity: 0;
transition: all .2s linear;
}
.container5 .bg h3 {
position: absolute;
bottom: 20px;
right: 0;
}
.container5:hover .bg{
background-color: rgba(136, 155, 137, 0.4);
cursor: pointer;
}
.container5 .bg:hover p {
margin-left: 0;
opacity: 1;
}
/*第六个*/
.container6 {
background: url("img/lanrenzhijia4.jpg") no-repeat center;
background-size: cover;
}
.container6 .bg {
background-color: rgba(54, 81, 56, 0);
position: relative;
transition: all .2s linear;
}
.container6 .bg .box_big {
border-left: 1px solid white;
border-right: 1px solid white;
width: 300px;
height: 0;
position: absolute;
top: 50px;
left: 50px;
transition: height .2s linear;
}
.container6 .bg .box_small {
border-top: 1px solid white;
border-bottom: 1px solid white;
width: 0;
height: 260px;
position: absolute;
top: 70px;
left: 28px;
transition: width .2s linear;
}
.container6 .bg .box_big h3 {
text-align: center;
margin-top: 80px;
left: 60px;
position: absolute;
transition: all .3s linear;
}
.container6 .bg .box_big p {
font-size: 12px;
text-align: center;
/*margin-top: 15px;*/
position: absolute;
top: 125px;
left: 4px;
opacity: 0;
transition: all .3s linear;
}
.container6:hover{
background-size: 161%;
}
.container6:hover .bg {
background-color: rgba(54, 81, 56, 0.43);
}
.container6 .bg:hover>.box_big {
height: 300px;
}
.container6 .bg:hover>.box_small {
width: 345px;
}
.container6 .bg:hover h3{
margin-top:90px ;
}
.container6 .bg:hover p {
opacity: 1;
top: 120px;
}
/*第七个*/
.container7 {
background: url("img/lanrenzhijia5.jpg") no-repeat center;
background-size: cover ;
transition: all .3s linear;
position: relative;
}
.container7 .bg {
background-color: rgba(125, 132, 114, 0);
position: relative;
transition: all .3s linear;
}
.container7 .hr {
position: absolute;
border-bottom:1px solid white ;
width: 330px;
top: 195px;
left: 35px;
border-collapse: collapse;
transition: all .3s linear;
}
.container7 .bg h3 {
text-align: center;
margin-top: 150px;
transition: all .3s linear;
}
.container7 .bg p {
text-align: center;
margin-top: 50px;
font-size: 12px;
}
.container7:hover {
cursor: pointer;
}
.container7 .bg:hover {
background-color: rgba(125, 132, 114, 0.56);
}
.container7:hover .hr1 {
transform: rotateZ(45deg);
}
.container7:hover .hr2 {
transform: rotateZ(-45deg);
}
.container7 .bg:hover h3{
margin-top: 140px;
}
/*第八个*/
.container8 {
background: url("img/lanrenzhijia2.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
position: relative;
}
.container8 .bg {
background-color: rgba(121, 126, 136, 0);
transition: all .2s linear;
}
.container8 .bg h3 {
color: #484C61;
text-align: center;
margin-top: 190px;
transition: all .2s linear;
}
.container8 .bg p {
font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
left: 100px;
opacity: 0;
transition: all .2s linear;
}
.container8:hover .bg {
background-color: rgba(121, 126, 136, 0.58);
}
.container8 .bg:hover h3 {
margin-top: 160px;
color: white;
}
.container8 .bg:hover p {
opacity: 1;
bottom: 10px;
}
/*第九个*/
.container9 {
background: url("img/lanrenzhijia7.jpg") no-repeat center;
background-size: cover;
transition: all .3s linear;
}
.container9 .bg {
position: relative;
overflow: hidden;
background-color: rgba(166, 155, 155, 0);
transition: all .2s linear;
}
.container9 #down_div {
width: 400px;
height: 20px;
background-color: white;
position: absolute;
bottom: -20px;
transition: all .2s linear;
}
.container9 h3 {
margin-top: 335px;
transition: all .2s linear;
}
.container9 h3 #now {
opacity: 0;
transition: all .2s linear;
}
.container9:hover .bg {
background-color: rgba(166, 155, 155, 0.5);
}
.container9 .bg:hover h3 {
margin-top: 345px;
}
.container9 .bg:hover h3>#now {
opacity: 1;
}
.container9 .bg:hover #down_div {
bottom: 0;
}