: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伪类实现鼠标悬浮动画的主要内容,如果未能解决你的问题,请参考以下文章

理解使用before,after伪类实现小三角形气泡框

使用javascript,jQuery实现修改before,after伪类的样式(转)

伪类before和after

认识:before和:after伪类

基础理解2:CSS3按钮动画

与样式组件一起使用的 Before 和 After 伪类