CSS3 div水平运动效果

快乐打工仔 分类:实例代码

CSS3 div水平运动效果属于前端实例代码,有关更多实例代码大家可以查看

使用css3可以便利的实现div元素的水平运动效果。

下面就分享一段最为简单的一段代码实例,需要的朋友可以做一下参考。

代码如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.pipipi.net/" />   
<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>

CSS3 div水平运动效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 div水平运动效果就介绍到这了。

回复

我来回复
  • 暂无回复内容