css3动画强调效果,css3动画效果(原创)

* {

padding:0;

margin:0;

}

.container {

width:1240px;

margin:0 auto;

box-shadow:0 0 5px #f00;

}

.container figure {

float:left;

width:33.3333%;

height:400px;

overflow:hidden;

position:relative;

}

.container figure img {

display:block;

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

}

.container figure figcaption {

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

}

.container figure figcaption h1 {

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

position:absolute;

bottom:200px;

left:20px;

color:#fff;

-webkit-transform:translate(-200px,0);

-moz-transform:translate(-200px,0);

-ms-transform:translate(-200px,0);

-o-transform:translate(-200px,0);

transform:translate(-200px,0);

}

.container figure figcaption p {

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

}

.container figure figcaption div {

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

}

.container figure figcaption span {

-webkit-transition:all 1s;

-moz-transition:all 1s;

-ms-transition:all 1s;

-o-transition:all 1s;

transition:all 1s;

}

.container figure:nth-child(1) figcaption p {

position:absolute;

bottom:60px;

left:20px;

color:#fff;

-webkit-transform:translate(0,80px);

-moz-transform:translate(0,80px);

-ms-transform:translate(0,80px);

-o-transform:translate(080px);

transform:translate(0,80px);

}

.container figure:nth-child(2) figcaption div {

position:absolute;

bottom:60px;

left:20px;

}

.container figure:nth-child(2) figcaption div p {

background-color:#fff;

color:#000;

margin-bottom:10px;

-webkit-transform:translateX(-250px);

-moz-transform:translateX(-250px);

-ms-transform:translateX(-250px);

-o-transform:translateX(-250px);

transform:translateX(-250px);

}

.container figure:nth-child(2) figcaption div p:nth-child(1) {

-webkit-transition-delay:0.1s;

-moz-transition-delay:0.1s;

-ms-transition-delay:0.1s;

-o-transition-delay:0.1s;

transition-delay:0.1s;

}

.container figure:nth-child(2) figcaption div p:nth-child(2) {

-webkit-transition-delay:0.3s;

-moz-transition-delay:0.3s;

-ms-transition-delay:0.3s;

-o-transition-delay:0.3s;

transition-delay:0.3s;

}

.container figure:nth-child(2) figcaption div p:nth-child(3) {

-webkit-transition-delay:0.5s;

-moz-transition-delay:0.5s;

-ms-transition-delay:0.5s;

-o-transition-delay:0.5s;

transition-delay:0.5s;

}

.container figure:nth-child(3) figcaption div {

width:100%;

height:60px;

line-height:30px;

text-indent:32px;

position:absolute;

top:340px;

left:0;

background-color:#fff;

color:#000;

-webkit-transform:translateY(65px);

-moz-transform:translateY(65px);

-ms-transform:translateY(65px);

-o-transform:translateY(65px);

transform:translateY(65px);

}

.container figure:nth-child(4) figcaption div {

width:800px;

height:800px;

background-color:#fff;

position:absolute;

left:0;

top:400px;

-webkit-transform-origin:left top;

-moz-transform-origin:left top;

-ms-transform-origin:left top;

-o-transform-origin:left top;

transform-origin:left top;

}

.container figure:nth-child(4) figcaption p {

position:absolute;

right:5%;

bottom:10%;

}

.container figure:nth-child(4) figcaption p span {

display:inline-block;

margin-left:50px;

-webkit-transform:translateY(65px);

-moz-transform:translateY(65px);

-ms-transform:translateY(65px);

-o-transform:translateY(65px);

transform:translateY(65px);

}

.container figure:nth-child(4) figcaption p span:nth-child(2) {

-webkit-transition-delay:0.2s;

-moz-transition-delay:0.2s;

-ms-transition-delay:0.2s;

-o-transition-delay:0.2s;

transition-delay:0.2s;

}

.container figure:nth-child(5) figcaption p {

position:absolute;

top:50%;

left:20%;

color:#fff;

-webkit-transform:translateY(40px);

-moz-transform:translateY(40px);

-ms-transform:translateY(40px);

-o-transform:translateY(40px);

transform:translateY(40px);

}

.container figure:nth-child(5) figcaption div {

border:1px solid #f66;

position:absolute;

top:10%;

right:10%;

bottom:10%;

left:10%;

-webkit-transform:rotate(-720deg) translateY(-600px);

-moz-transform:rotate(-720deg) translateY(-600px);

-ms-transform:rotate(-720deg) translateY(-600px);

-o-transform:rotate(-720deg) translateY(-600px);

transform:rotate(-720deg) translateY(-600px);

}

