元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
<head>
<meta charset="UTF-8">
<title>animation</title>
<style type="text/css">
.box{
width:100px;
height: 100px;
background: #5cBE3E;
/*定义动画的名称*/
animation-name:fromLeftToRight;
/*定义动画时间*/
animation-duration:3s;
/*定义动画的过渡速度*/
animation-timing-function : ease-in;
/*定义动画的延时时间*/
animation-delay : 1s;
/*定义动画的顺序 normal：正常方向reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行alternate-reverse：动画先反运行再正方向运行并持续交替运行 */
animation-direction : alternate;
/*定义动画的执行次数 infinite表示无数次，其他可以写数字表示多少次*/
animation-iteration-count:infinite;
}
/* 定义动画 关键帧*/
@keyframes fromLeftToRight{
from{
margin-left: 0;
}
to{
margin-left: 100px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上课内容中这个导航下拉隐藏很好用，在网页中很实用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>daohang</title>
<style type="text/css">
.d1{
width: 100px;
height: 40px;
line-height:40px;
text-align: center;
background:green;
border-radius: 10px;
overflow: hidden;/* 超出隐藏 */
}
.d1:hover{
/* 定义动画名字 */
animation-name:slidedown;
/* 动画时间 */
animation-duration:1s;
/* 动画的过渡速度 */
animation-time-function:ease-in-out;
/*设置动画结束时的状态*/
animation-fill-mode:forwards;
/* 动画执行的次数 */
animation-iteration-count:1;
/* 动画开始执行的延迟时间 */
animation-delay:.3s;
}
.d1 a{
font-size: 18px;
color: white;
font-family: "微软雅黑";
text-decoration: none;
}
.d1 ul{
background-color: #313a28;
list-style-type: none;
margin: 0;
padding: 0;
}
@keyframes slidedown{
from{
height: 40px;
}
to{
height: 230px;
}
}
</style>
</head>
<body>
<div class="d1">
<a href="">导航</a>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">电影</a></li>
<li><a href="">音乐</a></li>
</ul>
</div>
</body>
</html>
/*定义动画的状态 running：运动 paused：暂停 */
.box:hover{
animation-play-state:paused;
}
时间： 2024-10-18 11:01:31