css3小动画：鼠标hover后text-decoration的动画

韩冰发布于2019-08-01 18:39 / 3186人阅读

摘要：实现效果具体实现利用或者伪元素实现。代码无法通过地址访问解决方案代码

实现效果

具体实现

利用css3 ::after或者::before伪元素实现。
html代码


      webpack无法通过 IP 地址访问 localhost 解决方案

css代码

.abstract-title {
    line-height: 2.5rem;
    color: #787878;
    padding-bottom: 0.5rem;
    position: relative;
}

.abstract-title span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #aaa;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.abstract-title span:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1)
}

GPU云服务器云服务器 css3动画高性能css3动画小动画 html的动画特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51925.html

CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

摘要：规定动画的时长。注意子菜单要用隐藏，在显示的时候再设置。如果不加，实际上子菜单，以及子菜单下面的一直在页面上，如果鼠标移上去子菜单，以及子菜单下面的。 1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 评论0 收藏0
CSS3实现扇形动画菜单特效

摘要：实现扇形动画菜单特效效果图代码如下，复制即可使用实现扇形动画菜单特效 CSS3实现扇形动画菜单特效效果图：代码如下，复制即可使用： DOCTYPE html> CSS3实现扇形动画菜单特效 *{padding: 0; margin: 0;} body{backg...

terasum 2019-04-23 13:34 评论0 收藏0
面试官: css3动画了解吗? 我: .......

摘要：过渡允许的属性值在一定的时间区间内平滑地过渡。需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。需要事件触发，所以没法在网页加载时自动发生。是一次性的，不能重复发生，除非一再触发。 transition(过渡) transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
面试官: css3动画了解吗? 我: .......

摘要：过渡允许的属性值在一定的时间区间内平滑地过渡。需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。需要事件触发，所以没法在网页加载时自动发生。是一次性的，不能重复发生，除非一再触发。 transition(过渡) transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...

weakish 2019-05-23 11:49 评论0 收藏0
CSS3动画效果transition

摘要：鼠标移动触发的动画效果。第二个参数就是动画耗时，默认是，所以必不可少，要不然没有动画效果，没什么可说的。多个样式各个样式用逗号隔开即可宽度完成变化，高度延迟执行，完成变化，背景色完成变化效果如下未完待续1.transition的浏览器支持情况 IE10+支持，IE6789都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀-webkit- 之类的了 2. 还是一步一步说说怎么用trans...

番茄西红柿 2019-04-23 11:57 评论0 收藏0