Indexcss3.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. @charset "utf-8";
  2. /* CSS Document */
  3. .Fillet
  4. {
  5. -moz-border-radius: 15px; /* Gecko browsers */
  6. -webkit-border-radius: 15px; /* Webkit browsers */
  7. border-radius:15px; /* W3C syntax */
  8. }
  9. .Rotation img
  10. {
  11. transition:All 0.4s ease-in-out;
  12. -webkit-transition:All 0.4s ease-in-out;
  13. -moz-transition:All 0.4s ease-in-out;
  14. -o-transition:All 0.4s ease-in-out;
  15. }
  16. .Rotation:hover img
  17. {
  18. transform:rotate(360deg);
  19. -webkit-transform:rotate(360deg);
  20. -moz-transform:rotate(360deg);
  21. -o-transform:rotate(360deg);
  22. -ms-transform:rotate(360deg);
  23. }
  24. .Amplification img
  25. {
  26. transition:400ms;
  27. filter: Alpha(Opacity=100);
  28. opacity: 1;
  29. }
  30. .Amplification:hover img
  31. {
  32. filter: Alpha(Opacity=80);
  33. opacity: 0.8;
  34. -webkit-transform:scale(1.14);
  35. transform:scale(1.14);
  36. }
  37. .Color_change img
  38. {
  39. -webkit-filter: grayscale(100%);
  40. -moz-filter: grayscale(100%);
  41. -ms-filter: grayscale(100%);
  42. -o-filter: grayscale(100%);
  43. filter: grayscale(100%);
  44. filter: gray;
  45. }
  46. .Color_change:hover img
  47. {
  48. -webkit-filter: grayscale(0%);
  49. -moz-filter: grayscale(0%);
  50. -ms-filter: grayscale(0%);
  51. -o-filter: grayscale(0%);
  52. filter: grayscale(0%);
  53. filter:;
  54. }
  55. .Animation_moveDown
  56. {
  57. -webkit-animation: moveDown 1s ease-in-out .2s backwards;
  58. -moz-animation: moveDown 1s ease-in-out .2s backwards;
  59. -ms-animation: moveDown 1s ease-in-out .2s backwards;
  60. -o-animation: moveDown 1s ease-in-out .2s backwards;
  61. animation: moveDown 1s ease-in-out .2s backwards;
  62. }
  63. @-webkit-keyframes moveDown {
  64. from {
  65. -webkit-transform: translateY(-100px);
  66. opacity: 0;
  67. }
  68. to {
  69. -webkit-transform: translateY(0);
  70. opacity: 1;
  71. }
  72. }
  73. @-moz-keyframes moveDown {
  74. from {
  75. -moz-transform: translateY(-100px);
  76. opacity: 0;
  77. }
  78. to {
  79. -moz-transform: translateY(0);
  80. opacity: 1;
  81. }
  82. }
  83. @keyframes moveDown {
  84. from {
  85. transform: translateY(-100px);
  86. opacity: 0;
  87. }
  88. to {
  89. transform: translateY(0);
  90. opacity: 1;
  91. }
  92. }
  93. @-ms-keyframes moveDown {
  94. from {
  95. -ms-transform: translateY(-100px);
  96. opacity: 0;
  97. }
  98. to {
  99. -ms-transform: translateY(0);
  100. opacity: 1;
  101. }
  102. }
  103. @-webkit-keyframes moveUp {
  104. from {
  105. -webkit-transform: translateY(100px);
  106. opacity: 0;
  107. }
  108. to {
  109. -webkit-transform: translateY(0);
  110. opacity: 1;
  111. }
  112. }
  113. @-moz-keyframes moveUp {
  114. from {
  115. -moz-transform: translateY(100px);
  116. opacity: 0;
  117. }
  118. to {
  119. -moz-transform: translateY(0);
  120. opacity: 1;
  121. }
  122. }
  123. @keyframes moveUp {
  124. from {
  125. transform: translateY(100px);
  126. opacity: 0;
  127. }
  128. to {
  129. transform: translateY(0);
  130. opacity: 1;
  131. }
  132. }
  133. @-ms-keyframes moveUp {
  134. from {
  135. -ms-transform: translateY(100px);
  136. opacity: 0;
  137. }
  138. to {
  139. -ms-transform: translateY(0);
  140. opacity: 1;
  141. }
  142. }
  143. @-webkit-keyframes moveLeft {
  144. from {
  145. -webkit-transform: translateX(-100px);
  146. opacity: 0;
  147. }
  148. to {
  149. -webkit-transform: translateX(0);
  150. opacity: 1;
  151. }
  152. }
  153. @-moz-keyframes moveLeft {
  154. from {
  155. -moz-transform: translateX(-100px);
  156. opacity: 0;
  157. }
  158. to {
  159. -moz-transform: translateX(0);
  160. opacity: 1;
  161. }
  162. }
  163. @keyframes moveLeft {
  164. from {
  165. transform: translateX(-100px);
  166. opacity: 0;
  167. }
  168. to {
  169. transform: translateX(0);
  170. opacity: 1;
  171. }
  172. }
  173. @-ms-keyframes moveLeft {
  174. from {
  175. -ms-transform: translateX(-100px);
  176. opacity: 0;
  177. }
  178. to {
  179. -ms-transform: translateX(0);
  180. opacity: 1;
  181. }
  182. }
  183. @-webkit-keyframes moveRight {
  184. from {
  185. -webkit-transform: translateX(100px);
  186. opacity: 0;
  187. }
  188. to {
  189. -webkit-transform: translateX(0);
  190. opacity: 1;
  191. }
  192. }
  193. @-moz-keyframes moveRight {
  194. from {
  195. -moz-transform: translateX(100px);
  196. opacity: 0;
  197. }
  198. to {
  199. -moz-transform: translateX(0);
  200. opacity: 1;
  201. }
  202. }
  203. @keyframes moveRight {
  204. from {
  205. transform: translateX(100px);
  206. opacity: 0;
  207. }
  208. to {
  209. transform: translateX(0);
  210. opacity: 1;
  211. }
  212. }
  213. @-ms-keyframes moveRight {
  214. from {
  215. -ms-transform: translateX(100px);
  216. opacity: 0;
  217. }
  218. to {
  219. -ms-transform: translateX(0);
  220. opacity: 1;
  221. }
  222. }
  223. .bgGradient{
  224. -webkit-transition: background-color 1s;
  225. -moz-transition:background-color 1s;
  226. -o-transition: background-color 1s;
  227. transition: background-color 1s;
  228. }