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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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中autoload的用法总结
2013/11/08 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
jQuery的三种$()
2009/12/30 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JavaScript中EventLoop介绍
2018/01/22 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
深入浅析python定时杀进程
2016/06/06 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python创建自己的加密货币的示例
2021/03/01 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
运动会领导邀请函
2014/02/05 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
停车场管理制度范本
2015/08/05 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
PHP实现两种排课方式
2021/06/26 PHP