css3動畫與動效 按鈕元素動畫效果

css3動畫與動效

1.按鈕元素動畫效果

例：滑鼠移到鏈結上從白色慢慢過渡到黑色-----運用transition：all .5s;當超連結元素中任何屬性發生變化，都以動畫形式呈現，動畫的時間為0.5s;

this is a link

a

a:hover

transition:

color 5.5s linear,background .5s ease-in-out; 為文字和背景動畫設定不同的時間和速度曲線，文字時間動畫時間為5.5s,速度曲線為linear，背景動畫時長為0.5秒，速度曲線為ease-in-out;

transition:color .5s linear,background .5s ease-in-out 1s;文字顏色已經完全改變後，背景顏色還未發生變化，直至1秒後背景顏色才突然發生變化；

使用after偽元素，連線前用圖示修飾：

先將字型font檔案放到與網頁同一級目錄；

使用@font-face來宣告一種自定義字型

icon-font；

@font-face

a::after

為滑鼠滑過狀態建立相應樣式屬性：使滑鼠滑過圖示顯示在按鈕右側；

a:hover::after

總結：以上例子將連線修飾偽按鈕形狀，然後設定了文字和背景漸變，又使用了圖示修飾連線的文字，使滑鼠移上去，文字和背景顏色漸變，然後圖示從左側滑過右側；

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

css3新動 css3新增動畫

1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...

css3裡的動畫元素

相信學習了html的同學對動畫元素一定是不陌生了。那我們今天就來了解了解動畫元素的一些基本概念 動畫元素的屬性是 animation 這個動畫元素與我們學習的位移元素又有些相似的地方，但是他們又不盡相同。那我們就來看看他們的相同點和不同點都有哪些 animation vs transtion 位移 ...