按鈕新增呼吸燈效果

阿新 • • 發佈：2019-01-21

在頁面中新增一個提交按鈕

<body>
<div class="submit_style">
   <input type="submit" class="submit" value="登入"/>
</div>
</body>

下面進行樣式設計。大小高寬就不說了，直奔重點

    border-radius:6px;  /*圓角*/
    cursor:pointer;     /*游標形狀，pointer為一隻手的形狀*/
    margin:40px auto;   /*邊距*/
    border:1px solid #2b92d4 
;       /*按鈕邊框設定*/
    color:#fff;        /*文字顏色*/
    font-size:20px;    /*文字大小*/
    text-align:center;  /*居中顯示*/
    box-shadow:0 1px 2px rgba(0,0,0,.3);  /*邊框陰影設定*/
    overflow:hidden;

    /*線性漸變語法：
    background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結束顏色值), [color-stop(偏移量小數,停靠顏色值),…] );
        type:line   -->表示漸變為線性
        x1,x2,y1,y2     -->漸變座標，x1=x2垂直變換,y1=y2左右變換
    */ 

    background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));       /*上下垂直漸變*/

    /*規定動畫變換速度：ease-in-out -->動畫以低速開始和結束 */
    -webkit-animation-timing-function:ease-in-out;

    /*為 @keyframes 動畫規定一個名稱*/
    -webkit-animation-name:submit;

    /*完成一個動畫所需時間*/
    -webkit-animation-duration 
:2500ms;

    /*規定動畫播放次數：infinite為無限次*/
    -webkit-animation-iteration-count:infinite;

    /*規定動畫播放方式：alternate為輪流反向播放*/
    -webkit-animation-direction:alternate;

動畫建立好了以後，再進行呼吸效果的實現

@-webkit-keyframes submit {
    0% {
        opacity:.4;     /*元素不透明級別*/
        box-shadow:0 1px 2px rgba(255,255,255,0.1);
    }
    100% {
        opacity:1;
        border:1px solid rgba(59,235,235,2);
        box-shadow:0 1px 30px rgba(59,255,255,2);
    }
}

當你滑鼠放上：hover去要實現動態效果，可以新增下面一句margin-top:42px

這樣就實現了，是不是很簡單？來看一下具體效果如何吧

這裡寫圖片描述

抱歉，有水印，將就一下吧，哈哈哈！

按鈕新增呼吸燈效果

在頁面中新增一個提交按鈕 <body> <div class="submit_style"> <input type="submit" class="submit" value="登入"/> </div> </b

Android 按鈕呼吸燈效果

這裡寫程式碼片公司要求做在按鈕上做一個呼吸燈的效果，想了一下，可以做一個北京，背景執行動畫，讓他迴圈的消失和出現，首先要做兩個動畫 <?xml version="1.0" encoding="utf-8"?> <set xmlns:and

通過ValueAnimator實現呼吸燈效果

