CSS3学习系列之动画
- Transitions功能使用方法
在css3中，transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能，可通过transitions属性来使用transitions功能。
transitions属性的使用方法如下所示：
transitions：property durantion timing-function
其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transitions功能的使用示例</title>
<style>
div{
background-color: #ffff00;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover{
background-color: #00ffff;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
在CSS3中，还有另外一种使用transitions功能的方法，就是将transitions属性中的三个参数改写成transition-property属性、transition-duration属性、transition-timing-function属性，这三个属性的含义及属性值的指定方法与transitions属性中的三个参数的含义及指定方法完全相同。
- 使用transitions功能同时对多个属性值进行平滑过渡多个属性值
可以使用transitions功能同时对多个属性值进行平滑过渡，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用transitions功能实现多个属性的平滑过渡</title>
<style>
div {
background-color: #ffff00;
color: #000000;
width: 300px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover {
background-color: #003366;
color: #ffffff;
width: 400px
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
- Animations功能的使用方法
Animations功能与transitions功能相同，都是通过改变元素的属性值来实现动画效果的，它们的区别在于：使用transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animations功能的使用示例</title>
<style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div:hover{
-webkit-animation-name:mycolor;
-webkit-animations-duration:5s;
-webkit-animation-timing-function: linear;
animation-name:mycolor;
animation-duration: 5s;
animation-timing-function: linear;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
- 实现多个属性值同时改变的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让多个属性同时变化</title>
<style>
div{
position: absolute;
background-color:yellow;
top: 100px;
width: 500px;
}
@keyframes mycolor {
0%{
background-color: red;
transform: rotate(0deg);
}
40%{
background-color: darkblue;
transform: rotate(30deg);
}
70%{
background-color: yellow;
transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
}
}
div:hover{
animation-name:mycolor;
animation-duration: 5s;
animation-timing-function: linear;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
可以通过animation-iteration-count属性来指定动画的播放次数，也可以通过对该属性指定infinite属性值让动画不停地循环播放。
- 实现动画的方法
Animations功能中实现动画的方法：
linear 在动画开始时到结束时以同样的速度进行改变
ease-in 动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out 动画开始时速度很快，然后速度沿曲线值进行放慢
ease 动画开始时速度很慢，然后速度沿曲线值进行加快，然后沿曲线值放慢
ease-in-out 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
- 实现网页的淡入效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现网页淡入效果的示例</title>
<style>
@keyframes fadein {
0%{
opacity:0;
background-color: white;
}
100%{
opacity: 1;
background-color: white;
}
}
body{
animation-name:fadein;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
CSS3学习系列之动画的更多相关文章
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
- CSS3学习系列之字体
给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
随机推荐
- 初识Java反射
要详细的了解Java反射,就得要了解Java的类加载以及何为运行时动态加载等等概念.本文抛开其余概念,简单介绍Java反射,详细介绍会在以后有一个系统而全面的认识过后展开. 反射是Java被视为动态语 ...
- 为什么要使用addEventListener而不是on监听事件
昨天回答了一个关于vue的问题 vue 除了input 其他可以用keyup事件嘛? 在vue中没有提供除表单之外其它的keyup绑定方法,可以使用原生的监控键盘的事件,于是给出了代码: mounte ...
- Nginx教程(二) Nginx虚拟主机配置
Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...
- 当react框架遇上百度地图
百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...
- poj3417
poj3417 题意 给出一颗 n 个节点, n - 1 条边的树,再加上 m 条新边,允许删掉树边和新边各一条,问能使树分为两部分的方案数. 分析 在树的基础上加上不重复的新边一定会构成环,那么考虑 ...
- 隐马尔科夫模型HMM（一）HMM模型
隐马尔科夫模型HMM(一)HMM模型基础 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比 ...
- Spring+SpringMVC+MyBatis深入学习及搭建(八)——MyBatis查询缓存
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6956206.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(七)——My ...
- javascript常用开发笔记：一个简单强大的js日期格式化方法
前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...
- ASP.NET MVC开发学习过程中遇到的细节问题以及注意事项
1.datagrid中JS函数传值问题: columns: { field: 'TypeName', title: '分类名称', width: 120, sortable: true, format ...
- JDK和Tomcat的简单配置（菜鸟巧记一）
JDK和Tomcat的配置 1.先好安装JDK 1.1先到oracle官网下载合适自己的JDK 地址http://www.oracle.com/technetwork/java/javase/down ...