1、最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了:

2、在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一张图片的动画效果,鼠标一旦离开了图层,就会回到原始位置。

也就是说,要实现这样的效果,需要鼠标放在某一个块状区域,同时触发两个选择器,这样的效果如果使用css实现的话,使用伪类:before, :after实现。

3、直接上代码

HTML

<div id="meizu1">
<li>dede</li>
</div>

CSS

            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  这样的选择器是无效的。(过渡动画需要对浏览器进行兼容性适配的,这里仅仅是为了演示。)

实现的效果:

参考的文档  论CSS ::before 和 ::after

利用 :before :after伪类实现鼠标悬浮动画效果的更多相关文章

  1. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  3. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  4. CSS3悬浮动画效果

    利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...

  5. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  6. 利用border和伪类画出三角形 ps:好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  7. CSS(五):背景、列表、超链接伪类、鼠标形状控制属性

    一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...

  8. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  9. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

随机推荐

  1. 工厂设计模式 Factory

    Factory 主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类. 例如:汽车销售商场 该模式将创建对象的过程放在了一个静态方法中来实现.在实际编程中,如果需要大量的创建对象,该模 ...

  2. 使用curl,libcurl访问Https

    编译curl,libcurl 下载curl源码(git clone https://github.com/curl/curl),在目录curl\winbuild\BUILD.WINDOWS.txt文件 ...

  3. Oracle之plsql快速入门

    打开系统输出 set serveroutput on; 只需要打开一次**书写格式 以斜杠/号 结束(基本结构) --declare --语句后面必须以;号结束 declare --用来区分变量名和表 ...

  4. centos 6.5系统判断软件是否安装,如果没安装,则直接使用yum安装,并添加启动项

    function install_software(){ software=$1 s=`rpm -qa|grep ${software}` result=$(echo ${s}|grep ${soft ...

  5. 【Data Visual】一文搞懂matplotlib数据可视化

    一文搞懂matplotlib数据可视化 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为 ...

  6. 封装游戏配表读取和存储(xml格式);支持行列存取,标题存取

    做服务器肯定会涉及到游戏配表,而读取游戏配表是一个必备技能; 之前一直都是采用TinyXml直接读,匹配字符串,每次加个表都是一大坨代码,看着也是心累; 因此利用了闲暇的时间封装了一个 xml配置表 ...

  7. TCP传输协议使用

    TCP传输协议,也称之为套接字连接,比较安全,三次握手!,必须确保对方计算机存在,才能连接,而且是长时间连接. 缺点是传输速度有点慢. 你用 socket 去连接 ServiceSocaket 服务器 ...

  8. Android - 读取文件存储的数据

    存取手机中的文件数据. 写入和读取的操作格式均为UTF-8. import java.io.File; import java.io.FileInputStream; import java.io.F ...

  9. 51nod_1490: 多重游戏(树上博弈)

    题目链接 该题实质上是一个树上博弈的问题.要定义四种状态--2先手必胜 1先手必败 3可输可赢 0不能控制 叶子结点为先手必胜态: 若某结点的所有儿子都是先手必败态,则该结点为先手必胜态: 若某结点的 ...

  10. jar包的一生

    经常会头疼于一个jar包是如何制作的,包括maven的打包方式,springboot的打jar包的原理,jar包稍稍有错误就会完全无法运行.在网上折腾了很久终于有些思路和步骤,在这里做个笔记 本文大纲 ...