* { padding:0; margin:0; } ul,li,ol { list-style:none; } .animate ul li { width:400px; height:300px; float:left; margin:10px; cursor:pointer; position:relative; overflow:hidden; } .animate ul li img { width:100%; height:100%; transition:all 0.4s ease; } .text,.text4 { width:100%; height:100%; text-align:center; line-height:300px; position:absolute; background:rgba(0,0,0,0.2); transition:all 0.4s ease; color:#fff; font-size:20px; } .text1 { top:300px; left:0; } .text2 { top:300px; left:400px; } .text3 { top:-300px; left:0; } .animate ul .box:hover .text { top:0; left:0; } .text4 { top:0; left:0; opacity:0; } .text4 p { width:100%; height:100%; transition:all 0.4s ease; } .animate ul .imgSc:hover img { transform:scale(1.2); } .box4:hover .text4 { background:rgba(0,0,0,0.2); opacity:1; } .box4:hover .text4 p { border:2px solid #000000; transform:scale(0.8); background:rgba(255,255,255,0.1); } .left,.right { position:absolute; top:0; width:50%; height:100%; background:rgba(0,0,0,0.2); transition:all 0.3s ease; } .box5 p { width:100%; color:#fff; height:20px; position:absolute; top:-20px; left:0; transition:all 0.3s ease; text-align:center; } .box5:hover p { top:140px; } .left { left:-50%; } .right { right:-50%; } li:hover .left { left:0; } li:hover .right { right:0; } .box7 div { position:absolute; top:0; left:0; width:99%; height:99%; transition:all 0.5s; transform:rotateX(90deg) rotateY(90deg); background:rgba(0,0,0,.2); color:#fff; text-align:center; line-height:300px; } .box7:hover div { transform:rotateX(0deg); } .box8 { transform-style:preserve-3d; perspective:500px; } .box8:hover .img2 { transform:rotateY(180deg); opacity:0; } .img1 { opacity:0; } .box8:hover .img1 { transform:rotateY(0deg); opacity:1; } img { position:absolute; top:0; left:0; } .img1 { transform:rotateY(180deg); } .box6 p { width:100%; position:absolute; top:0; left:0; color:#fff; text-align:center; transition:all 0.5s; transform:translateY(-20px); } .box6:hover p { transform:translateY(140px); } .ani1 { position:absolute; top:0; left:0; width:500px; height:300px; background:rgba(0,0,0,0.2); transform:rotate(37deg) translate(0px,240px); transform-origin:left top; transition:all 0.5s; } .ani2 { position:absolute; top:0; width:500px; height:300px; background:rgba(0,0,0,0.2); transform:rotate(37deg) translate(100px,-240px); transform-origin:right top; transition:all 0.5s; } .box6:hover .ani1 { transform:rotate(37deg) translate(0px,0px); } .box6:hover .ani2 { transform:rotate(37deg) translate(100px,0px); }
更新时间:2020-08-13 23:15:54
纯css划上图片显示文字