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背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
积极向上的团队口号
2014/06/06 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python