CSS实现简单Hover动画

#CSS实现简单Hover动画

这是第二次制作网页相关的东西，是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果：

代码部分，css样式我就放在了html文件里面了：

  

  

    

      
Beautiful Day
      
Learn CSS Hover
    
   
    

代码很简单，主要是以下几个点。
a:hover{...}表示鼠标放在某个元素上面时的css样式，它可以用在所有元素上，不只是链接。链接a元素相关的有关的：
a:link{...}链接未访问时的样式
a:visited{...}链接访问后的样式
a:active{...}链接被选中时候的样式
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

transfrom:该属性允许我们对元素进行旋转、缩放、移动或倾斜。
具体可以参考CSS3 transform 属性。这里用了transform:rotate(180deg);表示对边框进行180度的旋转。

transition：是个简写，有四个参数，表示转换时的过渡属性。具体可以参考CSS3 transition 属性。这里用了transition:all 0.5s ease-out;意思是对mask和border中的所有属相进行转换，间隔0.5秒，以慢速结束的过渡效果。

另外出现了border-sizing:border-box;参考CSS3 box-sizing 属性。这里的意思是在设定的宽高中进行边框的绘制。

---

洗洗睡吧！