SCSS-3-会动的按钮

前期准备

• 制作会动的按钮：类似：codepen.io.shake

• 阴影生成工具：谷歌搜索：box-shadow generator，调整后复制代码即可。

  
  TIM图片20190117095822.png
• 颜色获取工具：工具越好，CSS模拟写的越好。
• 长宽获取工具。
• SCSS darken把一个颜色加深
• 查找知识点工具。MDN查找例子
• 谷歌：iciba.com查找不认识单词含义
• 开发者工具，谷歌审查元素

scs处理CSS动画

scss处理循环动画

• 利用scss循环自动生成CSS代码

scss代码部分
&:hover {/**代码调用部分**/
       animation-duration: .5s; /**时间用时**/
       animation-name: x; /**所进行的转换**/
}
/**SCSS循环代码部分**/
$z: 10%;
@keyframes x {
    @for $i from 1 to 6 {
        #{$i * $z} {
            color: red;
        }
    }
}

下图是自动生成的CSS部分

TIM图片20190117110029.png

用SCSS生成0%,25%,50%,75%,100%,之后实现左右（上下移动）

• css3动画的写法：

1. 左右移动

/**实现过程**/
$fn: 10%;
@keyframes x2 {
    0% {
      transform: translateX(-$fn);
    }
    25% {
        transform: translateX($fn);
    }
    50% {
        transform: translateX(-$fn);
    }
    75% {
        transform: translateX($fn);
    }
   100% {
         transform: translateX(0);
    }
  }

2. 上下移动

/**实现过程**/
$n: 20%;
@keyframes y2 {
    0% {
      transform: translateY(-$n);
    }
    25% {
        transform: translateY($n);
    }
    50% {
        transform: translateY(-$n);
    }
    75% {
        transform: translateY($n);
    }
   100% {
         transform: translateY(0);
    }
  }

• scss利用for-to加上if-else实现循环

1. 左右移动

$fn: 10%;
/**scss利用if-else写法**/
$step: 25%;
@keyframes x {
    @for $i from 0 to 4 {
        #{$i * $step} {
            @if $i % 2 == 0 {
                transform: translateX(-$fn);
            }@else {
                transform: translateX($fn);
            }            
        }
    }
    100% {
        transform: translateX(0);
   }
}

2. 上下移动

$n: 20%;
$step: 25%;
@keyframes y {
    @for $i from 0 to 4 {
        #{$i * $step} {
            @if $i % 2 == 0 {
                transform: translateY(-$n);
            }@else {
                transform: translateY($n);
            }            
        }
    }
    100% {
        transform: translateY(0);
   }
}

• 无论是CSS还是SCSS的调用方法是一样的

   &:hover {
         animation-duration: .5s; /**时间用时**/
         animation-name: y; /**所进行的转换**/
  }

具体的代码示例

制作会动的按钮具体代码：