如何给标题加上过渡

给标题加个小动画嘿嘿

前言

本文大多采用直白、无技术含量的文字表达，教科书式范例请参考RWD2 8.1。在fork了jekyll模板之后，想试着修改一下平淡无奇的标题，于是就试着添加了过渡，边框圆角等，成功后的效果还不错（效果请鼠标移动到本页面的左上角） 所以就分享一下哈~
然后，本文只适合小白，方法繁琐但是容易理解ORZ，大神请绕路。

方法

1. 首先Chorme打开你的Github page，按F12，然后ctrl+shift+c（就是那个可以帮助你选中区域的小指标），选中标题区域。
2. 查看右侧下方css代码部分，点一下在右上角的“+”号，你就会看到一行css代码生成

   a.site-title{
   }
   

3. 然后我们就可以加上我们的语法了。 先是定义高度宽度和背景色

a.site-title{
 width: 300px;
 height: 70px;
 background: #000;
}

1. 然后是边框和圆角

   a.site-title{
    width: 300px;
    height: 70px;
    background: #000;
    border: 0px solid; 
    border-radius: 37px;
   }
   

2. 再然后是过渡 transition

   a.site-title{
    width: 300px;
    height: 70px;
    background: #000;
    border: 0px solid; 
    border-radius: 37px;
    transition: width 2s;
    -webkit-transition: width 2s;
   }
   

3. 为了好看点 让文字居中以及更改文字大小

   a.site-title{
    width: 300px;
    height: 70px;
    background: #000;
    border: 0px solid; 
    border-radius: 37px;
    transition: width 2s;
    -webkit-transition: width 2s; #这段是为了不同的浏览器
    text-align: center;
    font-size: 2.11em;
   }
   

4. 再“+”一个新的，加上 hover

   a.site-title：hover{
   }
   

   添加上变换长度

   a.site-title：hover{
     width: 340px;
   }
   

   你可以试试移动鼠标看看效果啦~~~

5. 用notepad++打开 \ _sass \ _tiles.scss
   然后就把这两段css敲到我们的scss就行啦~~~
6. ruby本地测试一下，没有错误就可以上传啦

一小丢丢话

• 为什么要用chrome进行修改？
  能帮迅速你找到选择符，且修改代码后能迅速得到反馈，在颜色选择上自带的小程序很有用
• 注意缩进、”;”、半角的问题，不要漏了~
• 课本的内容例子真的很好用，多试试