您的位置：首页 > Web前端 > CSS

纯css动画-div从左到右出现

2017-08-07 00:00 316 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<meta content="email=no" name="format-detection" />
<meta name="msapplication-tap-highlight" content="no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>Hello,Mike</title>
<style>
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-120px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */
nav ul li:nth-child(1){
-webkit-animation-name: "fadeInLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 0.5s;/*动画持续的时间长*/
-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
}
nav ul li:nth-child(2){ -webkit-animation:'fadeInLeft' 1s 1} /* 简写 */
nav ul li:nth-child(3){ -webkit-animation:'fadeInLeft' 2s 1}
nav ul li:nth-child(4){ -webkit-animation:'fadeInLeft' 3s 1}
nav ul li:nth-child(5){ -webkit-animation:'fadeInLeft' 4s 1}
nav ul li:nth-child(6){ -webkit-animation:'fadeInLeft' 5s 1}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/download/" target="_blank">个人网站模板</a></li>
<li><a href="/newsfree/" target="_blank">企业网站模板</a></li>
<li><a href="/web/" target="_blank">网站建设</a></li>
<li><a href="/newshtml5/" target="_blank">HTML5案例</a></li>
<li><a href="/jstt/" target="_blank">技术探讨</a></li>
<li><a href="/news/case/" target="_blank">作品展示</a></li>
</ul>
</nav>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航