提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
随着用户的需求,以及为提升用户体验今天我们讲利用css制作动画
提示:以下是本篇文章正文内容,下面案例可供参考
一、定义关键帧
这里用到了animation:名 时间;动画后面的是运动方式、循环否后面的具体内容请自己调试,这样可以更加熟悉。
@keyframes 名
其中0%,10% 是时间段表示在这个时间段做的事情这个时间段的时间是由animation的时间控制的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
animation: mybox 8s ease infinite ;
}
@keyframes mybox{
0%,10%{
transform: translateX(0);
}
25%,35%{
transform: translateX(200px);
}
50%,65%{
transform: translateX(400px);
}
75%,90%{
transform: translateX(600px);
}
100%{
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
二、小球运动
小球这里用的思路是:
当小球运动到一定的距离开始改变运动的方向 X轴,Y轴的方向
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: black;
}
.wrapper{
width: 100px;
height: 100px;
/* 圆角边框 */
border-radius: 50%;
/* 径向渐变 */
background: radial-gradient(circle farthest-side at center,white,grey);
/* animation: 名字 时间 匀速 往返 无限循环 */
animation: mybox 8s linear alternate infinite;
}
@keyframes mybox{
0%{
transform: translate(0,0);
}
25%{
transform: translate(500px,0);
}
50%{
transform: translate(500px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
总结
css的动画效果还有很多,例如让多个图片做成一个动图这样的。简单的来说css动画就是让其添加的图片,或者是某个元素进行运动