:before :after偽類實現鼠標懸浮動畫
阿新 • • 發佈:2018-03-15
idt -type 偽類 png 實現 class 使用 isp display
<div id="meizu1"> <li>dede</li> </div>
div#meizu1 li:before{ content: url(11.png); position: relative; display: block; transition: transform 1s; } div#meizu1 li:after{ content: url(12.png); position: relative; top: -442px; display: block; transition: transform 1s; } div#meizu1 li:hover:before{ transform: translate(-10%,0); } div#meizu1 li:hover:after{ transform: translate(10%,0); } li{ list-style-type: none; width: 500px; margin: 20px auto; }
需要註意的是,使用偽類選擇器:.class:hover:before; .class:hover:after ; 而不是 .class:before:hover .class:after:hover 這樣的選擇器是無效的。(過渡動畫需要對瀏覽器進行兼容性適配的,這裏僅僅是為了演示。)
實現效果:
:before :after偽類實現鼠標懸浮動畫