主要是通過AnimatorUpdateListener獲得狀態，執行一個不現實的動畫，根據獲得的執行值自己設定view或者drawable的狀態。程式碼如下 ValueAnimator alphaAnim = null; /** * 透明漸變的動畫 *

STM32 定時器2 CH1 CH2 PWM輸出產生呼吸燈效果

PWM一般用來驅動電機（控制速度），控制LED亮度，驅動開關電源電路等等，本例項通過改變PWM佔空比的方式來驅動LED燈，形成呼吸燈的效果。用這種方式來學習STM32 TIM2輸出PWM的配置。以STM32F103C8T6為例，從其資料手冊中可以看到，P

STM32CubeMX學習教程之五：PWM實現呼吸燈效果

完整原始碼下載：https://github.com/simonliu009/STM32CubeMX-PWM-Output軟體：STM32CubeMX V4.25.0 System Workbench V2.4韌體庫版本：STM32Cube FW_F1 V1.6.1硬體：O

一個網頁控制元件的呼吸燈效果例項分享

呼吸燈效果實現，控制元件的呼吸燈效果網頁原始碼： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <tit

ZYNQ自定義AXI匯流排IP應用——PWM實現呼吸燈效果

一、前言　　在實時性要求較高的場合中，CPU軟體執行的方式顯然不能滿足需求，這時需要硬體邏輯實現部分功能。要想使自定義IP核被CPU訪問，就必須帶有匯流排介面。ZYNQ採用AXI BUS實現PS和PL之間的資料互動。本文以PWM為例設計了自定義AXI匯流排IP，來演示如何靈活運用ARM+FPGA的架構。功

想在今日頭條做廣告投放滅蚊燈效果OK嗎

今日頭條今日頭條是一款基於挖掘的推薦引擎產品(手機APP)，它為用戶推薦有價值的、個性化的信息，提供連接人與資訊的新型服務，是國內移動互聯網領域成長快的產品服務之一。　　它於2012年3月創建，於2012年8月發布第一個版本。截至2016年1月，今日頭條”已經在為3.8億的忠誠用戶服務，每天有超過3500萬

平臺表單默認按鈕的使用及效果展示—JEPLUS軟件快速開發平臺

target alt edi 打開 ML 今天 src editor www. JEPLUS平臺表單默認按鈕的使用及效果展示系統開發過程中會有許多按鈕的配置和使用，JEPLUS平臺也有許多默認的按鈕配置同時也支持自定義一些按鈕配置，今天這篇筆記就主要介紹一下

Zepto新增Slide動畫效果

一.緣由公司的移動端專案，採用zepto為主要框架，但是zepto畢竟是精簡版的jquery，體積小了，功能自然沒有這麼強大，特別是動畫和選擇器這兩塊，需要我們自己去拓展。在專案開發過程中，很多頁面過渡需

選單新增點選效果

css: li.active a{ color: #FFCC00; border-bottom:2px solid #FFCC00 ; padding-bottom: 6px; }

點選按鈕新增和刪除塊

點選按鈕新增塊 <form action="" id="repairmain" method="post">  <div id="form"> <div c

給按鈕新增超連結

在原視窗跳轉到新網址 <button onclick="window.location.href='http://www.baidu.com'">連結</button> 開啟新視窗跳轉到新網址 <button onclick="window.open('ht

pyqt5實現按鈕新增背景圖片以及背景圖片的切換

簡介對與控制元件QPushButton中的可以使用setStyleSheet設定它背景圖片。具體設定背景圖片的方法有兩種 self.button.setStyleSheet("QPushButton{background-image: url(img/1.png)}") 然而對於這種方

iOS給一張圖片新增帶有雷達效果的標記，類似地圖示記位置

引言 ©️本文首發個人部落格一之筆 iOS給一張圖片新增帶有雷達效果的標記，類似地圖示記位置在實際開發過程中，往往有這樣一種場景，比如，某一個地方需要新增一個標記，這個標記要足夠醒目，一眼就可以讓使用者知道，標記的地方在哪裡，就像百度地圖或者谷歌地圖裡

呼吸燈輪播圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

LED呼吸燈控制

該方法前提是三方應用必須打入系統應用，並且在應用程式的AndroidManifest.xml中的manifest節點中加入android:sharedUserId="android.uid.system"這個屬性。 static String RED_LED_DEV = "/sys/cl

PWM呼吸燈

##單個定時器 #include <reg52.h> #include <intrins.h> unsigned char PWM_COUNT; //計數 unsigned int HUXI_COUNT; //佔空比更新時間 unsigned cha

在echarts柱狀圖兩側中新增亮燈圓點圖示—markPoint用法

在echarts柱狀圖兩側中新增亮燈圓點圖示需求背景本需求是專案實際開發需求，亮燈圓點作為預警風險情況，分佈在柱狀圖的兩側，如下圖所示：從無到有的開發思路（1）首先，本主之前未做過類似的開發需求，但是既然客戶提出這樣的需求，我們就儘量

微控制器呼吸燈程式

呼吸燈 ORG 0000H START: MOV R0,#01H MOV R1,#00H MOV R2,#00H MOV R3,#0FFH LOOP: MOV P1,R2 MOV A,R0 LOOP1: MOV R4,#10 DJN

按鈕新增呼吸燈效果

相關推薦