Advertisement
Ensikology

shark

Dec 10th, 2018
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.55 KB | None | 0 0
  1. body {padding: 0;margin: 0;font-family: "Fira Sans", sans-serif;max-height: 100%;height: 100%;overflow: hidden;}#bg {background-color: #005ec7;min-height: 100%;width: 100%;position: absolute;}h1,h2 {margin: 5px;}h1 {font-size: 12px;}h2 {font-size: 10px;}@media (max-width: 980px) {h1 {font-size: 12px;}h2 {font-size: 10px;}}#link {display: flex;align-self: flex-end;justify-self: flex-end;margin-left: auto;flex-flow: column;z-index: 100;}#link a {text-decoration: none;color: #fff;}.wave {position: absolute;width: 100%;height: 100%;bottom: 0;overflow: hidden;}.parallax > use {/*performance issues*/perspective: 1000;will-change: transform;backface-visibility: hidden;animation: flow 2s linear infinite;}@keyframes flow {0% {transform: translate(140px, 0%);}100% {transform: translate(-35px, 0%);}}.vawes {display: block;width: 100%;height: 10em;max-height: 100vh;margin: 0;}#shark-container {position: absolute;height: 100%;width: 100%;display: flex;flex-flow: row;justify-content: center;align-items: center;}#sharky {display: flex;position: absolute;width: 100%;}#layer12 {pperspective: 1000;will-change: transform;backface-visibility: hidden;transform-origin: right;animation: tail-swim 2s ease-in-out infinite;}@keyframes tail-swim {0% {transform: rotateY(-10deg);}50% {transform: rotateY(10deg);}100% {transform: rotateY(-10deg);}}#layer1 {perspective: 1000;will-change: transform;transform-origin: center;backface-visibility: hidden;animation: fin-swim 2s ease-in-out infinite;}@keyframes fin-swim {0% {transform: rotateZ(5deg);}50% {transform: rotateZ(0deg);}100% {transform: rotateZ(5deg);}}#path4561,#path4567 {perspective: 1000;backface-visibility: hidden;will-change: transform;animation: eye-move 2s ease-in-out infinite;}@keyframes eye-move {50% {transform: translateX(-10px);}}#path4569 {perspective: 1000;backface-visibility: hidden;will-change: transform;animation: eye-move-2 2s ease-in-out infinite;}@keyframes eye-move-2 {50% {transform: translateX(-5px);}}#layer7 {perspective: 1000;backface-visibility: hidden;will-change: transform;transform-origin: center;animation: gills-move 2s linear infinite;}@keyframes gills-move {50% {transform: translateX(-3px) scale(1.01);}}#layer8 {perspective: 1000;backface-visibility: hidden;will-change: transform;transform-origin: right center;animation: lines-move 1s ease infinite;}#layer13 {perspective: 1000;backface-visibility: hidden;opacity: 0;will-change: transform;transform-origin: right center;animation: lines-move 1s ease infinite 0.5s;}@keyframes lines-move {0% {opacity: 1;}100% {transform: scaleX(1.2) translateX(20px);opacity: 0;}}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement