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教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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 cookis创建实现代码
2009/03/16 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
子页向父页传值示例
2013/11/27 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python单链表的简单实现方法
2014/09/23 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
治安消防安全责任书
2014/07/23 职场文书
表扬稿范文
2015/01/17 职场文书
2015年导购员工作总结
2015/04/25 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
python中if和elif的区别介绍
2021/11/07 Python