zoukankan      html  css  js  c++  java
  • CSS自定义下划线动画效果

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            h1 {
                position: relative;
                /* 关键代码 实现折行效果 */
                display: inline;
                padding-bottom: 2px;
                background-repeat: no-repeat;
                background-size: 0 2px;
                /* 控制线的位置 */
                background-position: 50% 100%;
                /* 0% 100% 从左向右变动 */
                /* 50% 100% 从中间往两侧 */
                /* 100% 100% 从右向左变动 */
                /* 0% 50%  可制作横穿线*/
                -webkit-transition: all .5s ease-in-out;
                -moz-transition: all .5s ease-in-out;
                -o-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
                /* 自己可以配置更多创意 */
                background-image: linear-gradient(to right, #3344aa 0%, red 50%, #333 100%);
            }
            
            h1:hover {
                background-size: 100% 2px;
            }
        </style>
    </head>
    
    <body>
        <h1>很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范</h1>
    </body>
    
    </html>
  • 相关阅读:
    PS软件之,快速的修改图片你的尺寸
    想的太多,做的太少
    Java-Junit 的Hello world
    Java-hibernate的映射文件
    工作思路
    Spring入门Hello World
    PHP 进制问题
    Java-hibernate的Hello World
    PHP获得header头进行分析
    动软模板使用教程
  • 原文地址:https://www.cnblogs.com/xzma/p/7703965.html
Copyright © 2011-2022 走看看