Skip to content

2048
2048

黛琳ghz / 2048
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
2048
2048
提交 837ca51b 编写于 作者: S sigod
浏览文件
操作

Merge pull request #233 from sigod/ie9-styles 

fix styles for IE9: add -ms-transform
上级 0ce1da5e cbd3055a
显示空白变更内容
内联 并排
Showing with 48 addition and 0 deletion
style/helpers.scss
浏览文件 @ 837ca51b
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
@mixin transform($args...) { @mixin transform($args...) {
-webkit-transform: $args; -webkit-transform: $args;
-moz-transform: $args; -moz-transform: $args;
-ms-transform: $args;
transform: $args; transform: $args;
} }
......
style/main.css
浏览文件 @ 837ca51b
...@@ -235,66 +235,82 @@ hr { ...@@ -235,66 +235,82 @@ hr {
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px); } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px); -webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px); -moz-transform: translate(0px, 121px);
-ms-transform: translate(0px, 121px);
transform: translate(0px, 121px); } transform: translate(0px, 121px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px); -webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px); -moz-transform: translate(0px, 242px);
-ms-transform: translate(0px, 242px);
transform: translate(0px, 242px); } transform: translate(0px, 242px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px); -webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px); -moz-transform: translate(0px, 363px);
-ms-transform: translate(0px, 363px);
transform: translate(0px, 363px); } transform: translate(0px, 363px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px); -webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px); -moz-transform: translate(121px, 0px);
-ms-transform: translate(121px, 0px);
transform: translate(121px, 0px); } transform: translate(121px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px); -webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px); -moz-transform: translate(121px, 121px);
-ms-transform: translate(121px, 121px);
transform: translate(121px, 121px); } transform: translate(121px, 121px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px); -webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px); -moz-transform: translate(121px, 242px);
-ms-transform: translate(121px, 242px);
transform: translate(121px, 242px); } transform: translate(121px, 242px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px); -webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px); -moz-transform: translate(121px, 363px);
-ms-transform: translate(121px, 363px);
transform: translate(121px, 363px); } transform: translate(121px, 363px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px); -webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px); -moz-transform: translate(242px, 0px);
-ms-transform: translate(242px, 0px);
transform: translate(242px, 0px); } transform: translate(242px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px); -webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px); -moz-transform: translate(242px, 121px);
-ms-transform: translate(242px, 121px);
transform: translate(242px, 121px); } transform: translate(242px, 121px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px); -webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px); -moz-transform: translate(242px, 242px);
-ms-transform: translate(242px, 242px);
transform: translate(242px, 242px); } transform: translate(242px, 242px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px); -webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px); -moz-transform: translate(242px, 363px);
-ms-transform: translate(242px, 363px);
transform: translate(242px, 363px); } transform: translate(242px, 363px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px); -webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px); -moz-transform: translate(363px, 0px);
-ms-transform: translate(363px, 0px);
transform: translate(363px, 0px); } transform: translate(363px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px); -webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px); -moz-transform: translate(363px, 121px);
-ms-transform: translate(363px, 121px);
transform: translate(363px, 121px); } transform: translate(363px, 121px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px); -webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px); -moz-transform: translate(363px, 242px);
-ms-transform: translate(363px, 242px);
transform: translate(363px, 242px); } transform: translate(363px, 242px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px); -webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px); -moz-transform: translate(363px, 363px);
-ms-transform: translate(363px, 363px);
transform: translate(363px, 363px); } transform: translate(363px, 363px); }
.tile { .tile {
...@@ -383,36 +399,42 @@ hr { ...@@ -383,36 +399,42 @@ hr {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
.tile-new .tile-inner { .tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
...@@ -426,46 +448,55 @@ hr { ...@@ -426,46 +448,55 @@ hr {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); -moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); } transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
.tile-merged .tile-inner { .tile-merged .tile-inner {
z-index: 20; z-index: 20;
...@@ -637,66 +668,82 @@ hr { ...@@ -637,66 +668,82 @@ hr {
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px); } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px); -webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px); -moz-transform: translate(0px, 67px);
-ms-transform: translate(0px, 67px);
transform: translate(0px, 67px); } transform: translate(0px, 67px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px); -webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px); -moz-transform: translate(0px, 135px);
-ms-transform: translate(0px, 135px);
transform: translate(0px, 135px); } transform: translate(0px, 135px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px); -webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px); -moz-transform: translate(0px, 202px);
-ms-transform: translate(0px, 202px);
transform: translate(0px, 202px); } transform: translate(0px, 202px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px); -webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px); -moz-transform: translate(67px, 0px);
-ms-transform: translate(67px, 0px);
transform: translate(67px, 0px); } transform: translate(67px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
-webkit-transform: translate(67px, 67px); -webkit-transform: translate(67px, 67px);
-moz-transform: translate(67px, 67px); -moz-transform: translate(67px, 67px);
-ms-transform: translate(67px, 67px);
transform: translate(67px, 67px); } transform: translate(67px, 67px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
-webkit-transform: translate(67px, 135px); -webkit-transform: translate(67px, 135px);
-moz-transform: translate(67px, 135px); -moz-transform: translate(67px, 135px);
-ms-transform: translate(67px, 135px);
transform: translate(67px, 135px); } transform: translate(67px, 135px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
-webkit-transform: translate(67px, 202px); -webkit-transform: translate(67px, 202px);
-moz-transform: translate(67px, 202px); -moz-transform: translate(67px, 202px);
-ms-transform: translate(67px, 202px);
transform: translate(67px, 202px); } transform: translate(67px, 202px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
-webkit-transform: translate(135px, 0px); -webkit-transform: translate(135px, 0px);
-moz-transform: translate(135px, 0px); -moz-transform: translate(135px, 0px);
-ms-transform: translate(135px, 0px);
transform: translate(135px, 0px); } transform: translate(135px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
-webkit-transform: translate(135px, 67px); -webkit-transform: translate(135px, 67px);
-moz-transform: translate(135px, 67px); -moz-transform: translate(135px, 67px);
-ms-transform: translate(135px, 67px);
transform: translate(135px, 67px); } transform: translate(135px, 67px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
-webkit-transform: translate(135px, 135px); -webkit-transform: translate(135px, 135px);
-moz-transform: translate(135px, 135px); -moz-transform: translate(135px, 135px);
-ms-transform: translate(135px, 135px);
transform: translate(135px, 135px); } transform: translate(135px, 135px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
-webkit-transform: translate(135px, 202px); -webkit-transform: translate(135px, 202px);
-moz-transform: translate(135px, 202px); -moz-transform: translate(135px, 202px);
-ms-transform: translate(135px, 202px);
transform: translate(135px, 202px); } transform: translate(135px, 202px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
-webkit-transform: translate(202px, 0px); -webkit-transform: translate(202px, 0px);
-moz-transform: translate(202px, 0px); -moz-transform: translate(202px, 0px);
-ms-transform: translate(202px, 0px);
transform: translate(202px, 0px); } transform: translate(202px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
-webkit-transform: translate(202px, 67px); -webkit-transform: translate(202px, 67px);
-moz-transform: translate(202px, 67px); -moz-transform: translate(202px, 67px);
-ms-transform: translate(202px, 67px);
transform: translate(202px, 67px); } transform: translate(202px, 67px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
-webkit-transform: translate(202px, 135px); -webkit-transform: translate(202px, 135px);
-moz-transform: translate(202px, 135px); -moz-transform: translate(202px, 135px);
-ms-transform: translate(202px, 135px);
transform: translate(202px, 135px); } transform: translate(202px, 135px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
-webkit-transform: translate(202px, 202px); -webkit-transform: translate(202px, 202px);
-moz-transform: translate(202px, 202px); -moz-transform: translate(202px, 202px);
-ms-transform: translate(202px, 202px);
transform: translate(202px, 202px); } transform: translate(202px, 202px); }
.tile .tile-inner { .tile .tile-inner {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或