目前分類：網頁前端設計 (23)

瀏覽方式： 標題列表 簡短摘要

掌握CSS基礎，用簡單的代碼製作令人驚艷的旋轉動畫！

以下是一個簡單的示例，可以使用CSS實現360度圓周率的旋轉動畫：HTML部分：

<div class="circle"></div>

CSS部分：

.circle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

解釋：首先，我們創建一個具有50％圓形邊框半徑的div，並將其顏色設置為紅色。

然後，我們定義了一個旋轉動畫，該動畫將div從0度旋轉到360度。 我們使用CSS的@keyframes屬性定義了該動畫，

將其命名為“spin”，並指定動畫持續時間1秒，線性動畫，無限循環。 最後，我們將動畫應用於div上，

使用animation屬性設置動畫名稱“spin”。


文章標籤
css html 網頁設計 前端設計 javascript 360度 旋轉動畫 CSS動畫技巧 網頁元素動畫效果 網頁設計基礎 前端開發教學 動畫效果設計 CSS3設計技巧 前端編程教學 網頁動畫特效 互動式設計網頁 動態網頁特效 網頁美學設計 網頁美學養成 創意設計與開發

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

用php寫一個到訪人數的程式, 此程式非灌水型的程式 這個程式會獲取訪客的IP地址，然後讀取存儲在visits.txt文件中的訪問次數。如果是新的IP地址訪問，它會將IP地址添加到ips.txt文件中，然後增加訪問次數。最後，它會更新visits.txt文件中的總訪問次數並輸出結果。 請注意，這個程式的IP地址記錄方法可能會有一些問題，因為訪客可以使用代理伺服器或其他技術來隱藏其真正的IP地址。如果您需要更精確的IP地址記錄，請參考相關的PHP庫或服務。以下是一個簡單的PHP程式，可以記錄訪客IP並統計總訪問人數：

    
        <?php
        $ip = $_SERVER['REMOTE_ADDR']; // 獲取訪客IP地址

        // 讀取訪問次數
        $visits = 0;
        if (file_exists('visits.txt')) {
                $visits = intval(file_get_contents('visits.txt'));
        }

        // 如果是新的IP訪問，增加訪問次數
        $ip_file = 'ips.txt';
        $ips = array();
        if (file_exists($ip_file)) {
                $ips = unserialize(file_get_contents($ip_file));
        }
        if (!in_array($ip, $ips)) {
                $visits++;
                $ips[] = $ip;
                file_put_contents($ip_file, serialize($ips));
        }

        // 更新總訪問次數
        file_put_contents('visits.txt', strval($visits));

        // 輸出訪問次數
        echo "您是第 " . $visits . " 位訪客。";
        ?>    

(繼續閱讀...)
文章標籤
php css html 網頁設計 前端設計 javascript jquery php教學

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

