【CSS】过渡、动画和变换

1. 使用过渡

过渡效果一般是由浏览器直接改变元素的CSS属性实现的。例如，如果使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Example   title  > 
       style   type  ="text/css"  >  
        p   {   padding  :   5px  ;   border  :   medium double black  ;   background-color  :   lightgray  ;   font-family  :   sans-serif  ;  }    
        #banana   {   font-size  :   large  ;   border  :   medium solid green  ;  }  
        #banana:hover   {   font-size  :   x-large  ;   border  :   medium solid white  ;   background-color  :   #1fa6e6  ;   color  :   white  ;   padding  :   4px  ;  }   
       style  > 
   head  > 
   body  > 
           p  >  
            There are lots of different kinds of fruit - there are over 500 varieties of       span   id  ="banana"  > banana   span  >     alone.
            By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.
            p  > 
   div  > 
   body  > 
   html  >  

查看更多关于【CSS】过渡、动画和变换的详细内容...