* { margin:0; padding:0; } body { background-color:pink; } ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-45%); } li { list-style:none; float:left; margin:0 20px; color:darkgray; transition:all .8s; position:relative; } li:hover { color:#fff; cursor:pointer; transform:rotate(5deg); } li:after,li:before { width:0px; height:0px; content:" "; position:absolute; left:50%; transform:translate(-50%); transition:all .8s; transform-origin:0; } li:after { top:-6px; transform:rotate(-50deg); } li:before { top:26px; transform:rotate(135deg); } li:hover:after,li:hover:before { width:20px; height:1px; background-color:#fff; }
更新时间:2022-12-01 10:16:27
伪类元素添加hover效果