說到按鈕過渡設計 , 讓我對於以前Flash的遮色閃光按鈕非常懷念, 只是現在幾乎沒看到有人在用了
其實還是都做得出來, 可能嫌麻煩吧? XD
在這邊分享一個用 scss 做出來的“遮色閃光按鈕”
首先要先準備元素 html Scss
html 部分
<div id="button" class="box">
<a class="button cover-color" title="read more" href="javascript:;"><span>read more</span></a>
</div>
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 );
}
}
要講解實在很難 , 可能你會覺得為什麼要搞這麼複雜對吧? 其實如果做單一個 , 可以不用這樣寫
直接針對單一按鈕去寫就好了, 但是今天如果是專案 , 這樣操作起來比較好管理!
完成後示意 http://mimo.nim.com.tw/
留言列表