好运11选5

<cite id="lhyvl"><p id="lhyvl"><wbr id="lhyvl"></wbr></p></cite>
  • <var id="lhyvl"></var>

    <code id="lhyvl"></code>
    <acronym id="lhyvl"></acronym>
    1. <code id="lhyvl"><ol id="lhyvl"></ol></code>

      <output id="lhyvl"><legend id="lhyvl"></legend></output>
    2. <acronym id="lhyvl"></acronym>

    3. <var id="lhyvl"><ol id="lhyvl"></ol></var><dd id="lhyvl"><u id="lhyvl"></u></dd>
    4. 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)_HTML5教程

      編輯Tag賺U幣

      推薦:網易微博Web App用HTML5開發的過程介紹
      本文介紹了網易微博用HTML5開發的全過程

      本篇文字將展示給你的是,如何利用HTML5/CSS3,僅用5步就可以制作便簽貼效果的HTML頁面,效果圖如下:
      (注:圖里的文字純屬杜撰,搞笑目的,如有雷同,純屬巧合,謝謝!)

      注:該效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于對HTML5的支持不完全,所以看不出效果。
      第一步:創建基本HTML和正方形
      首先添加基本的HTML結構以及構建基本的正方形,代碼如下:

      復制代碼 代碼如下:www.se-nu.com

      <ul>
      <li><a href="#">
      <h2>Dudu:</h2>
      <p>最近咋沒有美女發帖呢?我一定給個頭條推薦,recommend!recommend!</p>
      </a></li>
      <li><a href="#">
      <h2>湯姆大叔:</h2>
      <p>Team的一個成員去了Microsoft做SDE3,又得hire new member了</p>
      </a></li>
      <li><a href="#">
      <h2>技術弟弟:</h2>
      <p>O2DS和我翻譯的書是一樣,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
      </a></li>
      <li><a href="#">
      <h2>Artech:</h2>
      <p>WCF的帖子真是少,看來我得多發點帖子讓大家學習呢</p>
      </a></li>
      <li><a href="#">
      <h2>吉日嘎拉:</h2>
      <p>將權限管理、工作流管理做到我能力的極致,一個人只能做好那么很少的幾件事情</p>
      </a></li>
      <li><a href="#">
      <h2>某武林高手:</h2>
      <p>低于25000塊的面試再也不去了,它grandma的</p>
      </a></li>
      </ul>

       每個note都加一個href連接,主要是為了支持鍵盤訪問,CSS代碼如下:

      復制代碼 代碼如下:www.se-nu.com

      *{
      margin:0;
      padding:0;
      }
      body{
      font-family:arial,sans-serif;
      font-size:100%;
      margin:3em;
      background:#666;
      color:#fff;
      }
      h2,p{
      font-size:100%;
      font-weight:normal;
      }
      ul,li{
      list-style:none;
      }
      ul{
      overflow:hidden;
      padding:3em;
      }
      ul li a{
      text-decoration:none;
      color:#000;
      background:#ffc;
      display:block;
      height:10em;
      width:10em;
      padding:1em;
      }
      ul li{
      margin:1em;
      float:left;
      }

      效果如下:

      第二步:陰影和手寫草體字
      這一步,是我們要實現正方形的陰影效果,并且將字體改為草體(僅限英文),由于google提供了Font API的支持,所以我們可以直接使用了,首先添加對Google API的調用:

      復制代碼 代碼如下:www.se-nu.com

      <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">

      然后設置引用這個字體:

      復制代碼 代碼如下:www.se-nu.com

      ul li h2
      {
      font-size: 140%;
      font-weight: bold;
      padding-bottom: 10px;
      }
      ul li p
      {
      font-family: "Reenie Beanie" ,arial,sans-serif,微軟雅黑;
      font-size: 110%;
      }

      關于陰影,由于各個瀏覽器還都不完全支持,所以需要分別處理,代碼如下:

      復制代碼 代碼如下:www.se-nu.com

      ul li a
      {
      text-decoration: none;
      color: #000;
      background: #ffc;
      display: block;
      height: 10em;
      width: 10em;
      padding: 1em; /* Firefox */
      -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari+Chrome */
      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */
      box-shadow: 5px 5px 7px rgba(33,33,33,.7);
      }

      效果如下:

      第三步:傾斜正方形
      為了讓正方形傾斜,我們需要在li->a里添加如下代碼:
       
      復制代碼 代碼如下:www.se-nu.com

      ul li a{
      -webkit-transform:rotate(-6deg);
      -o-transform:rotate(-6deg);
      -moz-transform:rotate(-6deg);
      }

      但是為了能讓正方形隨機傾斜,而不是全部都傾斜,我們需要使用新的CSS3選擇器,讓正方形在每2個傾斜4個deg,每3個傾斜負3個deg,每6個傾斜5個deg:

      復制代碼 代碼如下:www.se-nu.com

      ul li:nth-child(even) a{
      -o-transform:rotate(4deg);
      -webkit-transform:rotate(4deg);
      -moz-transform:rotate(4deg);
      position:relative;
      top:5px;
      }
      ul li:nth-child(3n) a{
      -o-transform:rotate(-3deg);
      -webkit-transform:rotate(-3deg);
      -moz-transform:rotate(-3deg);
      position:relative;
      top:-5px;
      }
      ul li:nth-child(5n) a{
      -o-transform:rotate(5deg);
      -webkit-transform:rotate(5deg);
      -moz-transform:rotate(5deg);
      position:relative;
      top:-10px;
      }

      效果如下:

      第四步:Hover和Focus時放縮正方形
      想在hover和focus的時候達到縮放的效果,我們需要添加如下代碼:
       
      復制代碼 代碼如下:www.se-nu.com

      ul li a:hover,ul li a:focus{
      -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
      -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
      box-shadow:10px 10px 7px rgba(0,0,0,.7);
      -webkit-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -o-transform: scale(1.25);
      position:relative;
      z-index:5;
      }
      設置z-index為5是為了讓正方形在放大的時候蓋住其它的正方形,同時因為也設置了focus,所以也支持Tab鍵切換訪問,效果如下:

      第五步:平滑過渡和添加顏色
      第四步的特效,看起來有些生硬,我們可以添加Transition來達到平滑動畫的效果,另外顏色比較單一,我們可以設置一下不同的顏色,首先在ul->li->a里添加Transition:

      復制代碼 代碼如下:www.se-nu.com

      -moz-transition:-moz-transform .15s linear;
      -o-transition:-o-transform .15s linear;
      -webkit-transition:-webkit-transform .15s linear;

      然后在even和3n里定義不同的顏色:

      復制代碼 代碼如下:www.se-nu.com

      ul li:nth-child(even) a{
      -o-transform:rotate(4deg);
      -webkit-transform:rotate(4deg);
      -moz-transform:rotate(4deg);
      position:relative;
      top:5px;
      background:#cfc;
      }
      ul li:nth-child(3n) a{
      -o-transform:rotate(-3deg);
      -webkit-transform:rotate(-3deg);
      -moz-transform:rotate(-3deg);
      position:relative;
      top:-5px;
      background:#ccf;
      }
      這樣,就完成了我們最終的效果:

      總結
      至此,我們利用了HTML5和CSS3的基本特性做成了一個還不錯的便簽貼效果,HTML5/CSS3確實很強大,如果在加一些高級特性,比如和JavaScript結合起來,能實現更加牛逼的效果,從當耐特磚家給大家的HTML5實驗室系列文章,就可以看出來了。
      另:圖里的文字純屬杜撰,如有雷同,純屬巧合,謝謝!

      分享:HTML5 對各個標簽的定義與規定:body的介紹
      本文主要介紹body標簽

      來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
      相關HTML5教程
      东川| 宜昌县| 长安| 讷河| 上蔡| 雅布赖| 合肥| 柳城| 奈曼旗| 绥滨| 宝清| 临沂| 玉环| 银川| 吕梁| 大关| 平江| 吴县| 昌邑| 兰坪| 黄陂| 佳木斯| 定边| 漳州| 宜宾县| 江津| 泗阳| 洛宁| 天门| 建宁| 安阳| 太原南郊| 南澳| 科尔沁左翼后旗| 宁晋| 科尔沁左翼后旗| 博湖| 高阳| 宣城| 奉节| 岢岚| 南溪| 贵港| 科尔沁右翼中旗| 新邵| 达川| 攀枝花| 休宁| 古丈| 东至| 永昌| 黑山头| 北镇| 明溪| 丽江| 左权| 怀远| 汇川| 梁平| 丰宁| 胡尔勒| 防城港| 台南| 龙泉驿| 北道区| 武川| 潞江坝| 沁城| 海拉尔| 益阳| 濮阳| 寿阳| 兴宁| 宝过图| 宿州| 平山| 承德县| 城口| 浩尔吐| 翁源| 安宁| 舒兰| 易门| 惠来| 泾县| 日照| 沂源| 丹棱| 南召| 博山| 鹤山| 确山| 高要| 天山大西沟| 太湖| 土默特左旗| 墨玉| 郧县| 清流| 凤阳| 蔡甸| 巴东| 嘉黎| 东光| 番禺| 常州| 海拉尔| 嵊州| 斋堂| 洪泽| 阿荣旗| 正兰旗| 五营| 曹妃甸| 朝阳| 邢台| 洪洞| 涿州| 鸡东| 云龙| 江夏| 涉县| 资源| 邻水| 户县| 武宁| 东丰| 宁县| 福泉| 甘南| 驻马店| 五台山| 柳城| 陇川| 七台河| 大田| 五道梁| 柳林| 松江| 黄平旧洲| 凤冈| 贵南| 乡城| 安陆| 额济纳旗| 梁河| 海北| 金溪| 秀山| 张家口| 晋宁| 永吉| 阿尔山| 丰台| 昌江| 柳河| 郁南| 南漳| 彭阳| 高力板| 岳普湖| 浠水| 故城| 上犹| 祁阳| 宽甸| 永修| 大兴安岭| 黎川| 呼和浩特市郊区| 登封| 忠县| 康平| 昌平| 巧家| 武定| 灵川| 赫山区| 阳泉| 引水船| 乾县| 南华| 淖毛湖| 肥西| 河南| 夏邑| 贵港| 沂源| 缙云| 衡东| 文山| 赵县| 石楼| 芮城| 涞水| 绥滨| 南涧| 黄山区| 景洪| 安乡| 东营| 琼中| 茶卡| 鄂伦春旗| 蓬安| 西青| 聊城| 南阳| 上杭| 西丰| 根河| 新巴尔虎左旗| 黟县| 富阳| 青河| 遵化| 延吉| 安溪| 克拉玛依| 汤阴| 拐子湖| 乌拉特中旗| 米泉| 凯里| 桦甸| 旬阳| 宁洱| 彰武| 饶阳| 东平| 台儿庄| 横县| 个旧| 宝坻| 富源| 资兴| 滁州| 柯坪| 渝北| 东台| 包头| 镇海| 延吉| 扬中| 阳朔| 塞罕坎| 河源| 井陉| 长岛| 鼎新| 济源| 泰兴| 安阳| 定边| 介休| 东方| 望谟| 萍乡| 滁州| 灵石| 双江| 于田| 万山| 任丘| 徐州农试站| 洪湖| 连平| 德惠| 晋洲| 衡水| 三原| 华县| 四子王旗| 商南| 高青| 讷河| 丹棱| 吴县| 绥中| 青田| 草河口| 商都| 定远| 绥棱| 吐鲁番| 鄂尔多斯| 谷城| 昆明农试站| 濮阳| 利辛| 贵阳| 峡江| 筠连| 汉寿| 庐江| 海晏| 保德| 镇赉| 江永| 安泽| 麻阳| 临城| 福安| 木垒| 含山| 怒江| 霍林郭勒| 绥宁| 璧山| 大安| 鄂托克前旗| 新晃| 洞口| 龙泉驿| 澳门| 凉山| 建德| 太原| 佛山| 余杭| 杭锦后旗| 华坪| 北道区| 平鲁| 岑巩| 德钦| 镶黄旗| 息烽| 浦北| 大洼| 临县| 平定| 伊金霍洛旗| 顺昌| 同心| 西乡| 锦州| 越西| 南县| 郑州农试站| 利辛| 岚县| 大余| 阜平| 登封| 印江| 北戴河| 新邵| 赤峰| 北塔山| 衡南| 荣县| 汶川| 富顺| 崇武| 平凉| 龙口| 铁岭| 庐山| 莱芜| 屏边| 新源| 潮州| 八宿| 郴州| 九龙| 杨凌| 祁连| 荔波| 弥渡| 融安| 罗江| 富裕| 乌兰浩特| 渭南| 察哈尔右翼中旗| 新宁| 金坛| 兖州| 林西| 施秉| 志丹| 凤冈| 静乐| 临武| 东丰| 临夏| 南丰| 石屏| 乌伊岭| 罗山| 黄山站| 新丰| 大新| 饶平| 六枝| 陶乐| 忠县| 淮阴| 新巴尔虎右旗