动画:
1.创建动画:@keyframes
2.调用动画:animation
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../重置css样式.css">
<style>
.box {
width: 100px;
height: 100px;
background-color: rosybrown;
animation: move 3s linear;
animation-iteration-count: infinite;
}
@keyframes move{
25% {
transform: translate(300px,0);
background-color: aqua;
}
50% {
transform: translate(300px,300px);
background-color: black;
}
75% {
transform: translate(0,300px);
background-color: #fff;
}
}
/* @keyframes move{
100% {
width: 600px;
}
} */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
animation参数值:
参数值 | 效果 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease" |
animation-delay | 规定动画何时开始。默认是 0 |
animation-iteration-count | 规定动画被播放的次数(number类型)。默认是 1,(infinite: 无限次) |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" ,‘alternate' |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running",'paused' |
animation-fill-mode | 规定对象动画时间之外的状态.forwards,backwards默认值 |
多列布局:
列宽column-width
列数column-count
列间距column-gap
列与列之间的边框column-rule
横跨多少列column-span 参数值只有两个1/all