һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] CSS3򵥶Ч

[]
26033 happy175 2016-9-29 09:51:23
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ʵ

ʵһ

  1. @keyframes flash {
  2.             0%,
  3.             50%,
  4.             100% {
  5.                 opacity: 1;
  6.             }
  7.             25%,
  8.             75% {
  9.                 opacity: 0;
  10.             }
  11.         }
  12.         // "flash " classΪflashԪأʱ5 룺
  13.         .flash {
  14.             width: 100px;
  15.             height: 100px;
  16.             background: red;
  17.             animation: flash 5s;
  18.             -moz-animation: flash 5s;
  19.             /* Firefox */
  20.             -webkit-animation: flash 5s;
  21.             /* Safari and Chrome */
  22.             -o-animation: flash 5s;
  23.             /* Opera */
  24.             animation-name: flash;
  25.         }
ƴ


Ǻܼ򵥵css3ĶˡЧflashһ5¡ǵcssԪϱanimation-nameԪ֣дԪصʱ伴һ򵥵css

ʵ

  1. @keyframes bounce {
  2.             0%,
  3.             20%,
  4.             53%,
  5.             80%,
  6.             100% {
  7.                 transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  8.                 transform: translate3d(0, 0, 0);
  9.             }
  10.             40%,
  11.             43% {
  12.                 transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  13.                 transform: translate3d(0, -30px, 0);
  14.             }
  15.             70% {
  16.                 transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  17.                 transform: translate3d(0, -15px, 0);
  18.             }
  19.             90% {
  20.                 transform: translate3d(0, -4px, 0);
  21.             }
  22.         }

  23.         .bounce {
  24.             width: 100px;
  25.             height: 100px;
  26.             background: red;
  27.             animation: bounce 5s;
  28.             -moz-animation: bounce 5s;
  29.             /* Firefox */
  30.             -webkit-animation: bounce 5s;
  31.             /* Safari and Chrome */
  32.             -o-animation: bounce 5s;
  33.             /* Opera */
  34.             animation-name: bounce;
  35.             transform-origin: center bottom;
  36.         }
ƴ


ӣȽϵ͵cssõIJһcubic-bezierһ translate3d ҪŵӣôDZҪȥ˽һµġcssһӿ׹أȻڵϵΡ

CSS33Dתtranslate3d(x,y,z):﷨ṹ:translate3d(x,y,z)˼Ϳ֪1.x:ʾx᷽λơ 2.y:ʾy᷽λơ 3.z:ʾz᷽λơ

ľzķλˡʵ˵˾һŴСzԽôԪؽԽ

(cubic-bezier)ʵ򵥵˵ǿƶٶȣٽеlinearʽcubic-bezier(0.0, 0.0, 1.0, 1.0ĺ﷨ṹcubic-bezier(<x1>, <y1>, <x2>, <y2>)õ߳linearУ 1ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) 2 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) 3ease-out: cubic-bezier(0, 0, 0.58, 1.0) 4ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

ʵ

  1. //x360㷭ת
  2. @keyframes flipOutX {
  3.             0% {
  4.                 transform: perspective(400px);
  5.             }
  6.             30% {
  7.                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  8.                 opacity: 1;
  9.             }
  10.             100% {
  11.                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  12.                 opacity: 0;
  13.             }
  14.         }


  15.         .flipOutX {
  16.             width: 100px;
  17.             height: 100px;
  18.             background: red;
  19.             animation: flipOutX 5s;
  20.             -moz-animation: flipOutX 5s;
  21.             /* Firefox */
  22.             -webkit-animation: flipOutX 5s;
  23.             /* Safari and Chrome */
  24.             -o-animation: flipOutX 5s;
  25.             /* Opera */
  26.             animation-name: flipOutX;
  27.             animation-duration: .75s;
  28.             backface-visibility: visible !important;
  29.         }

  30. //y360㷭ת
  31. @keyframes flipOutY {
  32.             0% {
  33.                 transform: perspective(400px);
  34.             }
  35.             30% {
  36.                 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  37.                 opacity: 1;
  38.             }
  39.             100% {
  40.                 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  41.                 opacity: 0;
  42.             }
  43.         }

  44.         .flipOutY {
  45.             width: 100px;
  46.             height: 100px;
  47.             background: red;
  48.             animation: flipOutY 5s;
  49.             -moz-animation: flipOutY 5s;
  50.             /* Firefox */
  51.             -webkit-animation: flipOutY 5s;
  52.             /* Safari and Chrome */
  53.             -o-animation: flipOutY 5s;
  54.             /* Opera */
  55.             backface-visibility: visible !important;
  56.             animation-name: flipOutY;
  57.             animation-duration: .75s;
  58.         }
ƴ


ҲҪһµġһperspective Զ 3D Ԫؾͼľ룬ؼơı 3D Ԫز鿴 3D Ԫصͼ ΪԪض perspective ʱԪػ͸ЧԪرԣûʲôı䣬ԭҲ֪ˡ

ôҪԾ rotate3dˣ3dת﷨ṹǣx,y,z,deg,պһͿˡ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2016-12-10 11:19:00
| ʾȫ¥
2F
ܺã¥ô
ױʦƸ http://www.xszsz.com/
Ӱ¥ױ http://www.xszsz.com/
ϲױ仯ױѧУ http://www.xszsz.com/
ϲЩױѧУ http://www.xszsz.com/
õĻױѧУ http://www.xszsz.com/
ױ仯ױѧУ http://www.xszsz.com/
ױ㻯ױѧУ http://www.xszsz.com/
ϲױѵ http://www.xszsz.com/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2016-12-31 08:55:50
| ʾȫ¥
3F
вţ
ϲױѵ http://www.xszsz.com/
ϲݻױѵ http://www.xszsz.com/
ϲױѵ http://www.xszsz.com/
ϲױʦѵ http://www.xszsz.com/
ױʦѵ http://www.xszsz.com/
ϲױ仯ױѵѧУ http://www.xszsz.com/
ױѧУ http://www.xszsz.com/
ѧϰױ http://www.xszsz.com/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2017-9-22 05:07

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б