动画效果

ps笔记

已于 2022-07-12 17:34:28 修改

阅读量277

点赞数

文章标签：前端

于 2022-07-12 16:38:33 首次发布

本文链接：https://blog.csdn.net/lv_suri/article/details/125744506

版权

调用动画效果用animation,定义动画用keyframes

动画效果与过度效果的区别：

animation-name:规定需要绑定到选择器的keyframe名称。

animation-duration: 规定完成动画效果所花费的时间，以秒豪秒计。

animation-timing-function:规定动画的速度曲线

animation-delay：规定在动画开始之前的延迟

animation-iteration-count:规定动画应该插播的次数

@keyframes anim {0%{transform:translate(0px,0px)

}}

100%{

transform:translate(900px,100px)

}

方块旋转动画案例：

animation: anim 2s linear 1s infinite 一直循环;

animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次（如果要一直循环infinite）

<style>
    /* 用keyframe定义一个动画 */
    @keyframes anim{
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次（如果要一直循环infinite） */
      animation: anim 2s linear 1s infinite; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

案例：可以根据%从0-100之间进行设置对应的变化内容，如宽，高，背景色，等，其中要注意一个点就是开始0%的宽高度要与结束的100%宽高度一致，这样视觉会比较平滑，好看。

❤❤❤❤

<style>
    /* 用keyframe定义一个动画 */
    @keyframes anim{
      0%{
        transform: rotate(0deg);
      }
      20%{
        width: 200px;
        height: 200px;
        transform: rotate(360deg);
      }
      40%{
        background-color: yellow;
        width: 300px;
        height: 300px;
      }
      100%{
        width: 100px;
        height: 100px;
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次（如果要一直循环infinite） */
      animation: anim 10s linear; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

=======================================================================

keyframes

1，按百分比指定动画

2，from.....to.....指定动画也就是相当于0%-100%

注意：开始与结束相同，可以让动画更平滑。

<style>
    /* 用keyframe定义一个动画 */
    @keyframes anim{
      /* 0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      } */
      /* 可写成以下 */
      form{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次（如果要一直循环infinite） */
      animation: anim 2s linear ; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

CD旋转效果：

停止动画效果

animation-play-state:paused;

 <style>
 /* CD旋转效果 */
    @keyframes anim {
      form{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
      
    }
    .box{
      height: 200px;
      width: 200px;
      margin: 100px auto;
      border-radius: 50%;
      overflow: hidden;
      animation: anim 3s linear  infinite;
    }
    .box img{
      height: 200px;
      width: 200px;
    }
    .box:hover{
      animation-play-state:paused;
    }
  </style>
</head>
<body>
  <audio src="" controls></audio>
  <div class="box">
    <img src="ppp.jpg" alt="">
  </div>
</body>
</html>

海盗床效果案例：

1，完成波浪效果

2，完成船摆动的效果

3，添加鱼的效果

ps笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画效果

调用动画效果用animation,定义动画用keyframes动画效果与过度效果的区别：animation-name:规定需要绑定到选择器的keyframe名称。animation-duration: 规定完成动画效果所花费的时间，以秒豪秒计。animation-timing-function:规定动画的速度曲线animation-delay：规定在动画开始之前的延迟animation-iteration-count:规定动画应该插播的次数@keyframes anim {0%{transform:tra
复制链接

扫一扫