* { 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; }
利用css3 做出的一些小动画。新特性,初学者可以看看