将其从距离左边50%宽度为0,改变成距离左边0%宽度为100%就可以实现
html
<a>under test</a>
css
a {
position: relative;
}
a:after {
content: "";
width:0;
height:5px;
background:blue;
position:absolute;
top:100%;
left:50%;
transition:all.8s;
}
a:hover:after {
left:0%;
width:100%;
}
将其从距离左边50%宽度为0,改变成距离左边0%宽度为100%就可以实现
一、思路： 将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。 二、实现：...
当鼠标移入图片的时候，阴影层从左侧慢慢划过来。主要应用了css3的动画效果和定位
效果 ：鼠标移入：0%-->100%; 鼠标移出：100%-->0%;
2020.06.10记，使用 CSS3 动画特效制作卡片鼠标移入有悬浮效果时遇到的文字抖动掉帧问题，如下所示： 一...
CSS样式实例 /公共样式/div,ul,li,a{margin:0px;...
实现样式： 1、鼠标移入后，鼠标样式图标变为“锤子”。 2、用户砸金蛋，锤子简单的扬起效果。 3、砸碎金蛋，显示内...
1、如何实现图片放大缩小效果：（1）鼠标移入图片时，图片尺寸放大，并将图片置顶；（2）鼠标移除图片时，图片恢复成原...
利用css3实现了日食效果。 代码实例如下:
本文标题：利用css3实现鼠标移入下划线向两边展开效果
本文链接：https://www.haomeiwen.com/subject/bconhxtx.html
网友评论