CSS3 div水平運動效果

admin發表於2018-03-14
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:red; 
  position:relative;    
  animation:theanimation 5s infinite alternate;  
} 
@keyframes theanimation{ 
  from {left:0px;} 
  to {left:400px;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

相關文章