前幾天瀏覽網頁是時候,發現乙個特效,感覺很不錯,博主仿照它的樣子寫了一下,下面直接見**吧。
在頁面中新增乙個提交按鈕
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,就是說,兩個相鄰時鐘上公升...