一. 动画模块
1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
2 动画三要素
2.1告诉系统需要执行哪个动画
2.2告诉系统我们需要自己创建一个名称叫做lnj的动画
2.3告诉系统动画持续的时长
div{
width: 100px;
height: 50px;
background-color: red;
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
二.动画模块 - 其它属性 (上)
div {
width: 100px;
height: 50px;
background-color: red;
animation-name: sport;
animation-duration: 2s;
/*告诉系统多少秒之后开始执行动画*/
/*animation-delay: 2s;*/
/*告诉系统动画执行的速度*/
animation-timing-function: linear;
/*告诉系统动画需要执行几次*/
animation-iteration-count: 3; //infinite : 无限的
/*告诉系统是否需要执行往返动画
取值:
normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate, 往返动画, 执行完一次之后往回执行下一次
*/
animation-direction: alternate;
}
@keyframes sport {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
div:hover{
/*
告诉系统当前动画是否需要暂停
取值:
running: 执行动画,默认取值
paused: 暂停动画, 当动画执行时,鼠标hover到div上方时,动画停止,鼠标移开,则继续动画;
*/
animation-play-state: paused;
}
三.动画模块 - 其它属性 (下)
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
animation-name: myRotate;
animation-duration: 5s;
animation-delay: 2s;
/*
通过我们的观察, 动画是有一定的状态的
1.等待状态
2.执行状态
3.结束状态
*/
/*
animation-fill-mode作用:
指定动画等待状态和结束状态的样式
取值:
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式; //向前的
backwards: 让元素等待状态的时候显示动画第一帧的样式; // 向后的
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
*/
/*animation-fill-mode: backwards;*/
/*animation-fill-mode: forwards;*/
animation-fill-mode: both;
}
@keyframes myRotate {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
animation-fill-mode
四. 动画模块-连写
1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
2.动画模块连写格式的简写
animation:动画名称 动画时长;
五. 云层效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>104-动画模块-云层效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
height: 400px;
background-color: skyblue;
margin-top: 100px;
animation: change 5s linear 0s infinite alternate;
position: relative;
overflow: hidden; //让屏幕下方的滚动条隐藏掉
}
ul li{
list-style: none;
width: 400%; //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
height: 100%;
position: absolute; // 设置子绝父相后,三个li会重叠到一起
left: 0;
top: 0;
}
ul li:nth-child(1){
background-image: url("images/cloud_one.png");
animation: one 30s linear 0s infinite alternate;
}
ul li:nth-child(2){
background-image: url("images/cloud_two.png");
animation: two 30s linear 0s infinite alternate;
}
ul li:nth-child(3){
background-image: url("images/cloud_three.png");
animation: three 30s linear 0s infinite alternate;
}
@keyframes change {
from{
background-color: skyblue;
}
to{
background-color: black;
}
}
@keyframes one {
from{
margin-left: 0;
}
to{
margin-left: -100%; //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;
}
}
@keyframes two {
from{
margin-left: 0;
}
to{
margin-left: -200%;//由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
}
}
@keyframes three {
from{
margin-left: 0;
}
to{
margin-left: -300%;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
云层效果
六. 无限滚动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>105-动画模块-无限滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 188px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
width: 2000px; //这个无限滚动原理就是ul做动画
height: 188px;
background-color: black; //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果
animation: move 10s linear 0s infinite normal;
//name 时间 速度 延时 无限重复 是否往返(normal代表不往返)
}
ul li{
float: left;
list-style: none;
width: 300px;
height: 188px;
background-color: red;
border: 1px solid #000;
box-sizing: border-box;
}
ul:hover{
/*动画添加给谁, 就让谁停止*/
animation-play-state: paused;
}
ul:hover li{
opacity: 0.5; //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
}
ul li:hover{
opacity: 1; //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
}
@keyframes move {
from{
margin-left: 0;
}
to{
margin-left: -1200px;//只需要移除屏幕4个li的宽度就可.
屏幕上就会显示第5.6两个li,这时,原本的动画就
会恢复的原来的位置接着动画,实现了无线滚动效果
}
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
//把前两个li加在后面,起到过度效果;动画不会显得太生硬.
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
无限滚动
网友评论