H5全栈_动画
程序员文章站
2022-05-03 08:18:17
...
CSS动画
定义动画帧
@keyframes 动画名称 {
from {
left:0;
}
to {
left:1000px;
}
}
@keyframes 动画名称 {
0% {
left:0;
}
...
100% {
left:1000px;
}
}
引用动画
animation-name: 动画名称
animation-duration:3s; 一次动画持续时间
animation-iteration-count: 动画重复的次数
2/infinite
animation-timing-function: 动画速度曲线
linear 线性
steps() 步伐函数
animation-fill-mode 动画最后一帧的填充样式
forwards 当动画完成后，保持最后一个属性值
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
both 向前和向后填充模式都被应用。
animation-direction 动画方向
alternate-reverse 来回
reverse 逆向
alternate 正常
animation-delay 延迟
animation-play-state: 动画状态
running; 运行
paused 停
第三方动画库
animate.css
如何应用第三方库css/js【iconfont / fontawesome / animate.css】：
1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用
梦幻西游
应用
<head>
<meta charset="UTF-8">
<title>梦幻西游</title>
<link rel="stylesheet" href="../common.css">
<style>
.content {
width: 950px;
position: absolute;
left: 50%;
margin-left: -475px;
bottom: 300px;
}
.content > ul::after {
display: block;
content: "";
clear: both;
}
.content > ul > li {
float: left;
width: 200px;
height: 180px;
margin-right: 50px;
overflow: hidden;
}
.content > ul > li:last-child {
margin-right: 0;
}
.content > ul > li > div {
width: 1600px;
height: 180px;
animation-name: dong;
animation-duration: 1s;
animation-timing-function: steps(8);
animation-iteration-count: infinite;
/*animation-direction: reverse;*/
}
.content > ul > li > div img {
width: 100%;
}
/*定义动画*/
@keyframes dong {
from {
margin-left: 0;
}
to {
margin-left: -1600px;
}
}
html,body,.main {
height: 100%;
}
.main {
width: 100%;
overflow-x: hidden;
}
.main > .bg {
width: 3920px;
height: 100%;
margin-left: -1920px;
background-image: url('./images/bg.jpg');
background-repeat: repeat-x;
animation-name: bg;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes bg {
from {
margin-left: -1920px
}
to {
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="main">
<div class="bg"></div>
</div>
<!-- 屏幕中间 宽 200 * 4 + 50*3 = 950 -->
<div class="content">
<ul>
<li>
<div><img src="./images/wk.png" alt=""></div>
</li>
<li>
<div><img src="./images/bj.png" alt=""></div>
</li>
<li>
<div><img src="./images/ts.png" alt=""></div>
</li>
<li>
<div><img src="./images/ss.png" alt=""></div>
</li>
</ul>
</div>
</body>