hello boy
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur, placeat.
body { padding:0; margin:0; font-family:sans-serif; background-color:thistle; } #box { display:flex; justify-content:center; align-items:center; height:100vh; } .content { position:absolute; width:60%; height:200px; border:5px solid red; opacity:0; text-align:center; transition:.5s; overflow:hidden; } .content.active { opacity:1; } .content:first-child { background-color:black; color:white; } .content:nth-child(2) { background-color:white; color:black; } .content:last-child { background-color:blanchedalmond; color:cadetblue; } h1 { position:relative; width:100%; height:50px; transition:.5s ease-out .5s; top:-60px; } .content.active h1 { top:0px; } p { position:relative; width:100%; height:50px; left:-300px; transition:1s ease-out .5s; } @media (min-width:1000px) { .content { width:1000px; height:300px; font-size:1.5rem; } h1 { width:1000px; height:100px; top:-100px; } p { width:1000px; height:100px; left:-1000px; } }.content.active p { left:0; } .btn { cursor:pointer; transition:.5s; } #left:hover { border-right:40px solid white; transition:.3s; } #right:hover { border-left:40px solid white; transition:.3s; } #left { position:absolute; width:0; height:0; border:40px solid transparent; border-right:40px solid black; left:0; top:50%; margin-top:-20px; transition:1s; } #right { position:absolute; width:0; height:0; border:40px solid transparent; border-left:40px solid black; right:0; top:50%; margin-top:-20px; transition:1s; } @media(max-width:600px) { #left { border-right:20px solid black; } #right { border-left:20px solid black; } #left:hover { border-right:20px solid white; } #right:hover { border-left:20px solid white; } }
更新时间:2020-02-17 16:56:42