欢迎来到鲍余网络官网 官方微信 官方微博 IDC网站
深圳网站建设官方微信

网络之路,从这里开始

热线电话

18576678080 / 0755-85278776

网站知识
首页 > 网站知识 > 如何让一个按钮像动画一样上下缓动

如何让一个按钮像动画一样上下缓动

  • 所属分类: 网站知识
  • 发布时间:2015-06-23 10:11:53
  • 作者: 鲍余网络
  • 点击量:

现在css3越来越流行,有些效果也比较简单,比较好看,鲍余网络团队整理了一个简单的代码,只为能抛砖引玉。亲们,快收下吧!

附代码:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上下缓动</title>
</head>
<style type="text/css">
.mouseDown{ position:absolute; left:50%; margin-left:-16px; top:200px; cursor:pointer;}
.mouseDown{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;-webkit-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-moz-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-ms-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-o-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-webkit-animation:animations56 0.8s ease infinite;-moz-animation:animations56 0.8s ease infinite;-ms-animation:animations56 0.8s ease infinite;-o-animation:animations56 0.8s ease infinite;}
@-webkit-keyframes animations56{
0%{-webkit-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-moz-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-ms-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-o-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);}
50%{-webkit-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 10px, 0px);-moz-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-ms-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-o-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);}
100%{-webkit-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-moz-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-ms-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);-o-transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(0px, 0px, 0px);}
 
 
</style>
 
<body style="background:#000">
<span class="mouseDown" alt="点击往下">
           <img src="mouse_down.png"></span>
</body>
</html>
关键词:

相关文章:

有做网站需求?   联系客服经理 提交需求 直接拨打业务电话:0755-85278776