CSS3 div水平运动效果

2018-3-14 14:11| 发布者: admin| 查看: 586| 评论: 0|来自: 蚂蚁部落

使用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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部