过度与动画
程序员文章站
2022-03-26 14:35:48
一、过度 从一个状态，以动画方式变成另一个状态的变化过程 1.过度属性 2.注 过度效果通过hover产生可以制成一个hover层，hover层包含需要变化的层 hover层的处理方式：与显示层同等区域大小 可以将显示层的位置交于hover层处理 3.案例 鼠标移动到圆柱，圆柱发生变化 二、动画 1 ......
一、过度
从一个状态，以动画方式变成另一个状态的变化过程
1.过度属性
1.transition-duration 持续时间 2.transition-delay 延迟时间 3.transition-property 属性 表示可过度的样式属性(多个值，用逗号连接) transition-property：all 4.transition-timing-function：linear 过度曲线 整体设置 transition：持续时间 延迟时间 运动曲线(默认ease) 过度属性(all)
2.注
- 过度效果通过hover产生可以制成一个hover层，hover层包含需要变化的层
- hover层的处理方式：与显示层同等区域大小
- 可以将显示层的位置交于hover层处理
3.案例
鼠标移动到圆柱，圆柱发生变化
.box{
width: 300px;
height: 300px;
margin: 0 auto;
border-bottom: 1px solid black;
position: relative;
}
.line{
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
bottom: 5px;
left: 120px;
transition: .4s;
}
.line:hover{
height: 200px;
}
.b{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
bottom: -5px;
}
.t{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -5px;
}
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
二、动画
1.动画属性
1. animation-name 属性 表示动画名(名字任意起) animation-name: <name>; 2. animation-duration 属性 表示动画持续时间 animation-duration: <time>; 3. animation-delay 属性 表示动画延迟时间 animation-delay: <time>; 4. animation-timing-function 属性 表示动画运动曲线 animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier(); -- linear：匀速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 5. animation-play-state 属性 表示动画状态 animation-play-state: running | paused -- running：运行 -- paused：暂停 6. animation-fill-mode 属性 表示动画结束后的停留位置 animation-fill-mode: forwards | backwards -- forwards:终点 -- backwards:起点 7. animation-iteration-count 属性 表示动画次数 animation-iteration-count: <count> | infinite -- <count>：固定次数 -- infinite：无限次 8. animation-direction 属性 表示运动方向 animation-direction: normal | alternate | alternate-reverse; -- normal：原起点为第一次运动的起点，且永远从起点向终点运动 -- alternate：原起点为第一次运动的起点，且来回运动 -- alternate-reverse：原终点变为第一次运动的起点，且来回运动 整体设置 animation：动画名 时间 延迟 动画状态 次数 曲线
2.案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: orange;
}
/*动画样式*/
.box{
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: 1s;
/*延迟时间*/
/*animation-delay: 0.2s;*/
/*动画结束停留位置：backwards起点，forwards终点*/
/*animation-fill-mode: forwards;*/
/*运动次数*/
animation-iteration-count: 4;
/*多次运动方向的规则*/
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/
/*动画状态 running*/
/*animation-play-state: paused;*/
/*整体设置*/
animation: d 1s 2 linear alternate running;
}
.box:hover{
animation-play-state: running;
}
/*动画体*/
@keyframes d{
0%{}
100%{
width: 400px;
}
}
@keyframes second{
0%{}
100%{}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 上一篇： 用python复制图片、视频
下一篇： Vue的Todolist改进