快捷导航
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

CSS3 div水平运动效果

2018-3-14 14:11| 发布者: admin| 查看: 431| 评论: 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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:08 , Processed in 0.257927 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部