呼吸燈按鈕的實現

2021-08-03 04:01:30 字數 1692 閱讀 5541

前幾天瀏覽網頁是時候,發現乙個特效,感覺很不錯,博主仿照它的樣子寫了一下,下面直接見**吧。

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

class="submit_style">

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

:01px 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;

-webkit-animation-iteration-count

:infinite;

-webkit-animation-direction

:alternate;

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

@-webkit-keyframes submit 

100%

}

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

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

抱歉,有水印,將就一下吧,哈哈哈!

verilog PWM實現呼吸燈

使用pwm技術實現呼吸燈。利用占空比每1ms遞增1us的占空比來點亮led。沒隔1s實現燈由逐漸變亮到逐漸變暗,或者逐漸變暗到逐漸變數的轉換。使用的語言是verilog。module led breath parameter led width 4 input clk,global clock in...

通過ValueAnimator實現呼吸燈效果

主要是通過animatorupdatelistener獲得狀態,執行乙個不現實的動畫,根據獲得的執行值自己設定view或者drawable的狀態。如下 valueanimator alphaanim null 透明漸變的動畫 param animtype 動畫的型別,迴圈 單次 0是單次,1是迴圈,...

基於Verilog實現呼吸燈

首先掌握秒的單位換算,這裡總結一些。因為筆者目前用的大多為50mhz,所以介紹以此為例。但關於秒的轉換全世界都是一樣的。1mhz 1,000khz 1,000,000hz 頻率 是用單位時間內完成的週期性變化的次數,是描述週期運動頻繁程度的量。因此結合以上內容,50mhz,就是說,兩個相鄰時鐘上公升...