SCSS-3-会动的按钮
2019-01-17 本文已影响0人
学的会的前端
前期准备
- 制作会动的按钮：类似：codepen.io.shake
-
阴影生成工具：谷歌搜索：box-shadow generator，调整后复制代码即可。
TIM图片20190117095822.png
- 颜色获取工具：工具越好，CSS模拟写的越好。
- 长宽获取工具。
-
SCSS darken把一个颜色加深 - 查找知识点工具。MDN查找例子
- 谷歌：
iciba.com查找不认识单词含义 - 开发者工具，谷歌审查元素
scs处理CSS动画
- 利用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动画的写法：
- 左右移动
/**实现过程**/
$fn: 10%;
@keyframes x2 {
0% {
transform: translateX(-$fn);
}
25% {
transform: translateX($fn);
}
50% {
transform: translateX(-$fn);
}
75% {
transform: translateX($fn);
}
100% {
transform: translateX(0);
}
}
- 上下移动
/**实现过程**/
$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实现循环
- 左右移动
$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);
}
}
- 上下移动
$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; /**所进行的转换**/
}
