css3+伪元素实现鼠标移入时下划线向两边展开的效果


Posted in HTML / CSS onApril 25, 2017

先来看看效果图:

css3+伪元素实现鼠标移入时下划线向两边展开的效果css3+伪元素实现鼠标移入时下划线向两边展开的效果css3+伪元素实现鼠标移入时下划线向两边展开的效果

实现思路:

将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的。

实现方法:

1、首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位。

html代码

<div id="underline"></div>

css样式

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2、设置:before和:after两个伪元素,将其设置为背景色为蓝色(也就是下划线的颜色),利用绝对定位将两个元素固定到#underline底部中间位置。

css样式

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以,但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果,0.8秒完成*/

}

3、设置鼠标移入效果。

css样式

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余,主要是为了对照*/

    width: 50%;

}

优化

1、虽然目的达到了,但是用了两个伪元素,一个向左延伸50%,一个向右延伸50%,只用一个延伸至100%能否达到目的呢?
 

css代码

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时,宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2、只定义:after伪元素,将其从距离左边50%宽度为0的同时改变成距离左边0%宽度为100%就可以实现,从而达到了精简代码的目的,而且还多余出了:before方便进行别的操作。

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标移入下划线展开</title>

    <style type="text/css">

        #underline{

            width: 200px;

            height: 50px;

            background: #ddd;

            margin: 20px;

            position: relative;

        }

        #underline:after{

            content: "";

            width: 0;

            height: 5px;

            background: blue;

            position: absolute;

            top: 100%;

            left: 50%;

            transition: all .8s;

        }

        #underline:hover:after{

            left: 0%;

            width: 100%;

        }

    </style>

</head>

<body>

    <div id="underline"></div>

</body>

</html>

总结

关于才疏学浅,以后遇到了再补充。好了以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 #HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 #HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 #HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 #HTML / CSS
You might like
PHP页面间传递参数实例代码
2008/06/05 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php浏览历史记录的方法
2015/03/10 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
JavaScript版代码高亮
2006/06/26 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python中Numpy mat的使用详解
2019/05/24 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
"序列点" 是什么
2016/07/29 面试题
品恩科技软件测试面试题
2014/10/26 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
百日安全生产活动总结
2014/07/05 职场文书