亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

6種非常炫酷的CSS3按鈕邊框動(dòng)畫特效

  發(fā)布時(shí)間：2016-03-16 10:39:06   作者：佚名   我要評(píng)論
這篇文章主要介紹了一款效果非常炫酷的CSS3按鈕邊框動(dòng)畫特效,按鈕的邊框會(huì)以不同的方式進(jìn)行各種動(dòng)畫，感興趣的小伙伴們可以參考一下

這是一款效果非常炫酷的CSS3按鈕邊框動(dòng)畫特效。這組按鈕邊框動(dòng)畫共有6種不同的效果。當(dāng)鼠標(biāo)滑過按鈕的時(shí)候，按鈕的邊框會(huì)以不同的方式進(jìn)行各種動(dòng)畫，效果非常的炫酷。

在線預(yù)覽    源碼下載

使用方法 

HTML結(jié)構(gòu)

該CSS3按鈕邊框動(dòng)畫特效中的按鈕使用HTML的<button>元素來制作。各種效果非標(biāo)設(shè)置不同的class。例如第一種效果的class為draw。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <button class="draw">draw</button>          

CSS樣式

在CSS樣式中，首先為按鈕設(shè)置一些基本樣式，去掉原生按鈕的樣式。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. button {   
  2.   background: none;   
  3.   border: 0;   
  4.   box-sizing: border-box;   
  5.   box-shadow: inset 0 0 0 2px #f45e61;   
  6.   color: #f45e61;   
  7.   font-size: inherit;   
  8.   font-weight: 700;   
  9.   margin: 1em;   
  10.   padding: 1em 2em;   
  11.   text-align: center;   
  12.   text-transform: capitalize;   
  13.   position: relative;   
  14.   vertical-align: middle;   
  15. }   
  16. button::before, button::after {   
  17.   box-sizing: border-box;   
  18.   content: '';   
  19.   position: absolute;   
  20.   width: 100%;   
  21.   height: 100%;   
  22. }               
  23.   

以上是第一種線條動(dòng)畫效果的制作方法。其它效果的CSS代碼請(qǐng)參考下載文件。

本文就為大家介紹到這，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/w2bc/p/4922347.html

相關(guān)文章

最新評(píng)論