CSS3的自定義動畫幀

css3新增的動畫幀非常絢麗，可以簡單實現一些動畫效果，目前除ie外各大主流瀏覽器都支援

本文演示三個：transform: scale3d(x, y, z)-縮放;、transform: translate3d(x, y, z)-位移;、transform:rotatex/y(?deg)-旋轉;

@keyframes 動畫名{}

@-處理相容性-keyframes

animation: expand 0.6s ease-out infinite;[動畫名 動畫執行時間 動畫速度 動畫次數]
-處理相容-animation:

<

html 
lang
="en"
><
head
>
<
meta 
charset
="utf-8"
>
<
title
>css3
title
>
<
link 
rel="stylesheet"
href
="index.css"
>
head
>
<
body
>
<
div 
class
="parent"
>
<
div 
class
="main"
>
div>
<
div 
class
="d2"
>
div>
<
div 
class
="d3"
>a
div>
div>
body
>
html
>

html,body

/*方法二*/
body.parent.parent div.main.d2@keyframes bounce 25% 50% 75% 100% }
@-webkit-keyframes bounce 25% 50% 75% 100% }
@-moz-keyframes bounce 25% 50% 75% 100% }
@-o-keyframes bounce 25% 50% 75% 100% }
@keyframes expand 25% 50% 75% 100% }
@-webkit-keyframes expand 25% 50% 75% 100% }
@-moz-keyframes expand 25% 50% 75% 100% }
@-o-keyframes expand 25% 50% 75% 100% }
/*transform:rotate3d(x,y,z,deg);
*//*
transform:rotate3d(1，1,0,45deg);
*/.d3@-o-keyframes move50%75%100%}
@-moz-keyframes move50%75%100%}
@-webkit-keyframes move50%75%100%}
@keyframes move50%75%100%}

更多專業前端知識，請上

【猿2048】www.mk2048.com

css3的幀動畫

前幾天剛好看到乙個用了css3幀動畫的頁面，對它非常感興趣，就研究了一下，記錄在下面，供以後開發時參考，相信對其他人也有用。ps 以後別人問我用過什麼css3屬性的時候，我也可以不用說常見的animation，transform這些了，我可以說幀動畫這個高大上的術語了哈哈。本篇文章參考了 css3 ...

css3 逐幀動畫

animation timing function，規定動畫的運動曲線，這裡有9個值，分別是ease linear ease in ease out ease in out step start step end steps start end cubic bezier x1,y1,x2,y2 說說...

CSS3自定義字型

原文摘自 總節 1 定義字型標準格式 1 font face yourwebfontname 字型名稱 url yourwebfontname.eot 字型在伺服器上的相對路徑或絕對路徑 要求盡可能的上傳ttf eot woff svg字型，並顯示表明相應格式，比如 format embedded ...