文档章节

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

L
 LM_Mike
发布于 2017/08/07 19:27
字数 335
阅读 873
收藏 0
<!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>

本文转载自:http://www.yangqq.com/jstt/css3/2013-07-16/380.html

L
粉丝 1
博文 272
码字总数 41576
作品 0
深圳
私信 提问
纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?

本文转载于:猿2048网站纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢? 前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的...

前端老手
08/27
78
0
纯 CSS3 效果资源收集整理

awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理了一些相关资源与工具,欢迎各位到 https://github.com/Zhangjd/awesome-pure-css-...

bbtzjd
2016/03/19
225
0
[译] 如何用 CSS Animations 实现滑动图片展现文字的效果

原文地址:Slide an Image to Reveal Text with CSS Animations 原文作者:Jesper Ekstrom 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Fengziyin1234 校对者:p...

掘金翻译计划
05/25
0
0
jQuery+CSS3搞一个动画简历

在线预览(移动端慎入) github 又到了一年一度躁动不安的季节,跳槽升职加薪当然需要一份很nice的简历啦,作为一位在本圈刚出道的前端小白,当然需要一份很nice的简历啦! 图片展示 设计粗糙...

JianJian_Cao
04/16
0
0
关于网页3D切换的优化问题

现在我们看到的很多网页上其实有很多的动画,这些动画实现的效果也是各种各样,这里我总结了几种关于动画的性能优化方案,很有可能不是很完善,但是我觉得已经是我这段时间碰到的所有问题了。...

i5--lou
2016/04/05
38
0

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
8
0
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部