鼠标移入文字上向右移动效果

例子1:

  <style>

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
        }
        a {
            outline: none;
            color: #21759b;
        }
        a:link {
            color: black;
            margin-left: 10px;
            text-decoration: none;
        }
        a:visited {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color: #21759b;
        }
        a:active {
            color: black;
            text-decoration: none;
        }
        .postTitle {
            border-left: 12px solid #21759b;
            margin-bottom: 10px;
            font-size: 20px;

            width: 100%;

        }
        .postTitle a:link, .postTitle a:visited, .postTitle a:active {
            color: #21759b;
            transition: all 0.4s linear 0s;
        }
        .postTitle a:hover {
            margin-left: 30px;
            color: #0f3647;
            text-decoration: none;
        }

    </style>


<body style="margin: auto;">
    <div class="post">
        <h1 class="postTitle">
            <a id="cb_post_title_url" class="postTitle2" href="#">试一试</a>
        </h1>
    </div>

</body>

例子2:

<style>

        #aaa{
            border-left:12px solid #21759b;
        }
        #div1 {
            -webkit-transition: margin-left .8s;
            -moz-transition: margin-left .8s;
            -o-transition: margin-left .8s;
        
        }
        #div1:hover {
            margin-left: 10px;
        }


    </style>


<body style="margin: auto;">
    <div id="aaa">
        <div id='div1'>>>>鼠标移入此行会缓慢向右路移动<<<</div>
    </div>
</body>

 

posted @ 2019-12-08 20:54  Crazy丶迷恋  阅读(722)  评论(0)  编辑  收藏  举报