三分28

    <label id="ahfmu"><legend id="ahfmu"></legend></label>
    <acronym id="ahfmu"><legend id="ahfmu"><blockquote id="ahfmu"></blockquote></legend></acronym><output id="ahfmu"></output>

    <var id="ahfmu"></var>

    1. <cite id="ahfmu"></cite><meter id="ahfmu"><ol id="ahfmu"></ol></meter>

    2. 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)_HTML5教程

      編輯Tag賺U幣

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

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

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

      復制代碼 代碼如下:www.nwzww.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.nwzww.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.nwzww.com

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

      然后設置引用這個字體:

      復制代碼 代碼如下:www.nwzww.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.nwzww.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.nwzww.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.nwzww.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.nwzww.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.nwzww.com

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

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

      復制代碼 代碼如下:www.nwzww.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教程
      甘泉| 兴县| 从化| 盐池| 龙山| 湖口| 远安| 余江| 商丘| 巴彦| 巴音布鲁克| 宜兴| 高雄| 长垣| 乐东| 屏边| 浦口| 会同| 左权| 宁强| 高台| 金塔| 巩留| 宝鸡县| 康山| 玉门镇| 永春| 镇安| 资兴| 内邱| 姚安| 天祝| 沧源| 成武| 文成| 昭觉| 满都拉| 旅顺| 太仆寺旗| 广河| 淄川| 扶余| 盐亭| 渑池| 磐石| 沅陵| 高陵| 永平| 和布克赛尔| 西畴| 郯城| 射洪| 黑河| 荣昌| 根河| 宝过图| 朝阳| 察哈尔右翼中旗| 榆次| 建阳| 鄯善| 五营| 襄樊| 扶风| 泌阳| 闽侯| 齐齐哈尔| 临泉| 敖汉旗| 克东| 平谷| 开鲁| 法库| 南县| 丹徒| 罗子沟| 蓝山| 河曲| 凭祥| 于都| 日照| 郁南| 肃北| 石嘴山| 黄平旧洲| 社旗| 电白| 景东| 渠县| 大理| 德钦| 古田| 怀远| 吐尔尕特| 许昌| 华县| 宁洱| 文水| 崇义| 定州| 无为| 白沙| 文成| 秀山| 中泉子| 商都| 平谷| 南昌| 霍尔果斯| 策勒| 台南| 长汀| 东台| 广饶| 拜泉| 玛沁| 榆树| 都昌| 渠县| 孙吴| 河间| 黄石| 东莞| 厦门| 中牟| 全椒| 枝江| 黄南| 尼勒克| 黔西| 泸县| 镇安| 自贡| 和林格尔| 乾安| 江夏| 红原| 河卡| 盐源| 琼结| 宁德| 邳州| 普格| 湖口| 金昌| 白山| 石渠| 黄梅| 聊城| 眉山| 清水| 霞云岭| 开鲁| 亳州| 丹东| 江夏| 遵义| 崇庆| 澜沧| 平利| 丰润| 小二沟| 太平| 卢龙| 乌兰浩特| 秀山| 赤水| 宁乡| 新县| 沾益| 黎平| 石炭井| 定远| 大宁| 柳城| 洛川| 东港| 盘锦| 义乌| 高要| 三河| 香河| 冠县| 丹凤| 闵行| 岳池| 吴县| 原平| 高力板| 鄂伦春旗| 讷河| 南平| 绥化| 洛隆| 龙泉| 富民| 平度| 宁强| 汝阳| 平潭海峡大桥| 范县| 松潘| 萧山| 陇县| 阿巴嘎旗| 昆山| 河曲| 绥江| 长兴| 恭城| 伊宁| 镇远| 香日德| 宁津| 宜宾县| 仙桃| 张家界| 洪洞| 叶城| 小渠子| 分宜| 安福| 竹山| 轮台| 七台河| 通渭| 济阳| 石林| 伊宁| 新兴| 索伦| 金坛| 南澳| 七台河| 蓝山| 杭锦旗| 连平| 德保| 龙井| 伊通| 武清| 敖汉旗| 扶沟| 青岛| 蕉岭| 漯河| 巴林左旗| 临桂| 苍梧| 微山| 呼中| 城固| 大余| 北碚| 察布查尔| 澄江| 哈尔滨| 伊川| 信丰| 新邵| 澄海| 闽清| 卫辉| 武城| 台南| 杭锦旗| 偏关| 靖西| 安宁| 中心站| 东光| 辰溪| 松潘| 公馆| 临淄| 庆云| 木垒| 连云港| 同江| 哈尔滨| 商水| 小渠子| 景谷| 康山| 滨州| 河南| 高安| 平度| 赫章| 林西| 宁海| 潮阳| 海拉尔| 永兴| 贡山| 洪洞| 利津| 日照| 隰县| 平鲁| 四平| 昭平| 衡阳| 两当| 高陵| 宝兴| 富阳| 罗子沟| 惠州| 共和| 抚州| 永清| 湟源| 上犹| 乐昌| 化州| 茶卡| 普兰| 尼木| 宁阳| 镇宁| 上思| 兴和| 辉南| 康定| 息县| 唐海| 会同| 左权| 金平| 灵武| 惠州| 满城| 恩施| 达州| 托克托| 南陵| 普格| 广南| 红原| 会理| 泰顺| 孟州| 临潼| 东沟| 花溪| 阿合奇| 榆次| 同江| 清水| 华宁| 济宁| 许昌| 南阳| 梅州| 武隆| 乌兰浩特| 肃南| 遂昌| 临安| 郏县| 临沭| 长海| 汕尾| 永春| 绥德| 弥勒| 苏州| 大佘太| 宾川| 冠县| 沙县| 尚志| 吕梁| 大武口| 石泉| 伊吾| 贺兰| 东乡| 文山| 通江| 漳浦| 通许| 柏乡| 那仁宝力格| 京山| 牟平| 沿河| 河曲| 乐至| 佛坪| 新晃| 孙吴| 班戈| 江夏| 怀宁| 凤凰| 黄山区| 辰溪| 桑植