.case { margin:60px; padding:20px; font-size:26px; position:relative; overflow:hidden; display:inline-block; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; } .case:before { content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:#d3817a; opacity:0; transform:translateX(-100%); transition:transform 0.5s ease-in-out 0s; z-index:-1; } .case:after { content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:#d3817a; opacity:1; transform:translateX(100%); transition:transform 0.5s ease-in-out 0s; z-index:-1; } .case:hover { color:#fff; } .case:hover:before { opacity:1; transform:translateX(0px); } .case:hover:after { opacity:0; transform:translateX(0%); }
更新时间:2021-03-31 11:43:41