欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

过度与动画

程序员文章站 2022-06-27 22:07:16
一、过度 从一个状态，以动画方式变成另一个状态的变化过程 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>

上一篇： 用GDB调试程序（一）

下一篇： #Plugin 免费CSS生成器CssCollector

推荐阅读