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

例子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;

             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>

查看全文

相关阅读:
正反向代理工具squid
docker安装jira
pandas输出的数据集导入数据库
 python监控接口告警模板
 Auth认证
 Form与ModelForm的使用
 原生Ajax与jQuery的Ajax和伪Ajax
Django缓存与信号
 Django的生命周期与中间件的流程
 CSRF的原理和基本使用

原文地址：https://www.cnblogs.com/smile1/p/12007164.html