一. 线条延伸动画
- <div class="test">test</div>
- <style>
- .test {
- position: relative;
- border-bottom: 1px solid #ccc;
- }
- .test:after {
- content: '';
- position: absolute;
- left: 50%;
- bottom: -1px;
- height: 2px;
- background-color: red;
- transform: translate(-50%);
- }
- .test:hover:after {
- animation: spread-line 5s linear;
- animation-fill-mode: forwards;
- }
- @keyframes spread-line {
- from {
- width: 0;
- }
- to {
- width: 100%;
- }
- }
- </style>
二. 线条延伸动画
来源: http://www.qdfuns.com/note/46360/cefc71dd38f34e82203e6e5e901ee941.html