h5c3-day03 (过渡，变形，动画）；

码陨之间

已于 2023-08-24 20:10:47 修改

阅读量55

点赞数

文章标签：前端 css javascript 开发语言

于 2023-08-24 19:52:53 首次发布

本文链接：https://blog.csdn.net/ZXK19990928/article/details/132481511

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 过渡：给用户呈现 由一种样式到另一种样式的过程 */
      /* 指定当前box具有过渡效果 */
      /* 过渡的属性名称 */
      /* transition-property: width height; */
      /* 过渡花费的时间 */
      /* transition-duration: 1s; */
      /* 过渡的曲线 */
      /* 匀速 */
      /* transition-timing-function: linear; */
      /* 缓慢 */
      /* transition-timing-function: ease; */
      /* 加速 由慢到快 */
      /* transition-timing-function: ease-in; */
      /* 快慢快 */
      /* transition-timing-function: ease-in-out; */
      /* 过渡何时开始 */
      /* transition-delay: ; */

      /* 过渡的简写形式 */
      /* transition: all 1s ease; */

      /* transform 变形 */
      /* transform:translate(100px, 0px) 平移 */
      /* transform:scale(x,y);缩放 */
      /* transform:rotate(deg);旋转 */
      /* transform:skew(deg, deg) 倾斜 */

      /* 3D */
      /* 透视(视距) */
      /* perspective: 1000px; */
      /* 保留子元素的3d位置 */
      /* transform-style: preserve-3d; */

      /* 创建一个自定义动画 */
      /* @keyframes 动画名称{
            两个动画帧
            from{}
            to{}
        } */

      /* 动画名称 */
      /* animation-name: move; */
      /* 动画时间 */
      /* animation-duration: 1s; */
      /* 动画曲线 */
      /* animation-timing-function: ease; */
      /* 动画何时开始 */
      /* animation-delay: 2s; */
      /* 动画次数 */
      /* animation-iteration-count: infinite; */
      /* 动画是否暂停 */
      /* animation-play-state: running; */
      /* 动画是否逆向 */
      /* reverse 颠倒 */
      /* alternate 交替 */
      /* alternate-reverse 颠倒交替 */
      /* animation-direction: alternate; */
      /* 动画之外的状态 */
      /* animation-fill-mode: ; */
      /* 简写 */
      /* animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;  */
      
    </style>
  </head>

  <body></body>
</html>