<noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

    <noframes id="5hjpd">

    <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
      <noframes id="5hjpd">
      <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
      <del id="5hjpd"><big id="5hjpd"></big></del>
      <track id="5hjpd"></track>

      一、CSS3動畫庫 Animatable

      什么是css3動畫?

      通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

      CSS3帶來了圓角,半透明,陰影,漸變,多背景圖等新的特征,輕松實現了設計稿中常見的圖層樣式,用簡潔的代碼替代圖片,代替了多余的空標簽。

      現成的CSS3動畫庫:http://leaverou.github.io/animatable/

      background-color

      .background-color { background:#708090; animation:1s ease 0s alternate none infinite background-color;}
      @keyframes background-color{
          from{ background:#708090;}
          to{ background:#000;}
      }
      
      1

      background-position

      background-position 屬性設置背景圖像的起始位置,默認值:0% 0%,效果等同于left top

      范例一:

      .background-position-1 { background-image: -moz-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;}
      @keyframes background-position-1{
        from{ background-position:0 0;}
        to{ background-position:100% 100%;}
      }
      
      1

      范例二:

      .background-position-2 { background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(-45deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;}
      @keyframes background-position-2{
        from{ background-position:3px 0, 3px 0, 15px -150px, 15px -150px;}
        to{ background-position:3px -70px, 3px -70px, 15px -80px, 15px -80px;}
      }
      
      1

      background-size

      background-size 屬性規定背景圖片的尺寸。在 CSS3 之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在CSS3中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重復使用背景圖片。

      .background-size {background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center; animation:1s ease 0s alternate none infinite background-size;}
      @keyframes background-size{
          from{ background-size:5px 5px;}
          to{ background-size:150px 150px;}
      }
      
      1

      border-radius

      border-radius 屬性是一個簡寫屬性,用于設置四個 border-*-radius 屬性。

      范例一

      .border-radius-1 { animation:1s ease 0s alternate none infinite border-radius-1;}
      @keyframes border-radius-1{
        from{ border-radius:0;}
        to{ border-radius:50%;}
      }
      
      1

      范例二

      .border-radius-2 { animation:1s ease 0s alternate none infinite border-radius-2;}
      @keyframes border-radius-2{
        from{ border-radius:0 100%;}
        to{ border-radius:100% 0;}
      }
      
      1

      border-width

      范例一

      .border-width-1 {border-style:solid; border-color: black; animation:1s ease 0s alternate none infinite border-width-1;}
      @keyframes border-width-1{
          from{ border-width:0;}
          to{ border-width:75px;}
      }
      
      1

      范例二

      .border-width-2 {border-style:dashed; border-color: black; animation:1s ease 0s alternate none infinite border-width-2;}
      @keyframes border-width-2{
          from{ border-width:0;}
          to{ border-width:35px;}
      }
      
      1

      范例三

      .border-width-3 {border-style:double; border-color: black; animation:1s ease 0s alternate none infinite border-width-3;}
      @keyframes border-width-3{
          from{ border-width:0;}
          to{ border-width:75px;}
      }
      
      1

      box-shadow

      box-shadow 屬性向框添加一個或多個陰影

      范例一

      .box-shadow-1 { animation:1s ease 0s alternate none infinite box-shadow-1;}
      @keyframes box-shadow-1{
          from{ box-shadow:0 0 black;}
          to{ box-shadow:0 150px 10px -50px rgba(0,0,0,.5);}
      }
      
      1

      范例二

      .box-shadow-2 { animation:1s ease 0s alternate none infinite box-shadow-2;}
      @keyframes box-shadow-2{
          from{ box-shadow:none;}
          to{ box-shadow:inset -75px -75px 400px #000;}
      }
      
      1

      范例三

      .box-shadow-3 { box-radius: 1px; animation:1s ease 0s alternate none infinite box-shadow-3;}
      @keyframes box-shadow-3{
          from{ box-shadow:inset 0 0 75px 75px slategray, 0 0 0 slategray;}
          to{ box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;}
      }
      
      1

      color

      CSS3 Color屬性在傳統的hex和RGB值中增加了HSL特性,也就是增加了Opacity(透明度)和Alpha channels

      .color { animation:1s ease 0s alternate none infinite color;}
      @keyframes color{
          from{ color:white;}
          to{ color:black;}
      }
      
      1

      font-size

      .font-size { animation:1s ease 0s alternate none infinite font-size;}
      @keyframes font-size{
          from{ font-size:60px;}
          to{ font-size:300px;}
      }
      
      1

      width

      .width { animation:1s ease 0s alternate none infinite width;}
      @keyframes width{
          from{ width:150px;}
          to{ width:330px;}
      }  
      

      height

      .height { animation:1s ease 0s alternate none infinite height;}
      @keyframes height{
          from{ height:150px;}
          to{ height:0;}
      }  
      

      letter-spacing

      .letter-spacing { animation:1s ease 0s alternate none infinite letter-spacing;}
      @keyframes letter-spacing{
          from{ letter-spacing:0;}
          to{ letter-spacing:100px;}
      }  
      
      1

      line-height

      .line-height { animation:1s ease 0s alternate none infinite line-height;}
      @keyframes line-height{
          from{ line-height:10px;}
          to{ line-height:300px;}
      }  
      
      1

      opacity

      .opacity { animation:1s ease 0s alternate none infinite opacity;}
      @keyframes opacity{
          from{ opacity:1;}
          to{ opacity:0;}
      }  
      
      1

      outline-width

      .outline-width { outline-color:black; outline-style: solid; animation:1s ease 0s alternate none infinite outline-width;}
      @keyframes outline-width{
          from{ outline-width:0;}
          to{ outline-width:100px;}
      } 
      
      1

      outline-offset

      .outline-offset { outline-style: dashed; outline-color:slategray; animation:1s ease 0s alternate none infinite outline-offset;}
      @keyframes outline-offset{
          from{ outline-offset:-5px;}
          to{ outline-offset:30px;}
      }
      
      1

      outline-color

      .outline-color { outline-width: 30px; outline-style: solid; animation:1s ease 0s alternate none infinite outline-color;}
      @keyframes outline-color{
          from{ outline-color:transparent;}
          to{ outline-color:red;}
      }   
      
      1

      padding

      .padding { animation:1s ease 0s alternate none infinite padding;}
      @keyframes padding{
          from{ padding:0;}
          to{ padding:0 200px 0 50px;}
      }   
      

      text-indent

      .text-indent { animation:1s ease 0s alternate none infinite text-indent;}
      @keyframes text-indent{
          from{ text-indent:0;}
          to{ text-indent:100px;}
      }  
      
      1

      text-shadow

      范例一

      .text-shadow-1 { animation:1s ease 0s alternate none infinite text-shadow-1;}
      @keyframes text-shadow-1{
          from{ text-shadow:0 0 black;}
          to{ text-shadow:20px 20px 10px rgba(0,0,0,.5);}
      }  
      
      1

      范例二

      .text-shadow-2 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-2;}
      @keyframes text-shadow-2{
          from{ text-shadow:0 0 0 white;}
          to{ text-shadow:0 0 10px white;}
      }
      
      1

      范例三

      .text-shadow-3 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-3;}
      @keyframes text-shadow-3{
          from{ text-shadow:0 0 white;}
          to{ text-shadow:0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;}
      } 
      
      1

      top

      .top { position:relative; animation:1s ease 0s alternate none infinite top;}
      @keyframes top{
          from{ top:0;}
          to{ top:100px;}
      }
      
      1

      transform

      范例一

      .transform-1 { animation:1s ease 0s alternate none infinite transform-1;}
      @keyframes transform-1{
          from{ transform:rotate(0deg);}
          to{ transform:rotate(360deg);}
      }
      
      1

      范例二

      .transform-2 { animation:1s ease 0s alternate none infinite transform-2;}
      @keyframes transform-2{
          from{ transform:scale(1);}
          to{ transform:scale(2);}
      }
      
      1

      范例三

      .transform-3 { animation:1s ease 0s alternate none infinite transform-3;}
      @keyframes transform-3{
          from{ transform:skew(0);}
          to{ transform:skew(180deg);}
      }
      
      1

      范例四

      .transform-4 { animation:1s ease 0s alternate none infinite transform-4;}
      @keyframes transform-4{
          from{ transform:rotate(0) scale(1);}
          to{ transform:rotate(360deg) scale(0);}
      }
      
      1

      范例五

      .transform-5 { animation:1s ease 0s alternate none infinite transform-5;}
      @keyframes transform-5{
          from{ transform:perspective(400px) rotateY(0);}
          to{ transform:perspective(400px) rotateY(360deg);}
      }
      
      1

      范例六

      .transform-6 { animation:1s ease 0s alternate none infinite transform-6;}
      @keyframes transform-6{
          from{ transform:perspective(400px) rotateX(0);}
          to{ transform:perspective(400px) rotateX(360deg);}
      }
      
      1

      范例七

      .transform-7 { animation:1s ease 0s alternate none infinite transform-7;}
      @keyframes transform-7{
          from{ transform:perspective(400px) rotateY(0);}
          to{ transform:perspective(400px) translateZ(150px) rotateY(180deg);}
      }
      
      1

      范例八

      .transform-8 { animation:1s ease 0s alternate none infinite transform-8;}
      @keyframes transform-8{
          from{ transform:perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);}
          to{ transform:perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);}
      }
      
      1

      范例九

      .transform-9 { animation:1s ease 0s alternate none infinite transform-9;}
      @keyframes transform-9{
          from{ transform:perspective(400px) rotate3d(.5,.5,0,0deg);}
          to{ transform:perspective(400px) rotate3d(.5,.5,0,180deg);}
      }
      
      1

      范例十

      .transform-10 {transform-origin: 100% 50%; animation:1s ease 0s alternate none infinite transform-10;}
      @keyframes transform-10{
          from{ transform:perspective(400px) rotate3d(0,1,0,0deg);}
          to{ transform:perspective(400px) rotate3d(0,1,0,-180deg);}
      }
      
      1

      范例十一

      .transform-origin {transform:rotate(45deg); animation:1s ease 0s alternate none infinite transform-origin;}
      @keyframes transform-origin{
          from{ transform-origin:50% 50%;}
          to{ transform-origin:0 100%;}
      }
      
      1

      二、CSS3動畫詳解

      1、變形&過渡

      2D變形&過渡

      旋轉:設定旋轉角度,對應css:transform:rotate(ndeg) (工具里n為-360 – 360間的任意數值)

      X軸縮放:設定X軸方向縮放,對應css: transform:scaleX(n)(工具里n為-5 – 5間的任意數值)

      Y軸縮放:設定Y軸方向縮放,對應css: transform:scaleY(n)(工具里n為-5 – 5間的任意數值)

      X軸位移:設定X軸位移,對應css:transform:translateX(npx)

      Y軸位移:設定Y軸位移,對應css:transform:translateY(npx)

      X軸傾斜:設定X軸傾斜,對應css:transform:skewX(ndeg)

      Y軸傾斜:設定Y軸傾斜,對應css:transform:skewY(ndeg)

      矩陣變形:設定矩陣變形,對應css:transform:matrix(a,c,e,b,d,f) c,e值用正弦或余弦值表示,ab為縮放值,df為位移值

      變形原點 :設定變形原點,對應css:transform-origin:X Y;transform-origin(X,Y):用來設置元素的運動的基點(參照點)。默認點是元素的中心點。其中X和Y的值可以是百分 值,em,px,其中X也可以是字符參數值left,center,right;Y和X一樣除了百分值外還可以設置字符值 top,center,bottom,這個看上去有點像我們background-position設置一樣;下面我列出他們相對應的寫法:

      1. top left | left top 等價于 0 0 | 0% 0%
      2. top | top center | center top 等價于 50% 0
      3. right top | top right 等價于 100% 0
      4. left | left center | center left 等價于 0 50% | 0% 50%
      5. center | center center 等價于 50% 50%(默認值)
      6. right | right center | center right 等價于 100% 50%
      7. bottom left | left bottom 等價于 0 100% | 0% 100%
      8. bottom | bottom center | center bottom 等價于 50% 100%
      9. bottom right | right bottom 等價于 100% 100%

      其中 left,center right是水平方向取值,對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一個值,表示垂直方向值不變

      過渡屬性:執行變換的css屬性,語法:transition-property

      延遲時間:指定元素 轉換過程的持續時間,語法:transition-duration

      過渡效果:允許你根據時間的推進去改變屬性值的變換速率,語法:transition-timing-function。點擊對應按鈕添加過渡效果,點擊cubic-bezier()自定義立方貝塞爾曲線效果。

      3D變形&過渡

      透視:perspective有兩種寫法,一種是設置所有的子元素有一個共同的透視值,perspective作為一個屬性值來寫;一種是直接作用于元素本身,perspective作為transform的一個函數來寫如:
      .wrap{-webkit-perspective:1000px;}
      .wrap .child{-webkit-transform:perspective(1000px);}

      X軸旋轉: rotateX(angele),相當于rotate3d(1,0,0,angle)指定在3維空間內的X軸旋轉,語法:transform:perspective(length) rotateX(angele);

      Y軸旋轉: rotateY(angele),相當于rotate3d(0,1,0,angle)指定在3維空間內的Y軸旋轉,語法:transform:perspective(length) rotateY(angele);

      Z軸旋轉: rotateZ(angele),相當于rotate3d(0,0,1,angle)指定在3維空間內的Z軸旋轉,語法:transform:perspective(length) rotateZ(angele);

      X軸縮放:scaleX():表示只在X軸(水平方向)縮放元素。

      Y軸縮放:scaleY():表示只在Y軸(垂直方向)縮放元素。

      Z軸縮放:scaleZ():表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值

      X軸位移: : 表示只在X軸(水平方向)移動元素。語法:translateX();

      Y軸位移: 表示只在Y軸(水平方向)移動元素。語法:translateY();

      Z軸位移: 表示只在Z軸(水平方向)移動元素。語法:translateZ();

      X軸傾斜:設定X軸傾斜,對應css:transform:skewX(ndeg)

      Y軸傾斜: :設定Y軸傾斜,對應css:transform:skewY(ndeg)

      變形原點: 同2D

      過渡屬性: 同2D

      過渡時間: 同2D

      延遲時間: 同2D

      過渡效果: 同2D

      2、自定義動畫

      動畫名稱:自定義動畫的名稱, 對應css:animation-name:

      執行時間:指定對象動畫的持續時間,對應css: animation-duration:

      延遲執行設置動畫延遲執行的時間,對應css: animation-delay:

      執行次數:設置對象動畫的循環次數,對應css: animation-iteration-count:或infinite(無限循環)

      變形原點:同變形&過渡

      過渡效果:允許你根據時間的推進去改變屬性值的變換速率,語法:animation-timing-function。點擊對應按鈕添加過渡效果,點擊cubic-bezier()自定義立方貝塞爾曲線效果。

      播放方向::設置對象動畫循環播放次數大于1次時,動畫是否反向運動。語法:animation-direction:,normal:正常方向,reverse:動畫反向運行(FF14.0.1以下不支持),alternate:動畫會循環正反方向交替運動,alternate-reverse:動畫從反向開始,再正反方向交替運動,運動方向始終與alternate定義的相反。(FF14.0.1以下不支持)

      隱藏背景:設置對象動畫時間之外的狀態。語法:animation-fill-mode:, none:默認值。不設置對象動畫之外的狀態;forwards:結束后保持動畫結束時的狀態,但當animation-direction為0,則動畫不執行,持續保持動畫開始時的狀態;backwards:結束后返回動畫開始時的狀態;both:結束后可遵循forwards和backwards兩個規則。

      動畫狀態設置對象動畫的狀態,語法:animation-play-state:, running:默認值。運動;paused:暫停。

      執行動畫的屬性: 設置動畫過程中對象屬性

      3、動畫庫

      Animate.css的動畫庫。Animate.css是由Dan Eden制作的CSS3動畫效果合集。只要在頁面引入該樣式表,然后給要添加動作的元素中添加對應動畫的class即可。

      點擊對應效果右側查看實例,點擊查看代碼可直接查看對應效果的源碼。

      三、運用CSS3的頁面案例

      1、純CSS3實現質感發光動畫按鈕
      2、10大經典CSS3菜單應用欣賞
      3、9種CSS3炫酷圖片預覽展示動畫特效
      4、純CSS3炫酷3D旋轉立方體爆炸展開動畫特效

      CSS3工具介紹

      cssanimate

      CSS3可以實現很多漂亮的動畫,但寫起來有點麻煩,一個動畫有時候會調整幾十分鐘,改一點點代碼又要到瀏覽器上刷新,這是個很討厭的事情。幸運的是,cssanimate在線工具解決了我們的問題,最大特色就是以圖形界面方式讓你輕易實現漂亮的CSS3動畫效果,下面一起看看這個在線工具的介紹。

      Timeline(時間軸)

      Timeline是引導動畫的重要區域,就像制作逐幀動畫一樣,可以調整每幀的內容。用戶調整完畢后,直接點擊左下角的播放按鈕即可看到效果。

      視區

      視區就是CSS3動畫預覽和調整區域,所見即所得,很強大。

      屬性面板

      用于調整動畫細節參數,可以對關鍵幀進行更精細的調整,如時間、旋轉、重復次數等。

      Code面板

      當你調整完動畫后,那么就在這里直接COPY到你的網頁上就能使用了,另外你還可以修改Class和Animation名稱,還有瀏覽器前綴選項,根據需求調整。

      總結

      這確實是一個很方便的CSS3動畫在線制作工具,即使對CSS代碼不太了解的設計師們也可以輕松實現一個漂亮的動畫效果出來。

      工具名稱:cssanimate

      網站地址:http://cssanimate.com/

      AniCollection

      CSS動畫實現比JS簡單很多,但是對于新手來說還是很多代碼的,而且還要不停的刷新來計算動畫效果,不過沒關系,接下來將為大家分享一個可以在線生成CSS動畫的工具:AniCollection,而且他們的動畫數量很多,能滿足一般需要求了。目前AniCollection上有很多不錯的動畫特效,比較適用于鼠標HOVER或點擊事件,最主要的是能直接在線生成,比較簡便。

      使用方法

      STEP 1: 選擇你要的動畫效果,點擊“眼睛”圖標。

      STEP 2: 然后在下面通過下面TAG選項框,把CSS和HTML的代碼復制到你的網頁上即可。

      此外你還要以用jQuery來控制動畫。

      工具名稱:AniCollection

      官方網站:http://anicollection.github.io

      欧美精品久久久久久久自慰

      <noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

        <noframes id="5hjpd">

        <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
          <noframes id="5hjpd">
          <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
          <del id="5hjpd"><big id="5hjpd"></big></del>
          <track id="5hjpd"></track>