博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3动画
阅读量:5891 次
发布时间:2019-06-19

本文共 510 字,大约阅读时间需要 1 分钟。

css3动画主要包含两个知识点:

1是css过渡(transition)
2是css动画(animation)

1.transition,css过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容:1,指定要添加效果的css属性,2.指定效果的持续时间。

test

注意:该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 div 元素上,查看过渡效果。

注意:transition后面跟的属性就是要变化的属性。

2.animation。要创建css3,必须先了解@keyframes规则。@keyframes作用就是创建动画,可以指定一个css样式和动画逐步从目前的样式更改为新的样式。@keyfragmes里没有时间秒的概念,只有百分比的概念,0%就是动画的开始,100%就是动画的结束,动画可以设置播放次数,默认是1次。即播放完一次动画就停止。写完@keyframes接下来就是用animation去调用keyframes了。

使用例子:

test

注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。

转载地址:http://oofsx.baihongyu.com/

你可能感兴趣的文章
主域控制器的安装与配置步骤与方法
查看>>
JavaScript---事件
查看>>
Android NDK入门实例 计算斐波那契数列一生成jni头文件
查看>>
c/c++性能优化--I/O优化(上)
查看>>
将HTML特殊转义为实体字符的两种实现方式
查看>>
jquery 保留两个小数的方法
查看>>
网站架构设计的误区
查看>>
Standard C++ Programming: Virtual Functions and Inlining
查看>>
iis 故障导致网站无法访问
查看>>
作业抄袭简单检测
查看>>
ASP.NET 回调技术(CallBack)
查看>>
Spark源码分析 – BlockManager
查看>>
JS中的this
查看>>
人生, 不要在别扭的事上纠结
查看>>
C的面向对象编程
查看>>
日志服务器架构设计
查看>>
使用Unity开发Android的几种调试方法
查看>>
C++ 基础笔记(一)
查看>>
编译内核出错:invalid option `abi=aapcs-linux' 解决办法
查看>>
System.Func<>与System.Action<>
查看>>