這裡是一個基本的聯絡表單範例，包含了您所要求的字段和一個簡單的驗證碼。
請注意，這只是前端部分的代碼，您需要在後端處理表單提交並驗證驗證碼。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聯絡表單</title>
    <style>
        .error {
            color: red;
        }
    </style>
    <script>
        function validateForm() {
            const name = document.forms["contactForm"]["name"].value;
            const phone = document.forms["contactForm"]["phone"].value;
            const email = document.forms["contactForm"]["email"].value;
            const city = document.forms["contactForm"]["city"].value;
            const message = document.forms["contactForm"]["message"].value;
            const captcha = document.forms["contactForm"]["captcha"].value;
            const hiddenCaptcha = document.forms["contactForm"]["hiddenCaptcha"].value;

            let errors = [];

            if (!name) {
                errors.push("請輸入姓名");

(繼續閱讀...)
文章標籤
html javascript php 表單 css 網頁設計 前端設計 網頁設計教學 csv 前端設計教學 email adsbygoogle google 驗證碼

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

網頁設計教學 html&css padding 與 margin的差別
margin與padding可以說是絕對肯定必定會用到的
兩個屬性,那對於初學者來說 , 時常會搞混兩種的用法
先簡單敘述一下 padding 

padding 
屬性 padding-top （上）: 各種數值
       padding-right （右）
       padding-bottom （下）
       padding-left （左）
組合寫法
      padding ：10px; （上右下左）
      padding : 13px 15px 12px 11px; （上右下左）運用在四方內距都不同的時候
      padding : 0 10px; (左右)
      padding : 10px 0; (上下)


是調整box的內部距離 例如現在我們做了一個 test-button
html :  <a href="javascript:;" class="test-button">button</a>
我們將按鈕上基本的框線 

image
效果如下

image 
此時的按鈕字句非常擁擠 , 若是加上即可完成正常的樣式

(繼續閱讀...)
文章標籤
html padding margin 網頁設計 前端設計 網頁學習 網頁基礎教學 基礎 網頁 scss button

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

今天分享兩種讓網頁100%滿版的方式 , 
首先我先分享一下效果
https://www.linmohart.com.tw/ 
最上層的banner為滿版效果

//html框架
<header id="header">
  <nav><a href="javascript:;">menu</a>
</nav>
</header>
<main id="main">
   要滿版的部分
</div>


初學者一開始會有一種誤解
認為只要把最上層的 main 標籤設定跟你的螢幕解析度一樣的高度
就能達成100%滿版,那是錯誤的,因為幾乎可以說每一台電腦
顯示出來的都會不一樣,即便你們用的是同一台電腦,都有可能不同
(例如有人習慣隱藏書籤 有些人喜歡裝一堆外掛) 
所以你必須做到可以讓main標籤到哪個螢幕都是滿版

第一種方式, 比較古老的方式, 套用JQuery
只要複製以下代碼即可達到滿版
 

if($(window).width() > 1025  ) {

(繼續閱讀...)
文章標籤
網頁滿版 網頁設計 jQuery css div javascript 外掛

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

網頁設計教學 html div標籤與css float 浮動式定位跑版解決方法

自從多年前脫離表格 (table) 開始 , 在排版上我們會需要非常熟練

css 與 html 之間的互動才能夠完美的做出排版 , 而對初學者來說

使用div與css的排版似乎是一種很困難的事情

主要是因為不懂的如何善用css屬性與屬性之間關係

當你知道之後, 你就會非常的厲害了！

我剛學習的時候最常遇到的困境..
就是css position 和 float了

但他們在成就您基礎的排版上非常重要的兩大功臣

position這個屬性之前已經有介紹過了

若還沒有讀過的可以點擊連結進去看看

運用這兩個屬性排版非常的方便,甚至可以說

會了這兩個,你在排版上就無敵了

但是若不懂的運用, 你將會面臨極大的挫折XD ~~

float 屬性主要運用在水平式的排版

例如水平列表 , 左圖右文等等的

html :

    <div class="center">
      <div class="left">我是左邊</div>
        <div class="right">我是右邊</div>
    </div>
    ＊避免跑版的問題 , 要執行float屬性的div 外層一定要再多一層父元素

(繼續閱讀...)
文章標籤
html float css 浮動式定位 跑版 解決 網頁設計 前端設計 position rwd自適應網頁設計

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

css font icon 完美置中 此例搭配 Font Awesome

若是採用自製 icon 你可以利用背景圖片 在設定背景上下左右置中

如 background: url(../images/icon.svg) no-repeat center center;

但是如果搭配icon字型就沒這麼容易了, 一般來說初學者會想到的方式

可能是以下這樣：

範例 <a href="/contact" class="mail"><i class="fas fa-envelope"></i></a>

設定寬高之後在用padding-top 設定適當的內距

text-align: center;
color: #fff;
background:#000;
border-radius: 100%;
padding-top:(適當的值);
width: 45px;
height: 45px;

image

這樣子的做法並沒有不對 , 若是發生在css2的狀況下
可能也只有這種方式可以達到 icon完美置中

但如果客戶要求你改變icon大小 , 那很明白的,你又得重新設定padding-top的值
 

筆者今天分享一種做法,你不需要設定任何padding,就可以達到最完美的置中
而且不論你的寬高怎麼變,都不會受到影響

首先一樣的html 
<a href="/contact" class="mail"><i class="fas fa-envelope"></i></a>

(繼續閱讀...)
文章標籤
Awesome css html 網頁設計 前端設計

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

一般我們在做網頁商品列表的時候,

客戶他們的商品名稱有長有短

遇到名稱長短差距大的狀況

有時候可能會導致跑版

遇到這種情形

我們首要想到的可能就是限制他的字數

最常見的方式如下～！


    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;   
    width:250px;
    overflow: hidden;


這種方式是達到文字一行

但客戶如果要求希望達到兩行的時候

可以用以下方式
 

兩行樣式

word-wrap: break-word;

(繼續閱讀...)
文章標籤
css html 網頁設計 前端設計 文字樣式 css文字限制 css文字 css樣式 列表 購物車 蝦皮購物

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

一些蘋果電腦常用的快捷鍵


截圖（全螢幕至資料夾） :  Shift Command 3
截圖（全螢幕至剪貼簿） :  Shift Command Control 3

截圖（自選範圍至資料夾） : Shift Command 4
截圖（自選範圍至剪貼簿）: Shift Command Control 4

剪下、拷貝、貼上和其他常見快速鍵

  1. Command-X：剪下所選項目，然後拷貝到「剪貼板」。
  2. Command-C：將所選項目拷貝到「剪貼板」。這也可以用在 Finder 的檔案上。
  3. Command-V：將「剪貼板」的內容貼上目前的文件或 app 中。這也可以用在 Finder 的檔案上。
  4. Command-Z：還原前一個指令。您可以按 Shift-Command-Z 以重做，反轉還原指令。在某些 app 中，您可以還原與重做多個指令。
  5. Command-A：選取所有項目。
  6. Command-F：尋找文件中的項目或開啟「尋找」視窗。
  7. Command-G：再次尋找：尋找下一個之前找到的項目。若要尋找上一個，請按 Shift-Command-G。
  8. Command-H：隱藏最前方 app 的視窗。若要檢視最前方 app 並同時隱藏所有其他 app，請按 Option-Command-H。
  9. Command-M：將最前方視窗縮到最小並縮到 Dock。若要將最前方 app 的所有視窗縮到最小，請按 Option-Command-M。
  10. Command-O：開啟所選項目，或開啟對話框以選擇要開啟的檔案。
  11. Command-P：列印目前文件。
  12. Command-S：儲存目前文件。
  13. Command-T：開啟新標籤頁。
  14. Command-W：關閉最前方視窗。若要關閉 app 的所有視窗，請按 Option-Command-W。
  15. Option-Command-Esc：強制結束 app。
  16. Command-空白鍵：顯示或隱藏 Spotlight 搜尋欄位。若要從 Finder 視窗執行 Spotlight 搜尋，按 Command-Option-空白鍵。（若您使用多個輸入方式以不同的語言輸入內容，則這些快速鍵會變更輸入方式，而不是顯示 Spotlight。瞭解如何更改相衝突的鍵盤快速鍵。）
  17. Control-Command-空白鍵：顯示「字元檢視器」，讓您選擇表情符號和其他符號。
  18. Control-Command-F：以全螢幕使用 app（如果 app 支援此功能）。
  19. 空白鍵：使用「快速查看」預覽所選項目。
  20. Command-Tab：在開啟中的 App 之間切換至下一個最近使用過的 App。 
  21. Shift-Command-5：在 macOS Mojave 或以上版本中拍攝截圖或建立錄製螢幕畫面，或是使用 Shift-Command-3 或 Shift-Command-4 拍攝截圖。進一步瞭解截圖。
  22. Shift-Command-N：在 Finder 中建立新檔案夾。
  23. Command-逗號（,）：開啟最前方 app 的偏好設定。


     

    里莫彩繪事務所紛絲團

    奈思創藝網頁設計

    奈思創藝網頁設計紛絲團

 

文章標籤
快捷鍵 蘋果電腦 macbook教學 macbookpro評價

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

t shirt 變色效果  css + html + jQuery

分享一個網頁上常見的效果, 就是類似像這樣的
Color menu + t shirt 變色效果


image

這個效果其實非常容易 , 首先先建立一個基本的 html 
(另外您要自備一張去背符合頁面的 png 圖檔 )

<div class="image">
  <div class="color"> <!--這個標籤將會用來變色-->
    <img alt="ts" src="/images/blog/ts.png">
  </div>
</div>

<div class="color-menu">
<!--這裡我將所有的顏色連結直接寫上css
       並加入一個自訂的data-name
       裡面的參數就是對應的色碼
-->
  <a style="background: #cb8e00;" data-name="#cb8e00" href="javascript:;"></a> 
  <a style="background: #bf3922;" data-name="#bf3922" href="javascript:;"></a> 
  <a style="background: #d05d28;" data-name="#d05d28" href="javascript:;"></a> 
  <a style="background: #792423;" data-name="#792423" href="javascript:;"></a> 
  <a style="background: #a63437;" data-name="#a63437" href="javascript:;"></a> 
  <a style="background: #903373;" data-name="#903373" href="javascript:;"></a> 
  <a style="background: #314f6f;" data-name="#314f6f" href="javascript:;"></a> 

(繼續閱讀...)
文章標籤
t shirt 網頁設計 css html 前端設計 javascript

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

Scroll fixed Menu

浮動的網頁選單其實是非常容易的 , 例如我想讓它永遠固定在上方, 方便使用者

隨時都可以點選想進去的畫面 , 最基本在無特效的狀況下, 就是Css 設定

position: fixed;

並讓它的層級在最上層的設定 像是...

 #header {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 99999;
    width: 100%;
  }

奈思創藝網頁設計

這樣就能呈現最基本所謂的浮動 menu , 比方說我要當視窗滾動到一個程度後

選單才會從上方用滑動的方式由上往下滑進 , 如果想加這類效果光靠css

是不夠的 , 你必須與 js 做互相對應才行, 這個效果必須要用到的函示為


“scroll“


首先一定要有html標籤 ~

<header id="header">
  <nav>
    <a href="#">menu-1</a>

(繼續閱讀...)
文章標籤
css html 網頁設計 前端設計 javascript jquery position top fixed

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

一般我們在html 的連結 hover 變化不外乎就是單純變色或是變淡,

上次遇到一位客戶他想要做成滑鼠移過去時會有多色的變化,

這個做法也非常簡單在此分享作法！

首先這是一個html連結標籤 <a href="#" id="hover-a">文字特效</a>

這是基本的ＣＳＳ
<style>
  ＃hover-a {
    color: #333;
  }
  ＃hover-a:hover {
    color: #red;
  }
</style>

基本的效果就是這樣

文字特效

加了動態的效果就是這樣

文字特效

這個做法非常容易 在hover時加上關鍵影格即可

<style>
  #hover-a-2 {
    font-size: 30px;
    display: block;
    color: #333;
  }
  #hover-a-2:hover {

(繼續閱讀...)
文章標籤
css html 網頁設計 前端設計 hover 特效 animation steps 文字特效

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

position 這個屬性是在網頁css排版中會經常用到的, 但是它存在許多需要注意的地方

例如 z-index 層級的問題, 有時候設定錯誤會產生非常尷尬的現象, 像是現在很流行

製作浮動固定式的 header 一旦你的層級出現錯誤就會發生違和的重疊畫面

image

這種現象跟你的html階層排版也有關係,
有時候不是你一個設定 z-index:0; 一個設定 z-index:10;
就一定能避免這種現象！

position 常用的屬性有以下
relative : 相對位置   不浮動也不固定 只能靠 top類屬性移動小位置
absolute : 絕對位置 是屬於浮動式但是不會固定視窗位置;
fixed : 浮動式可隨視窗固定位置; 這個沒什麼好講的, 就是浮動效果

他們共用的幾個值分別為
top , left , right , bottom // 這是針對位置
z-index 為層級
例如：
style {
  position: absolute;
  top:0;
  left:0; 
  right:0; 
  bottom:0;
  z-index:99; 
}

(繼續閱讀...)
文章標籤
relative absolute position css html 網頁設計 前端設計 margin padding top left right bottom

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

由於我本身有兼職做牆壁彩繪, 常常讓我最困擾的部分就是場地的大小

我該如何知道實際坪數 , 每次都是將幾＊幾交給我老婆去計算,

所以我請我老婆乾脆將公式給我, 我來寫一個簡單的坪數計算表單

也跟來此的前端初學者做個分享交流：

公分換算坪數的公式如下：

  • 公分×公分=平方公分
  • 平方公分÷10000=平方公尺
  • 平方公尺×0.3025=坪

所以回歸到上一個主題javascript加減計算的延伸,

先寫好基本的html
<div class="box-1">
  <h2>公分換算坪數</h2>
    <input type="text" name="plus" class="plus" value="" placeholder="加法" onClick="placeholder=''">*
    <input type="text" name="less" class="less" value="" placeholder="加法" onClick="placeholder=''">
    <strong>計算的結果
    <!-- 換算的三種結果 -->
    <span id="span-1"></span>平方公分
    <span id="span-2"></span>平方公尺
    <span id="span-3"></span>坪數
  </strong>
</div>
 

接下來就是jquery代碼

 $('.submit').on('click',function(){
    var plus = $('input[name="plus"]').val();
    var less = $('input[name="less"]').val();  
    var square = 10000;

(繼續閱讀...)
文章標籤
css html 網頁設計 前端設計 javascript 公分換算坪數

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

前端基礎分享

CSS padding & CSS margin 內外距的分別

對於初學者來說, padding & margin  是種非常容易搞混的屬性 , 

簡單來說 padding 是屬於框架的內距 , margin 是屬於框架的外距

例如: padding 是這樣:

這裡設定內距 padding 20px

padding是往框架內縮距離,而它的屬性共分五種方式

padding-top:20px; //只針對上距

padding-left:20px; //只針對左距

padding-right:20px; //只針對右距

padding-bottom:20px; //只針對下距

當然你也可以這樣寫: 
padding:10px 10px 10px 10px; // 依序為 上右下左

padding:10px 0; // 上下為10px 左右為0

padding:0 10px; // 上下為0px 左右為10px

 margin 是這樣 :

外距 margin 20px

margin是往框架外拉遠距離 ,

margin-top:20px; //只針對上距

margin-left:20px; //只針對左距

margin-right:20px; //只針對右距

margin-bottom:20px; //只針對下距

你也可以這樣寫: 

(繼續閱讀...)
文章標籤
css html 網頁設計 前端設計 margin padding 框架 基礎

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

css list-style  自訂計數器方式

一般我們在撰寫html帶有數字的有序列表時會運用到 ol + li 

這種方式在文章編輯上是很好用的, 例如

<ol>
  <li>順序一</li>
  <li>順序二</li>
  <li>順序三</li>
</ol>

呈現會像以下這樣這樣

  1. 順序一
  2. 順序二
  3. 順序三

但是這樣的樣式算是一號樣式, 最多讓你改個顏色

如果今天想要用一些比較華麗的樣式, 光靠 ol 是不夠的

那要怎樣可以達到自訂樣式？

首先先撰寫html 我們用 ul 來呈現

<ul class="ul">
  <li>順序一</li>
  <li>順序二</li>
  <li>順序三</li>
</ul>

呈現如下

  • 順序一
  • 順序二
  • 順序三

建議您在ul上加上class 以免造成全站在其他標籤的衝突

接下來我們撰寫css

.ul {
    list-style: none;
    padding: 0;
    margin: 0

(繼續閱讀...)
文章標籤
css 計數 前端設計 網頁設計 html list-style content

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

利用javascript的jQuery函式庫來編寫簡單的加減乘除,

首先這是基本要有的html標籤元素

<input type="text" name="plus" placeholder="加法" onClick="placeholder=''">
<input type="text" name="less" placeholder="加法" onClick="placeholder=''">
<input type="submit" value="計算" class="submit">
<strong>計算的結果 <span id="span"></span></strong>

接下來就是JQuery 語法 

//將計算的方式賦予給submit

<script>
$('.submit').click(function(){
  //加法
  var plus = $('input[name="plus"]').val();
  var less = $('input[name="less"]').val();   
  //var gg =  plus + less; //這樣是錯誤的 22 + 22 會等於 2222 這樣只是顯示字串
  var tt =  plus*1 + less*1; //必須將兩個數字乘1再相加
  
  var num = $('input[type="text"]').val(); //判斷是否為數字
  
  if(isNaN((num)|| num =='' || num.substring(0,0)==0)){ //判斷是否為數字
    alert('請輸入正確數字'); //非數字跳訊息警示
  } else {
    $('#span').text(tt); //正確數值即得結果
  }
});
</script>

(繼續閱讀...)
文章標籤
javascript jquery教學 css code html5教學

jk-mimo 發表在 痞客邦 留言(2) 人氣()

▲top

相信很多設計師在幫客戶排版時經常會遇到一些困擾,就是客戶的文案都是Word檔,這個也不能怪客戶 ,因為對文書處裡來說
Word是編寫文案最方便的工具,有經驗的設計師都知道,我們要將word文件轉到 html上非常麻煩,雖然網路上有許多可以轉換的工具,但免不了會產生一大堆有的沒有的style樣式, 或是亂七八糟的廢碼,筆者這邊提供兩個招式給大家做個參考!

招式一:Word to Html 快速轉換

利用這個網站 wordtohtml 這個網站非常方便,你不需要上傳文檔去做轉換,只要從你的word選取你要的內容,直接貼在右邊的文字欄他就會快速轉換成html碼

blog

接下來你會發現,他將word裡的樣式一字不漏的完全轉換給你,連空格也一併給你,如果只是幾行字刪各兩下到是不痛不癢, 但如果是表格的話..... 接下來就是第二招

招式二:快速清除不必要的廢碼

打開這個網站 https://www.htmlwasher.com/ 將你剛剛轉換好的那一段落落長的html複製下來貼到Paste HTML to clean it up 的欄位裡,並按下 Wash , 如圖式! 它會立即清除所有廢碼跟遺留在標籤裡的style樣式!

blog

 

簡單兩步驟還你乾淨的html碼,若您有更好的方式,歡迎留言提供意見唷^^

https://www.facebook.com/NiceInteractiveMedia 這個方式不適用於有很多圖片的word檔


文章標籤
css html 網頁設計 word 像極了愛情

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

左圖右文是一直以來網頁設計不可缺少的排版方式,對於很有經驗的人來說,這並不是什麼大挑戰

但對新手來說就不一定了,一般想到左圖右文的排版方式可能就是用float屬性或是display:inline-block;

在設定 width:calc(100%/2);就可以實現兩欄排版,但是問題來了,在css排版上水平置中是很容易的,

假設html code是

<div class="box">
  <div class="left"><img alt="" src=""></div>
  <div class="right">文字</div>
</div>

圖片只要設定

img{

   display:block;
   margin:auto;

}


文字只需要text-align:center;就可達到

你要怎麼達到垂直置中?

有一種方式就是

Css排版屬性 display: inline-block;加上  vertical-align: middle;  屬性即可讓圖文垂直置中

.left , .right {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 4px);
}

這樣的方式左圖右文就可以讓垂直達到置中

另外再提一點,如果今天客戶要求一共兩列的兩欄式左圖右文,像是

(繼續閱讀...)
文章標籤
css html 前端設計 左圖右文 css教學 css display 網頁設計教學 css排版 css學習 css教程

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top

說到按鈕過渡設計 , 讓我對於以前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
============================ */

(繼續閱讀...)

jk-mimo 發表在 痞客邦 留言(0) 人氣()

▲top
1 2

Close

您尚未登入，將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

reload

請輸入左方認證碼：

看不懂,換張圖

請輸入驗證碼