当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 11:53:33 HTML

实现效果具体实现利用css3 ::after或者::before伪元素实现。html代码<a class="abstract-title" href="/archer-demo/2013-12-26/images/"> <span>webpack无法通过 IP 地址访问 localhost 解决方案</span> </a>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)}