:before :after伪类实现鼠标悬浮动画
Posted 泰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了:before :after伪类实现鼠标悬浮动画相关的知识,希望对你有一定的参考价值。
<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伪类实现鼠标悬浮动画的主要内容,如果未能解决你的问题,请参考以下文章