SHARE
TWEET

Untitled

a guest May 23rd, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
  2.  
  3. body {
  4.     background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
  5.     height: 100vh;
  6. }
  7.  
  8. h1 {
  9.     text-align: center;
  10.     color: #ffffff;
  11.     font-family: 'Josefin Sans', sans-serif;
  12. }
  13.  
  14. /*The fish tank*/
  15. div {
  16.     width: 500px;
  17.     height: 300px;
  18.     border: 10px solid #000;
  19.     margin: 0 auto;
  20.     background-size: cover;
  21.     background-repeat: no-repeat;
  22.     background-image: url("http://www.publicdomainpictures.net/pictures/20000/velka/aquarium-plants.jpg");
  23. }
  24.  
  25. img {
  26.     width: 100px;
  27.     display: block;
  28.     animation-timing-function: linear;
  29. }
  30.  
  31. /*Fish on the top*/
  32. #goldfish-1 {
  33.     margin-top: 30px;
  34.     animation: swim 5s infinite;
  35. }
  36.  
  37. /*Fish on the bottom*/
  38. #goldfish-2 {
  39.     margin-top: 80px;
  40.     animation: swim 7s infinite;
  41. }
  42.  
  43. #tilikum {
  44.   animation: swim 30s infinite;
  45. }
  46.  
  47. #jelly {
  48.   margin-top: -80px;
  49.   animation: swim 30s infinite;
  50. }
  51.  
  52. #jelly2 {
  53.   margin-top: -180px;
  54.   animation: swim2 5s infinite;
  55. }
  56.  
  57. /*Keyframes for both fish*/
  58. @keyframes swim {
  59.     0% {
  60.         margin-left: 0px;
  61.          transform: scaleX(-1);
  62.     }
  63.  
  64.     50% {
  65.         margin-left: 400px;
  66.         transform: scaleX(-1);
  67.     }
  68.  
  69.     75% {
  70.         margin-left: 400px;
  71.         transform: scaleX(1);
  72.     }
  73.  
  74.     100% {
  75.         margin-left: 0px;
  76.         transform: scaleX(1);
  77.     }
  78. }
  79.  
  80. /*FOR MOBILE VIEW ONLY, DON'T EDIT! - div and keyframes styles when viewed on mobile*/
  81. @media only screen and (max-width: 736px) and (orientation: portrait) {
  82.     div {
  83.         width: 90%;
  84.     }
  85.     @keyframes swim {
  86.         0% {
  87.             margin-left: 0px;
  88.             transform: scaleX(-1);
  89.         }
  90.         50% {
  91.             margin-left: 200px;
  92.             transform: scaleX(-1);
  93.         }
  94.         75% {
  95.             margin-left: 200px;
  96.             transform: scaleX(1);
  97.         }
  98.         100% {
  99.             margin-left: 0px;
  100.             transform: scaleX(1);
  101.         }
  102.     }
  103. }
  104.  
  105. @keyframes swim2 {
  106.   0% {
  107.     margin-top: -250px;
  108.     transform: scaleY(1);
  109.   }
  110.   50% {
  111.     margin-top: -80px;
  112.     transform: scaleY(1);
  113.     height: 50px;
  114.   }
  115.   75% {
  116.     margin-top: -80px;
  117.     transform: scaleY(1);
  118.     height: 50px;
  119.   }
  120.   100% {
  121.     margin-top: -250px;
  122.     transform: scaleY(1);
  123.   }
  124. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top