黑马程序员技术交流社区
标题:
学习笔记之动画方法
[打印本页]
作者:
南国之南
时间:
2016-7-14 17:19
标题:
学习笔记之动画方法
这两天都是看css的基础课程，都比较简单，就没有都做笔记，这是我觉得应该做的，就放上来给同学们分享，有兴趣的同学可以敲一下，代码内的数据大家可以根据需要自行更改
动画方法：有四种
linear:全程匀速进行
ease-in:开始时候很慢，然后慢慢加快，是一个曲线函数
ease-out:开始时候很快，然后慢慢放缓，是曲线函数
ease-in-out:开始时候慢渐渐加快后面又慢慢放慢，是曲线函数
ease:开始时候慢渐渐加快后面又慢慢放慢，是曲线函数，跟上面那个效果是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板页</title>
<style>
div{
background-color: #ffff00;
color: #000;
width: 200px;
height:200px;
text-align: center;
line-height: 200px;
transition:transform 1s linear,color 1s linear,width 1s linear,height 1s linear,background-color 1s linear,line-height 1s linear;
}
div:hover{
transform: rotate(360deg);
background-color: #ff00ff;
color: red;
width: 400px;
height: 400px;
line-height: 400px;
}
</style>
</head>
<body >
<div id="div">hello</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板页</title>
<style>
div{
background-color: #ffff00;
color: #000;
width: 200px;
height:200px;
text-align: center;
line-height: 200px;
}
@-webkit-keyframes mycolor{
0%{
background-color: red;
transform: rotate(0deg);
width: 200px;
height: 200px;
line-height: 200px;
}
25%{
background-color: #ccff00;
transform: rotate(90deg);
color: red;
width: 250px;
height: 250px;
line-height: 250px;
}
50%{
background-color: #ff00ff;
transform: rotate(180deg);
color: red;
width: 300px;
height: 300px;
line-height: 300px;
}
75%{
background-color: #00ffff;
transform: rotate(270deg);
color: red;
width: 350px;
height: 350px;
line-height: 350px;
}
100%{
background-color: red;
transform: rotate(360deg);
color: red;
width: 400px;
height: 400px;
line-height: 400px;
}
}
div:hover{
-webkit-animation:mycolor 2s linear;
}
</style>
</head>
<body >
<div id="div">hello</div>
</body>
</html>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2