利用 scss 打造仿Flash遮色片按鈕 @ 牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

說到按鈕過渡設計 , 讓我對於以前Flash的遮色閃光按鈕非常懷念, 只是現在幾乎沒看到有人在用了

其實還是都做得出來, 可能嫌麻煩吧？ XD

在這邊分享一個用 scss 做出來的“遮色閃光按鈕”

首先要先準備元素 html Scss

html 部分

scss

檔案一 common.scss

@charset "utf-8";

/* ==
　顏色變數
我習慣將function 獨立一個檔案 , 適時地去調用
=============================================================================== */
$w:#fff; /*白色*/
$r:#c22a42; /*紅色*/ /
/* == end
============================ */

/* ==
動畫流線 function
這是我自己寫的動畫速度可以拿去使用
=============================================================================== */

/* == 動畫流線1
============================ */
@mixin transition($speed){
-webkit-transition: all $speed;
-moz-transition: all $speed;
-ms-transition: all $speed;
transition: all $speed ;
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
-ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0);
transition-timing-function: cubic-bezier(0.165, 0.84, 0);
}

/* == 由快到慢
============================ */
@mixin transition-2($speed){
-webkit-transition: all $speed;
-moz-transition: all $speed;
-ms-transition: all $speed;
transition: all $speed ;
-webkit-transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
-moz-transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
-ms-transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
}

/* == 中間加速
============================ */
@mixin transition-3($speed){
-webkit-transition: all $speed;
-moz-transition: all $speed;
-ms-transition: all $speed;
transition: all $speed ;
-webkit-transition-timing-function: cubic-bezier(.74,.26,.23,.97);
-moz-transition-timing-function: cubic-bezier(.74,.26,.23,.97);
-ms-transition-timing-function: cubic-bezier(.74,.26,.23,.97);
transition-timing-function: cubic-bezier(.74,.26,.23,.97);
}

/* == 到底部彈回
============================ */
@mixin transition-4($speed){
-webkit-transition: all $speed;
-moz-transition: all $speed;
-ms-transition: all $speed;
transition: all $speed ;
-webkit-transition-timing-function: cubic-bezier(.02,.56,.71,1.31);
-moz-transition-timing-function: cubic-bezier(.02,.56,.71,1.31);
-ms-transition-timing-function: cubic-bezier(.02,.56,.71,1.31);
transition-timing-function: cubic-bezier(.02,.56,.71,1.31);
}

//common end

/* ==
按鈕 function
=============================================================================== */

@charset "utf-8";
@import "common";

/* ==
　基本按鈕
=============================================================================== */

@mixin Basic-botton( $font-size , $line , $color, $background , $height ,$width , $transition ) {
text-align: center;
font-size: $font-size;
line-height: $line;
color: $color;
background: $background;
display: inline-block;
width: $width;
height: $height;
@include transition($transition);
}

/* == flash 遮色片效果這一個是我們今天要搞的效果
============================ */
@mixin cover-color(){
overflow: hidden;
&:after {
position: absolute;
top:-30px;
left:-145px;
content: '';
background: -moz-linear-gradient(left, rgba(255,255,255,0) 24%, rgba(255,255,255,0.96) 50%, rgba(255,255,255,1) 51%, rgba(255,255,255,0.04) 76%, rgba(255,255,255,0) 77%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 24%,rgba(255,255,255,0.96) 50%,rgba(255,255,255,1) 51%,rgba(255,255,255,0.04) 76%,rgba(255,255,255,0) 77%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 24%,rgba(255,255,255,0.96) 50%,rgba(255,255,255,1) 51%,rgba(255,255,255,0.04) 76%,rgba(255,255,255,0) 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
display: block;
width: 180px;
height: 100px;
@include skew(20deg,20deg);
@include transition(.2s);
}
&:hover {
&:after {
left:105px;
@include transition(.2s);
}
}
}

//core_button end

接下來就是主要的 scss Core

@charset "utf-8";
@import "common";
@import "core_button";
/* ==
* file type: core.style
* File Usage: Front-end web design
* Updated: 2016.4.16
* Author: NICE CREATIVE ARTS
* http://www.nim.com.tw/
* service@nim.com.tw
-----------------------

01 . 基本按鈕
-----------------------
=============================================================================== */
a { text-decoration: none; }

body {
background: $b;
padding: 10%;
}
.box {
margin: auto;
max-width: 980px;
}
.button {
vertical-align: top;
margin: 0 20px 20px 0;

/*
1.文字顏色 2.背景顏色 3.移過文字色 4.移過背景色 5.框 6.框色 7.文字大小 8.寬度 9.高度 10.行高
=============================================================================== */
&.cover-color {
position: relative;
@include cover-color();
@include Basic-botton(13px ,40px ,$w , $r , 40px , 130px , .2s );
}

}