bottom-border-transition – 从中间扩展
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | color: $color-3399E5; &::before{ content: "" ; position: absolute; top: 0; left: 0; border-bottom: 2px solid $color-3399E5; padding-top: 5px; width: 0; height: 100%; } &:hover{ color: $color-3399E5; } &:hover::before{ width: 100%; transition: 0.35s all ease- in 0.1s; }。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。body { padding: 50px; } a,a:hover { color: #000; text-decoration: none; } li { display: inline-block; position: relative; padding-bottom: 3px; margin-right: 10px; } li:last-child { margin-right: 0; } li:after { content: '' ; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease,background-color .5s ease; } li:hover:after { width: 100%; background: blue; } <ul> <li><a href= "#" >HOME</a></li> <li><a href= "#" >PAGE</a></li> <li><a href= "#" >ABOUT US</a></li> <li><a href= "#" >CONTACT US</a></li> </ul> |
1 | <a href= "https://www.cnblogs.com/xiaohuochai/p/5347930.html" target= "_blank" >深入理解CSS过渡transition </a><br><a href= "https://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-3.html" target= "_blank" rel= "noopener nofollow" >CSS3 transition下不同过渡类型效果展示 >></a> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步