.container figure:nth-child(6) figcaption div {

position:absolute;

top:45%;

left:10%;

color:#fff;

}

.container figure:nth-child(6) figcaption div p {

-webkit-transform:skew(90deg);

-moz-transform:skew(90deg);

-ms-transform:skew(90deg);

-o-transform:skew(90deg);

transform:skew(90deg);

}

.container figure:nth-child(7) figcaption {

position:absolute;

top:15%;

right:15%;

bottom:15%;

left:15%;

border:2px solid red;

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2);

-ms-transform:scale(1.2);

-o-transform:scale(1.2);

transform:scale(1.2);

}

.container figure:nth-child(7) figcaption p {

position:absolute;

top:40%;

left:10%;

}

.container figure:nth-child(8) figcaption p {

position:absolute;

border:2px solid #fff;

}

.container figure:nth-child(8) figcaption p:nth-child(1) {

top:10%;

right:5%;

bottom:10%;

left:5%;

border-right-width:0;

border-left-width:0;

-webkit-transform:scaleX(0);

-moz-transform:scaleX(0);

-ms-transform:scaleX(0);

-o-transform:scaleX(0);

transform:scaleX(0);

}

.container figure:nth-child(8) figcaption p:nth-child(2) {

top:5%;

right:10%;

bottom:5%;

left:10%;

border-top-width:0;

border-bottom-width:0;

-webkit-transform:scaleY(0);

-moz-transform:scaleY(0);

-ms-transform:scaleY(0);

-o-transform:scaleY(0);

transform:scaleY(0);

}

.container figure:nth-child(8) figcaption span {

display:block;

position:absolute;

top:30%;

left:20%;

color:#fff;

opacity:0;

}

.container figure:hover img {

-webkit-transform:translate(-10px);

-moz-transform:translate(-10px);

-ms-transform:translate(-10px);

-o-transform:translate(-10px);

transform:translate(-10px);

opacity:0.5;

}

.container figure:hover figcaption h1 {

-webkit-transform:translate(0,0);

-moz-transform:translate(0,0);

-ms-transform:translate(0,0);

-o-transform:translate(0,0);

transform:translate(0,0);

}

.container figure:hover:nth-child(1) p {

-webkit-transform:translate(0,0);

-moz-transform:translate(0,0);

-ms-transform:translate(0,0);

-o-transform:translate(0,0);

transform:translate(0,0);

}

.container figure:hover:nth-child(2) div p {

-webkit-transform:translateX(0);

-moz-transform:translateX(0);

-ms-transform:translateX(0);

-o-transform:translateX(0);

transform:translateX(0);

}

.container figure:hover:nth-child(3) div {

-webkit-transform:translateY(0);

-moz-transform:translateY(0);

-ms-transform:translateY(0);

-o-transform:translateY(0);

transform:translateY(0);

}

.container figure:hover:nth-child(4) div {

-webkit-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

-ms-transform:rotate(-315deg);

-o-transform:rotate(-15deg);

transform:rotate(-15deg);

}

.container figure:hover:nth-child(4) p span {

-webkit-transform:translateY(0);

-moz-transform:translateY(0);

-ms-transform:translateY(0);

-o-transform:translateY(0);

transform:translateY(0);

}

.container figure:hover:nth-child(5) p {

-webkit-transform:translateY(0);

-moz-transform:translateY(0);

-ms-transform:translateY(0);

-o-transform:translateY(0);

transform:translateY(0);

}

.container figure:hover:nth-child(5) div {

-webkit-transform:rotate(0) translateY(0);

-moz-transform:rotate(0) translateY(0);

-ms-transform:rotate(0) translateY(0);

-o-transform:rotate(0) translateY(0);

transform:rotate(0) translateY(0);

}

.container figure:hover:nth-child(6) figcaption div p {

-webkit-transform:skew(0);

-moz-transform:skew(0);

-ms-transform:skew(0);

-o-transform:skew(0);

transform:skew(0);

}

.container figure:hover:nth-child(7) figcaption {

-webkit-transform:scale(1);

-moz-transform:scale(1);

-ms-transform:scale(1);

-o-transform:scale(1);

transform:scale(1);

}

.container figure:hover:nth-child(8) figcaption p {

-webkit-transform:scale(1);

-moz-transform:scale(1);

-ms-transform:scale(1);

-o-transform:scale(1);

transform:scale(1);

}

.container figure:hover:nth-child(8) figcaption span {

opacity:1;

}