css3實現滑鼠懸浮文字水平晃動效果

螞蟻小編發表於2017-02-26
CSSS3
滑鼠懸浮，文字向右移動一定尺寸，然後又恢復到原來位置。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  background: rgba(55,129,0,.7);
  transition: all ease-out 0.2s;
  box-sizing: border-box;
}
.box:hover {
  padding-left: 30px;
}
</style>
</head>
<body>
<div class="box">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了簡單效果，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.rgba可以參閱CSS3 RGBA顏色一章節。

（2）.transition可以參閱CSS3 transition一章節。

（3）.box-sizing可以參閱CSS3 box-sizing一章節。

相關文章