首页 / 知识
HTML与CSS中的动画模块
2023-04-11 15:16:00
一.动画模块
1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
2动画三要素
2.1告诉系统需要执行哪个动画
2.2告诉系统我们需要自己创建一个名称叫做lnj的动画
2.3告诉系统动画持续的时长
p{width:100px;
height:50px;
background-color:red;
/*1.告诉系统需要执行哪个动画*/
animation-name:lnj;
/*3.告诉系统动画持续的时长*/
animation-duration:3s;}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframeslnj{
from{margin-left:0;}
to{margin-left:500px;}
}
二.动画模块-其它属性(上)
p{
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;}
@keyframessport{
from{margin-left:0;}
to{margin-left:500px;}}
p:hover{
/*告诉系统当前动画是否需要暂停
取值:running:执行动画,默认取值
paused:暂停动画,当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;
*/
animation-play-state:paused;}
三.动画模块-其它属性(下)
.box2{
width:200px;
height:200px;
background-color:blue;
margin:100pxauto;
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;}
@keyframesmyRotate{
0%{transform:rotate(10deg);}
50%{transform:rotate(50deg);}
100%{transform:rotate(70deg);}
}
animation-fill-mode
四.动画模块-连写
1.动画模块连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;
2.动画模块连写格式的简写
animation:动画名称动画时长;
五.云层效果
<htmllang="en"><head>
<metacharset="UTF-8"><title>104-动画模块-云层效果</title><style>
*{margin:0;padding:0;}
ul{height:400px;background-color:skyblue;
margin-top:100px;animation:change5slinear0sinfinitealternate;
position:relative;overflow:hidden;//让屏幕下方的滚动条隐藏掉}
ulli{list-style:none;width:400%;
//设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
height:100%;position:absolute;
//设置子绝父相后,三个li会重叠到一起
left:0;top:0;}ulli:nth-child(1){
background-image:url("images/cloud_one.webp");
animation:one30slinear0sinfinitealternate;}
ulli:nth-child(2){background-image:url("images/cloud_two.webp");
animation:two30slinear0sinfinitealternate;}
ulli:nth-child(3){background-image:url("images/cloud_three.webp");
animation:three30slinear0sinfinitealternate;}
@keyframeschange{
from{background-color:skyblue;}
to{background-color:black;}}
@keyframesone{
from{margin-left:0;}
to{margin-left:-100%;
//如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;
}}
@keyframestwo{
from{margin-left:0;}
to{margin-left:-200%;
//由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
}}
@keyframesthree{from{margin-left:0;}
to{margin-left:-300%;}}
</style></head><body><ul><li></li><li></li><li></li></ul></body></html>
六.无限滚动
<htmllang="en"><head><metacharset="UTF-8"><title>105-动画模块-无限滚动</title>
<style>*{margin:0;padding:0;}
p{width:600px;height:188px;border:1pxsolid#000;
margin:100pxauto;overflow:hidden;}ul{width:2000px;
//这个无限滚动原理就是ul做动画
height:188px;background-color:black;
//背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果
animation:move10slinear0sinfinitenormal;
//name时间速度延时无限重复是否往返(normal代表不往返)
}
ulli{float:left;list-style:none;width:300px;
height:188px;background-color:red;
border:1pxsolid#000;box-sizing:border-box;}
ul:hover{
/*动画添加给谁,就让谁停止*/
animation-play-state:paused;}
ul:hoverli{opacity:0.5;
//当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
}
ulli:hover{opacity:1;
//透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
}@keyframesmove{
from{margin-left:0;}
to{margin-left:-1200px;
//只需要移除屏幕4个li的宽度就可.屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果
}}</style></head><body><p><ul>
<li></li><li></li>
<li></li><li></li>
//把前两个li加在后面,起到过度效果;动画不会显得太生硬.
<li></li><li></li>
</ul></p></body></html>
本文转载自中文网 |
最新内容
相关内容
python3如何引入模块?
python3如何引入模块?，系统，位置，培训，标准，模块，方法，成员，路径，下面，别名，使用Python进行编程时，有些功能没必须自己实现，可以借助Python现有
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件
python中怎么对一个数进行因式分解
python中怎么对一个数进行因式分解?，代码，培训，因式分解，因数，个数，最小，整数，数组，假定，分解，1、Python因式分解代码：importtime#对一个数进
Python怎么取出列表中的相邻元素?
Python怎么取出列表中的相邻元素?，代码，异常，培训，元素，指针，序列，对象，表示，语句，函数，1、python的迭代器。iter()能把一个序列生成为一个和
Python如何复制文件中的内容
Python如何复制文件中的内容，盘中，数据，培训，文件，内容，方法，文件夹，路径，源文件，文件名，python复制文件中内容的方法：1、使用shutil.copyfile
python函数里面形参和实参一样吗?
python函数里面形参和实参一样吗?，培训，函数，参数，里面，变量，实际，形式，全称，示例，后面，python函数里面形参和实参不一样。形参全称是形式参
python中的open函数如何编码?
python中的open函数如何编码?，数据，系统，可取，培训，文件，参数，函数，时候，表示，模式，python中的open函数可以通过在打开文件时添加encoding参
python判断xml是否存在某一节点?
python判断xml是否存在某一节点?，数据，培训，节点，方法，结果，表达式，长度，以上，更多，内容，python中判断xml是否存在某一节点的方法：使用selectN怎么查看python模块在什么位置
怎么查看python模块在什么位置，位置，代码，培训，模块，路径，下面，以上，文件，方法，更多，查看python模块在什么位置的方法：若要获取模块的文件名为
python中的int是什么意思?
python中的int是什么意思?，数字，数据，培训，字符串，参数，语法，实例，以下，方法，函数，python中的int()函数用于将一个字符串或数字转换为整型。
Python中区分字符与字符串吗?
Python中区分字符与字符串吗?，数据，培训，数字，字符串，数据类型，字符，类型，语言，有所不同，布尔，python中不区分字符与字符串，与C语言相比，Python
Python库与模块的区别是什么?
Python库与模块的区别是什么?，名称，概念，标准，机构，培训，名字，代码，模块，区别，函数，python库与模块的区别是：模块、库主要区别在于他们的定义