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>