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