CSS3 Transitions屬性打造動畫的下載按鈕特效，css3transitions

CSS3 Transitions屬性打造動畫的下載按鈕特效，css3transitions

一個網站的下載按鈕應盡量吸引讀者的注意。 這意味著網頁設計師應該非常重視檔案的下載介面。一個頁面這麼多的檔案，片，視頻和外掛程式可以通過直接HTTP下載共用。許多免費網站甚至發布表徵圖集和PSD檔案供使用者免費下載。在這些元素很多的網頁下載按鈕非常重要。下面就給大家帶來一款動畫的下載按鈕，如下：

 

線上預覽   源碼下載

 

這裡不需要任何JavaScript。我們需要的是引用一個外部的樣式檔案styles.css。這裡所有的CSS檔案和index.html檔案在同一目錄下面。

html代碼：

 <div id="wrapper">        <h1>            CSS3 Animated Download Buttons</h1>        <div class="center">            <a target=_blank href="http://www.w2bc.com/shili" class="dlbtn">Download<span class="details">.zip<span                class="size">11.5 MB</span></span></a></div>        <br>        <br>        <div class="centerbig">            <a target=_blank href="http://www.w2bc.com/shili" class="dlbtn big">Download<span class="details"><span                class="dlicon"><i class="entypo">&#59256;</i></span>.zip<span class="size">11.5 MB</span></span></a></div></div>

css代碼：

@font-face { font-family: 'entypo'; src: url('entypo/entypo.eot'); src: url('entypo/entypo.eot?#iefix') format('embedded-opentype'), url('entypo/entypo.woff') format('woff'), url('entypo/entypo.ttf') format('truetype'), url('entypo/entypo.svg#svgFontName') format('svg');}html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}html { overflow-y: scroll; }body { font-family: 'Helvetica', Arial, sans-serif; font-size: 62.5%; line-height: 1; color: #414141; margin: 45px 15px; background: #ececec url('bg.png');}br { display: block; margin: 10px 0;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }ol, ul { list-style: none; }input, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }strong, b { font-weight: bold; }em, i { font-style: italic; }table { border-collapse: collapse; border-spacing: 0; }img { border: 0; max-width: 100%; height: auto; width: 100%; }h1 { font-size: 3.1em; line-height: 1.55em; text-align: center; font-weight: bold; font-family: 'Oswald', 'Helvetica', Arial, sans-serif; margin-bottom: 35px; color: #595959;}.entypo { font-family: 'entypo', sans-serif; }/** page structure **/#wrapper { display: block; max-width: 850px; padding: 45px 35px; margin: 0 auto; background: #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}.center { width: 20%; margin: 0 auto;}.centerbig { width: 40%; margin: 0 auto;}/** download button effect **/a.dlbtn { display: inline-block; position: relative; height: 45px; line-height: 40px; overflow: hidden; padding: 0 30px; font-size: 12px; font-weight: bold; color: #c0c0c0; background-color: #fff; text-decoration: none; cursor: pointer; border: 3px solid #ddd; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}a.dlbtn:hover, a.dlbtn:focus { color: #fff; padding-right: 90px; background-color: #5381bf; border-color: #5381bf;}a.dlbtn .details { position: absolute; line-height: 11px; top: 4px; right: -15px; opacity: 0; background: #49668c; color: #fff; text-align: center; padding: 3px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: right 0.4s linear, opacity 0.25s; -moz-transition: right 0.4s linear, opacity 0.25s; transition: right 0.4s linear, opacity 0.25s;}a.dlbtn .details .size { display: block; padding-top: 3px;}a.dlbtn:hover .details, a.dlbtn:focus .details { right: 8px; opacity: 1;}/** large download button **/a.dlbtn.big { height: 115px; line-height: 115px; padding: 0 80px; font-size: 26px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}a.dlbtn.big:hover, a.dlbtn.big:focus { padding-right: 160px;}a.dlbtn.big .details { top: 10px; font-size: 18px; line-height: 20px; padding: 6px 15px;}a.dlbtn.big:hover .details, a.dlbtn.big:focus .details { right: 15px;}a.dlbtn .dlicon { display: block; font-size: 55px; line-height: 30px;}/** responsive styles **/@media screen and (max-width: 620px) { h1 { font-size: 2.7em; } .center { width: 30%; } .centerbig { width: 70%; }}@media screen and (max-width: 480px) { h1 { font-size: 2.2em; } .center { margin-left: 0; } .centerbig { margin-left: -20px; } a.dlbtn.big { padding: 0 70px; } a.dlbtn.big:hover, a.dlbtn.big:focus { padding-right: 150px; }}View Code

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/6364

軟艦實訓分享的大家可以看懂？

HTML5/CSS3 就是在寫網頁裡可以用到的按鈕特效，很實用的，如果看不太明白，可以先瞭解一下htmlhe和css的關係，這是編程的知識
 
css3的新特性

1: CSS3選取器部分
E[att^="val"] 匹配具有att屬性、且值以val開頭的E元素
E[att$="val"] 匹配具有att屬性、且值以val結尾的E元素
E[att*="val"] 匹配具有att屬性、且值中含有val的E元素
E:root 匹配文檔的根項目。在HTML中，根項目永遠是HTML
E:nth-child(n) 匹配父元素中的第n個子項目E
E:nth-last-child(n) 匹配父元素中的倒數第n個結構子項目E
E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E
E:last-child 匹配父元素中最後一個E元素
E:first-of-type 匹配同級兄弟元素中的第一個E元素
E:only-child 匹配屬於父元素中唯一子項目的E
E:only-of-type 匹配屬於同類型中唯一兄弟元素的E
E:empty 匹配沒有任何子項目（包括text節點）的元素E
:target 匹配相關URL指向的E元素
E:enabled 匹配所有使用者介面（form表單）中處於可用狀態的E元素
E:disabled 匹配所有使用者介面（form表單）中處於不可用狀態的E元素
E:checked 匹配所有使用者介面（form表單）中處於選中狀態的元素E
E::selection 匹配E元素中被使用者選中或處於高亮狀態的部分
E:not(s) 匹配所有不匹配簡單選擇符s的元素E
E ~ F 匹配E元素之後的F元素

2、 CSS3特效部分1：圓角，陰影，漸層
border-radius
box-shadow
text-shadow
-webkit-gradient

3、 CSS3特效部分2：背景，邊框背景
background-origin
background-clip
background-size
multiple backgrounds
border-image

4、 CSS3特效部分3： 變形
rotate
X/Y/Z
scale
......餘下全文>>