欢迎来到王星个人博客!seo教程,DEDECMS织梦免费模板

王星个人博客

HTML5

当前位置:主页 > 网页制作 > HTML5 >

html5_css3 滑动动画

时间:2019-03-21|栏目:HTML5|点击:

文章摘要:!doctype html html head meta charset=utf-8 title从左滑出/title style div{ margin:200px; width:150px; height:100px; background:green; animation: bounceInLeft 3s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000) } @keyframes bounceInLeft { 0% { transform: trans

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
 
<title>从左滑出</title>
<style>
div{
  margin:200px;
  width:150px;
  height:100px;
  background:green;
  animation: bounceInLeft 3s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000)
}
@keyframes bounceInLeft {
  0% {
    
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
  /*  opacity: 1;*/
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(0px, 0, 0);
  }
  90% {
    transform: translate3d(0px, 0, 0);
  }
  100% {
    transform: none;
  }
}
</style>
</head>
<body>
这是定义的css3d 动画从左侧划入
  <div></div>
</body>
</html>
 

上一篇:HTML5,基础入门教程

栏    目:HTML5

下一篇:html5中crossorigin属性

本文标题:html5_css3 滑动动画

本文地址:http://www.aiquhu.com/wangyezhizuo/HTML5/375.html

广告投放 | 联系我们 | 版权申明 | 网站地图(html) | 网站地图(xml)

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:520031800 | 邮箱:520031800@qq.com

Copyright ©2019-2020 王星个人博客 版权所有 苏ICP备18070909号