CSS3元素水平運動指定距離

antzone發表於2018-06-02
CSSS3

本章節分享一段，它實現了利用CSS3讓div元素水平運動一段距離。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:green;
  position:relative;
  animation:theanimation 5s forwards; 
}
 
@keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼非常的簡單。

相關閱讀：

（1）.animation參閱CSS3 animation一章節。

（2）.@keyframes參閱CSS3 @keyframes一章節。

相關文章