CSS知识总结（九）
CSS常用样式
10.自定义动画
1）关键帧（keyframes）
被称为关键帧，其类似于Flash中的关键帧。
在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname：定义动画的名称。
keyframes-selector：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。建议定义百分比选择器。
css-styles：通过 @keyframes 规则，您能够创建动画，就是将一套 CSS 样式逐渐变化为另一套样式，并且能够多次改变这套 CSS 样式。
兼容性：目前浏览器都不支持@keyframes规则，需要加上前缀"-moz-","-o-","-webkit-"。
例子：
@-webkit-keyframes FromLeftToRight{ /* Safari 和 Chrome */
0% {left:;}
100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{ /* Firefox */
0% {left:;}
100% {left:800px;}
}
@-o-keyframes FromLeftToRight{ /* Opera */
0% {left:;}
100% {left:800px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
2）动画名称（animation-name）
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。
animation-name ：none | <identifier>
<identifier>：定义一个或多个动画名称，如果是多个，用逗号分隔。
例子：
div{
-webkit-animation-name:FromLeftToRight;
-moz-animation-name:FromLeftToRight;
-o-animation-name:FromLeftToRight;
animation-name:FromLeftToRight;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@-o-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
3）动画时间（animation-duration）
指定对象动画的持续时间
animation-duration：<time>
例子 源代码：
/* CSS代码 */
.duration{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
animation-name:FromLeftToRight;
animation-duration:3s;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画（矩形用3秒向右移动500px）</p>
<div class="duration"></div>
</body>
效果：
请按F5刷新动画（矩形用3秒向右移动500px）
4）动画的过渡速度（animation-timing-function）
animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))
②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))
③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))
⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。
例子 源代码：
/* CSS代码 */
.function{
width:100px;
height:100px;
background:#ccc;
position:relative;
margin:5px;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
animation-name:FromLeftToRight;
animation-duration:3s;
}
.ease-in{
-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
animation-timing-function:ease-in;
}
.ease-out{
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）</p>
<div class="function ease-in">ease-in</div>
<div class="function ease-out">ease-out</div>
</body>
效果：
请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）
5）动画延迟时间（animation-delay）
指定对象动画延迟的时间
animation-delay：<time>
例子 源代码：
/* CSS代码 */
.delay{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-delay:2s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-delay:2s;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-delay:2s;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画（刷新后请等待2秒启动动画）</p>
<div class="delay"></div>
</body>
效果：
请按F5刷新动画（刷新后请等待2秒启动动画）
6）动画执行次数（animation-iteration-count）
animation-iteration-count：infinite | <number>
infinite表示无限次数，number指定循环次数。
例子 源代码：
/* CSS代码 */
.infinite{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-iteration-count:infinite;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>动画全自动无限循环播放</p>
<div class="infinite"></div>
</body>
效果：
动画全自动无限循环播放
7）动画的顺序（animation-direction）
设置对象动画在循环中是否反向运动
animation-direction : normal | reverse | alternate | alternate-reverse
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
例子 源代码：
/* CSS代码 */
.box{
width:100px;
height:50px;
background:#ccc;
margin:5px;
position:relative;
-webkit-animation-name:FormLeftToRight;
-moz-animation-name:FormLeftToRight;
animation-name:FormLeftToRight;
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
.reverse{
-webkit-animation-direction:reverse;
-moz-animation-direction:reverse;
animation-direction:reverse;
}
.alternate{
-webkit-animation-direction:alternate;
-moz-animation-direction:alternate;
animation-direction:alternate;
}
.alternate-reverse{
-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
animation-direction:alternate-reverse;
}
@-webkit-keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
@-moz-keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
@keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
<!-- HTML代码 -->
<body>
<p>四种不同的顺序</p>
<div class="box">normal</div>
<div class="box reverse">reverse</div>
<div class="box alternate">alternate</div>
<div class="box alternate-reverse">alternate-reverse</div>
</body>
效果：
四种不同的顺序
8）动画的状态（animation-play-state）
设置对象动画的状态
animation-play-state：running | paused
running：运动
paused：暂停
例子 源代码：
/* CSS代码 */
.state{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-iteration-count:infinite;
}
.state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>鼠标移动到矩形上可以暂停动画</p>
<div class="state"></div>
</body>
效果：
鼠标移动到矩形上可以暂停动画
9）动画时间之外的状态（animation-fill-mode）
设置对象动画时间之外的状态
animation-fill-mode ： none | forwards | backwards | both
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
例子 源代码：
/* CSS代码 */
.mode{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-fill-mode:forwards;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-fill-mode:forwards;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-fill-mode:forwards;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画（动画结束后停在结束位置）</p>
<div class="mode"></div>
</body>
效果：
请按F5刷新动画（动画结束后停在结束位置）
10）动画复合属性（animation）
通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。
animation：<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> [ ,*]
利用学过的动画样式，制作一个下滑菜单栏
源代码：
/* CSS代码 */
.dropmenu{
width:100px;
height:30px;
line-height:30px;
text-align:center;
background:green;
border-radius:10px;
overflow:hidden;
}
.dropmenu a{
font-family:"微软雅黑";
font-size:18px;
color:#fff;
text-decoration:none;
}
.dropmenu ul{
list-style-type:none;
padding:;
margin:;
}
.dropmenu ul li{
background:#808080;
}
.dropmenu:hover{
-webkit-animation-name:SlideDown;
-moz-animation-name:SlideDown;
animation-name:SlideDown;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
@-moz-keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
@keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
<!-- HTML代码 -->
<body>
<div class="dropmenu">
<a href="###">菜单栏</a>
<ul>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
</ul>
</div>
</body>
效果：
CSS知识总结（九）的更多相关文章
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- WEBBASE篇： 第四篇， CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- WEBBASE篇： 第三篇， CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- 《HTML与CSS知识》系列分享专栏
收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- C语言 · 高精度加法
问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...
- 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- [PHP内核探索]PHP中的哈希表
在PHP内核中,其中一个很重要的数据结构就是HashTable.我们常用的数组,在内核中就是用HashTable来实现.那么,PHP的HashTable是怎么实现的呢?最近在看HashTable的数据 ...
- C语言 · 4-3水仙花数
问题描述 打印所有100至999之间的水仙花数.所谓水仙花数是指满足其各位数字立方和为该数字本身的整数,例如 153=1^3+5^3+3^3. 样例输入 一个满足题目要求的输入范例.例:无 样例输出 ...
- Oracle Database 12c Data Redaction介绍
什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...
- EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...
- MySQL设置字段的默认值为当前系统时间
问题产生: 当我们在对某个字段进行设置时间默认值,该默认值必须是的当前记录的插入时间,那么就将当前系统时间作为该记录创建的时间. 应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,应该由数据 ...
- 使用Expression实现数据的任意字段过滤（1）
在项目常常要和数据表格打交道. 现在BS的通常做法都是前端用一个js的Grid控件, 然后通过ajax的方式从后台加载数据, 然后将数据和Grid绑定. 数据往往不是一页可以显示完的, 所以要加分页: ...
- 微信小程序的机会在于重新理解群组与二维码
历时一年,唯一一个尚未发布就获得Pony Ma与Allen Zhang站台的产品:微信小程序,将于2017年1月9日正式上线了.我很期待.唯一要警惕的是:防止长考出臭棋. 在上线前夕,我对于如何借助小 ...
- crontab介绍
1.Cron的启动与关闭 由于Cron是Linux的内置服务,可以用以下的方法启动.关闭这个服务: /sbin/service crond start //启动服务/sbin/se ...