Template:CSS/newpage
From 2014.igem.org
(Difference between revisions)
Line 322: | Line 322: | ||
filter: none; | filter: none; | ||
} | } | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background: #d23333; | ||
+ | overflow: hidden; | ||
+ | -webkit-filter: url("#goo"); | ||
+ | filter: url("#goo"); | ||
+ | } | ||
+ | |||
+ | footer { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | height: 50vh; | ||
+ | background: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .bubble { | ||
+ | position: absolute; | ||
+ | top: 52vh; | ||
+ | left: 45%; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | background: #fff; | ||
+ | border-radius: 50%; | ||
+ | -webkit-animation: loader 1.3s ease-in-out infinite; | ||
+ | animation: loader 1.3s ease-in-out infinite; | ||
+ | } | ||
+ | .bubble:nth-child(2) { | ||
+ | left: 50%; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | -webkit-animation: loader 2.6s ease-in-out infinite; | ||
+ | animation: loader 2.6s ease-in-out infinite; | ||
+ | } | ||
+ | |||
+ | .bubble:nth-child(3) { | ||
+ | left: 55%; | ||
+ | -webkit-animation: loader 1.3s ease-in-out infinite; | ||
+ | animation: loader 1.3s ease-in-out infinite; | ||
+ | } | ||
+ | |||
+ | @keyframes loader { | ||
+ | 0% { | ||
+ | -webkit-transform: translate(0, 0); | ||
+ | transform: translate(0, 0); | ||
+ | } | ||
+ | 50% { | ||
+ | -webkit-transform: translate(0, -100px); | ||
+ | transform: translate(0, -100px); | ||
+ | } | ||
+ | |||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 06:15, 9 June 2015