css文字下划线动画

<!DOCTYPE html>
<html>

    <head>

        <style>
            .title span {
                background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;
                background-size: 0 2px;
                background-position: right bottom;
                transition: background-size 1s;
            }
            
            .title:hover span {
                background-size: 100% 2px;
                background-position: left bottom;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <h2 class="title">
            <span>
                Springer Nature advances discovery by publishing trusted research, supporting the development of new ideas and championing open science.
                Springer Nature advances discovery by publishing trusted research, supporting the development of new ideas and championing open science.
            </span>
        </h2>
    </body>

</html>

 

posted @ 2024-08-27 21:18  图图小淘气_real  阅读(4)  评论(0编辑  收藏  举报