动画+过渡+弹性布局

最新推荐文章于 2025-04-23 20:29:15 发布

WeChat624

最新推荐文章于 2025-04-23 20:29:15 发布

阅读量258

点赞数

文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_71879136/article/details/127928724

版权

本文介绍了HTML5中的动画、过渡和弹性布局。动画涉及到帧率和关键帧设置；过渡需要指定样式变化和过渡时间；弹性布局允许元素根据页面大小变化，包括display、flex-direction、justify-content等属性的使用，以及对子元素的对齐和伸缩比例的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画

动画是从一种状态转变为另一个状态的过程.这就涉及到了另个名词帧率.我们把一个过程分为起始状态和结束状态，他们中间无数个小时间节点就是帧，每一帧有每一个状态。这些状态在一定的时间内连续执行就形成了动画。

创建动画的工程:

动画的名称:animation-name:动画的名称

动画的周期:animation:6s

动画的时间速度曲线:animation-timing-function:linear

动画的次数:animation-iteration-count:infinite(无限)

动画的暂停:animation-play-state:paused

动画的开始:

@key frames {

from{ }(开始的状态)

to{ }(结束的状态)

}

综合设置: animation: move 4s linear infinite;

代码如下:

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 2使用 */
            animation: move 4s linear infinite;
            /* animation-delay: 2s;
            animation-iteration-count: infinite; 
            animation-direction: alternate; 

            animation: myfirst 5s linear 2s infinite alternate;  */
            
        }

        div:hover{
            animation-play-state: paused;
        }

        /* 1,。定义动画 */
        @keyframes move {
            from {
                transform: translateX(0);
                background-color: red;
            }
            25%{
                transform: translate(1000px,0px);
                background-color: yellow;
            }

            50%{
                transform: translate(1000px,500px);
                background-color: green;
            }
            75%{
                transform: translate(0px,500px);
                background-color: blue;
            }

            to  {
                transform: translateX(0);
            }
        }
    </style>

过渡

过渡就元素从一种样式改变为另一种样式.

过渡属性:transition

必须满足的两个条件:

1.设置过渡的css样式

2.设置需要过渡的时间

过渡的属性:transition-property:background-color height;

过渡的周期:transition-duration:2s

过渡的时间速度曲线:transition-timing-function:linear(默认为ease)

过渡的延迟:transition-delay:3s;

综合设置过渡: css属性周期速度曲线延迟

transition:background-color 4s linear 1s,height 2s ease 0s;

如给盒子一个移入过渡,代码如下:

<style>
    .box {
      width: 500px;
      height: 200px;
      background-color: red;
      text-align: center;
      font-size: 40px;
      color: white;
      transition-property: background-color height;
      transition-duration: 2s;
      transition-timing-function: linear;
      transition-delay: 3s;
      transition: background-color 4s linear 1s,height 2s ease 0s,border-radius 3s,transform 5s;
    }
    .box:hover {
      background-color: blue;
      height: 600px;
      border-radius: 50%;
      transform: translateY(200px);
    }
  </style>