酷炫的动画效果往往更能吸引眼球,下面我将分享纯CSS中,hover的时候出现下划线动态飞入的技巧。
1.下划线从左侧飞入:
div::before{
content:"";
width:50px;
position:absolute;
display:inline-block;
border-bottom:1px solid red;
bottom:0;
left:-100px;}
div:hover::before{
left:0;
transition:all linear 1s;}
步骤:首先是设置div为相对位置(relative,主要用于before子元素的定位。因为绝对位置的定位要求其父元素的position属性值不能为static,而relative优点在于能保留原来的位置,故选用relative)。
其次通过伪元素before创建div元素下的第一个位置的子元素,设置其为绝对位置(absolute),同时修改其显示属性为行内块(display:inline-block;)。
第三是设置伪元素before的位置,将其定位到div父元素的前面,同时设置div隐藏区域以外的区域(overflow:hidden;)
第四是设置当div被hover时,伪元素before回到div父元素的最左侧,并设置持续时间。
这样就完成了下划线在hover时从左侧并入。如果要从右侧出现,则只需把相应位置进行更新即可。
2.下划线从中间向两边伸出
div::before{
content:"";
width:0px;
position:absolute;
display:inline-block;
border-bottom:0px solid red;
bottom:0;
left:50%;
transition:all linear 1s;}
div:hover::before{
left:0;
width:50px;
border-bottom-width:2px;
}
下划线从中间向两边伸出大部分与下划线从两边伸出相似,不同之处在于:
首先设置子元素位置在中间,即left:50%,同时width:0px;
其次hover时设置子元素位置右中间变到最左侧(即left:0;);同时设置子元素的宽度(即width:50px)。
这样就能实现两个过程:一是下划线从中间向左侧整体移动,二是下划线向右侧延伸。