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

最新推荐文章于 2024-07-22 19:12:50 发布

weixin_34414196

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量1.8w

点赞数 3

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/daladida/blog/1504158

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

转载于:https://my.oschina.net/daladida/blog/1504158