动画

使用动画完成页面美化

css样式

.box {
      background: white;
      width: 200px;
      height: 200px;
      position: relative;
      /* 动画名称 */
      /* animation-name: animate1; */
      /* 执行时间 */
      /* animation-duration: 2s; */
      /* 执行次数 */
      /* animation-iteration-count: infinite; */
      /* infinite属性值是无限循环 */
      /* animation-fill-mode: forwards; */
      /* 延迟两秒开始动画 */
      /* animation-delay: 2s; */
      /* alternate动画下一次执行顺序 奇数正向播放 偶数反向播放*/
      /* reverse 固定反向播放 */
      /* alternate-reverse 先执行反向,奇数反向播放,偶数反向播放  */
      /* animation-direction: alternate-reverse; */
      /* linear    动画从头到尾的速度是相同的。
        ease    默认。动画以低速开始，然后加快，在结束前变慢。
        ease-in    动画以低速开始。
        ease-out    动画以低速结束。
        ease-in-out    动画以低速开始和结束。 */
      /* animation-timing-function: ease-in-out; */
      animation: animate1 2s infinite forwards alternate-reverse ease-in-out;
    }

    @keyframes animate1 {
      from {
        width: 200px;
        top: 0;
      }

      to {
        width: 600px;
        background: red;
        top: 300px;
      }
    }

动画，过渡css样式

<style>
    body {
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box {
      background: white;
      width: 100px;
      height: 100px;
      /* transition-property: background;
      transition-duration: 2s;
      /* 过渡延迟 */
      /* transition-delay: 2s;
      transition-timing-function: ease-in-out; */
      transition: all 2s ease-in-out;
    }

    .box:hover {
      background: red;
      border-radius: 50%;
      height: 300px;
      width: 300px;
    }
  </style>

transform动画属性

transform:matrix(1,2,3,4,5,6);-----距阵

transform:translate(120px,50%)-----平移

transform:scale(2,0.5)-----只缩放

transform:rotate(0.5turn)-----旋转

transform:skew(30deg,20deg)----扭曲

 

动画3d效果使用

 body {
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box {
      background: white;
      width: 300px;
      height: 300px;
      /* transform: rotate(25deg);
      transform: skew(25deg); */
      /* transform: scale(2); */
      transition: all 1s ease-in-out;
    }

    .box:hover {
      transform: rotate(25deg);
      transform: skew(25deg);
      transform: scale(2);
      transform: translateY(-100px);
      transform: translateX(100px);
      transform: translate(100px, 100px);
      transform: translate3d(100px, 100px, 100px);
    }