HTML 过渡变形动画

详细代码+注释一看就懂！！！
<!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 type="text/css">
    .div1{
     
     
        margin: 200px auto;
        width: 100px;
        height: 100px;
        background-color:blue;
        border: 2px black double;
    }
    .div1:hover{
     
     
      width: 100px;
      height: 100px;
      border: 4px yellow solid;
      /* border-radius: 50%; */
      background-color:red;
      /* 过渡 */
      transition-property: all;  /* 需要应用过度效果的名称 */
      transition-duration: 3s;  /* 定义过渡效果需要花费的时间 */
      transition-timing-function: linear; /* 过度效果的速度快与慢 */
      transition-delay: 0s;    /* 过渡效果延迟几秒触发 */
      /* transition: all 3s linear 0s; 复合属性，相当于把上面四个属性结合 */
      /* 变形 */
      transform:translate(-80px,-80px);/* 实现平移效果 */
      transform: scale(1.5,1.5);/* 放大或者缩小，使用数字表示倍数*/
      transform: skew(10deg,10deg);/* 让元素倾斜显示，两个参数值为度数 */
      transform: rotate(360deg); /* 实现旋转效果 */
      transform-origin: 50% 50%;/* 更换旋转的中心点 */
      transform: rotateX(180deg);/* 围绕X轴旋转 */
      transform: rotateY(180deg);/*围绕Y轴旋转 */
      transform: rotateZ(180deg);/*围绕Z轴旋转 */
      transform: rotate3d(100px,100px,100px,360deg);
      /* 动画 */
      animation-name: donghua;/*定义动画名称 */
      animation-duration: 3s;/* 定义完成动画效果所需的时间 */
      animation-timing-function: linear;/* 定义动画效果的速度快与慢 */
      animation-delay: 1ms; /* 定义动画效果延迟几秒触发 */
      animation-iteration-count: infinite;/* 定义动画播放次数,infinite表示循环播放 */
      animation-direction: alternate;/* 定义动画在奇数正常播放,偶数逆序播放 */
      animation:donghua 3s linear 1ms infinite alternate;/*复合元素*/
    }
    /* 为该动画设置动画效 */
    @keyframes donghua{
     
     
      0%{
     
     transform: rotate(0deg);}/* 动画开始的状态 */
      100%{
     
     transform: rotate(360deg);}/* 动画结束时的状态 */
    }
    </style>


</head>
<body>
   <div class="div1"></div>    
</body>
</html>
HTML 过渡 变形 动画

猜你喜欢

HTML 过渡变形动画
