|
figure{ width:33.33%; height:350px; position:relative; overflow:hidden; float:left;}figcaption{ width:100%; height:100%; color:#FFFCE7; position:absolute; top:0; left:0;}figurep{ margin-top:10px; line-height:30px; width:150px; text-align:center;}figureh2,p,img,div,img{ transition:all0.5s;}figureimg{ opacity:0.8;}.test1figcaption{ padding:20px;}.test1figcaptionp{ transform:translateX(-250px); background:rgba(0,0,0,0.5); text-align:center; margin-top:10%; margin-left:10%;}.test1figcaptionp:nth-of-type(2){ transition-delay:0.05s;}.test1figcaptionp:nth-of-type(3){ transition-delay:0.1s;}.test1:hoverfigcaptionp{ transform:translateX(0px); }.test1:hoverimg{ transform:translateX(-50px); opacity:0.5;}.test1{ background:#2f0000;}.test2figcaptionh2,p{ margin-top:10%; margin-left:10%;}.test2figcaption>div{ width:80%; height:80%; border:1pxsolid#FFF; position:absolute; top:10%; left:10%; transform:translate(-150px,-350px)rotate(0deg);}.test2figcaptionp{ transform:translateX(-350px)rotate(0deg);}.test2:hoverfigcaptiondiv{ transform:translate(0px,0px)rotate(180deg);}.test2:hoverfigcaptionp{ transform:translate(0px,0px)rotate(360deg);}.test2:hoverimg{ transform:translateX(-100px); opacity:0.5;}.test3figcaption{ top:15%; left:20%;}.test3figcaptionp{ background:rgba(255,255,255,0.3); transform:skew(90deg);}.test3:hoverfigcaptionp{ transform:skew(0deg);}.test3:hoverfigcaptionp:nth-of-type(1){ transition-delay:0.1s; transform:skew(0deg);}.test3:hoverfigcaptionp:nth-of-type(2){ transition-delay:0.2s; transform:skew(0deg);}.test3:hoverfigcaptionp:nth-of-type(3){ transition-delay:0.3s; transform:skew(0deg);}.test4figcaption{ width:100%; height:100%;}.test4figcaption>div{ width:80%; height:80%; border:1pxsolid#FFF; position:absolute; top:10%; left:10%; transform:scale(1.3,1.3); opacity:0;}.test4figcaptionh2{ margin-top:15%; margin-left:15%;}.test4figcaptionp{ margin-left:15%; margin-top:10px; transform:translateY(40px); opacity:0;}.test4img{ transform:scale(1,1);}.test4:hoverimg{ transform:scale(1.2,1.2); opacity:0.5;}.test4:hoverfigcaptiondiv{ transform:scale(1,1); opacity:1;}.test4:hoverfigcaptionp{ transform:translateY(0px); opacity:1;}.test5figcaption{ width:100%;}.test5figcaptionh2,p{ margin-top:20%; margin-left:30%;}.test5figcaptionh2{ opacity:0; transform:translateY(-50px);}.test5figcaptionp{ opacity:0; transform:translateY(50px);}.test5:hoverfigcaptionh2{ opacity:1; transform:translateY(0px);}.test5:hoverfigcaptionp{ opacity:1; transform:translateY(0px);}.test6figcaptionh2{ margin-top:50%; margin-left:20%; opacity:0;}.test6figcaptiondiv{ background:rgba(0,0,0,0.8); width:120%; height:100%; transform-origin:00; position:absolute; bottom:-350px;}.test6:hoverfigcaptiondiv{ transform:rotate(-15deg);}.test6:hoverfigcaptionh2{ transform:translateY(-100px); opacity:1;} |
天盟APP下载
