版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
简单动画库的制作
如下是动画库创建的方法步骤:
1.首先创建一个页面
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* 对整个body标签内的内容整体居中 */
body{
text-align: center;
}
</style>
<body>
<h2 class="cj-animation cj-infinite cj-jump">文字“穷凶极恶”弹跳动画</h2>
</body>
</html>
上面代码的运行结果是:
2.创建一个动画库的css文件
将这个文件引入上面创建的html文件中,代码如下:
/* 这里要注意一下,由于我所创建的css文件是跟这个html文件在同一文件下,要看好自己的文件路径,不要直接复制,这样会找不到css文件。*/
<link rel="stylesheet" href="./index.css">
3.将需要展示的动画写入到创建的css文件中
代码如下:
.cj-animation{
/* 默认执行所有动画名字 ,这里的cj-animation动画基类名是由自己取的,不需要一样,
可以在里面定义一些公共的样式动画,如果要改变其中的基类中的一些属性,
可以在所需动画中利用权值大小将基类中的属性值覆盖掉,这样就可以改变基类
中的一下属性了*/
animation:all;
/* 默认每个动画执行时间 */
animation-duration: 2s;
/* 所有动画均匀速执行 */
animation-timing-function: linear;
}
/* 始终是否循环执行 */
.cj-infinite{
animation-iteration-count: infinite;
}
/* 设置延迟执行时间*/
.delay-1s{
animation-delay: 1s;
}
.delay-2s{
animation-delay: 2s;
}
.delay-3s{
animation-delay: 3s;
}
.delay-4s{
animation-delay: 4s;
}
.delay-5s{
animation-delay: 5s;
}
/* 设置动画执行时间长短 */
.fast{
animation-duration: 500ms;
}
.faster{
animation-duration: 200ms;
}
.slow{
animation-duration: 2s;
}
.slower{
animation-duration: 3s;
}
/* 定义动画样式 */
/* 文字跳跃 */
@keyframes cj-jump {
from,
20%,
50%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
45% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.cj-jump{
animation-name: cj-jump;
}
运行代码结果如下:
可能文字跳跃等动画不可以用图片展示起来,只能通过自己去尝试了,这里说声抱歉。。。。。
这里再举一个心跳的动画吧,其他一些比较难的3d平移和旋转等动画就不再详说了。具体代码:
html文件的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<style>
/* 对整个body标签内的内容整体居中 */
body{
text-align: center;
}
</style>
<body>
<h2 class="cj-animation cj-infinite cj-jump">文字“穷凶极恶”弹跳动画</h2>
<h2 class="cj-animation cj-infinite cj-heartBeat">文字“逆天而行”弹跳动画</h2>
</body>
</html>
css文件的代码
/* cj-heartBeat */
@keyframes cj-heartBeat{
from,50%,to{
transform: scale(1);
}
25%,60%{
transform: scale(1.5,1.3);
}
}
.cj-heartBeat{
animation-name: cj-heartBeat;
}
动画效果的图片:
总结
以上就是创建动画库的过程,上面代码中的一些css样式就不去注释并且细说了,只要知道如何创建动画库的步骤,那些动画样式可以自己去详细去学一下,这里只是介绍创建动画库的方法,88。