Creative CSS Animation Submarine

Creative CSS Animation Submarine

Animation, Css, Download Resources, HTML, Website No Comments on Creative CSS Animation Submarine
Creative CSS Animation Submarine

Gorgeous use of the circular port-hole shaped container gives this CSS-animated submarine a lot of charm.



Demo/Download

HTML

<div class="sea">
    <div class="circle-wrapper">
        <div class="bubble"></div>
        <div class="submarine-wrapper">
            <div class="submarine-body">
                <div class="window"></div>
                <div class="engine"></div>
                <div class="light"></div>
            </div>
            <div class="helix"></div>
            <div class="hat">
              <div class="leds-wrapper">
                  <div class="periscope"></div>
                  <div class="leds"></div>
              </div>
            </div>
        </div>
    </div>
</div>

CSS

#ajerez {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
}
#ajerez img {
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #7482A5;
  -webkit-transition: border-radius 0.2s ease-in-out;
  transition: border-radius 0.2s ease-in-out;
}
#ajerez img:hover {
  border-radius: 30%;
}

body {
  background-color: #306D85;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.sea {
  margin: 40px auto 0 auto;
  overflow: hidden;
}
.sea .bubble {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #6bafca;
  opacity: 0.9;
  -webkit-animation: bubble1-h-movement 1s ease-in infinite, bubble1-v-movement 300ms ease-in-out infinite alternate, bubble-scale-movement 300ms ease-in-out infinite alternate;
          animation: bubble1-h-movement 1s ease-in infinite, bubble1-v-movement 300ms ease-in-out infinite alternate, bubble-scale-movement 300ms ease-in-out infinite alternate;
}
.sea .bubble:after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #6bafca;
  opacity: 0.9;
}
.sea .bubble:after {
  top: -20;
  left: 100px;
  width: 9px;
  height: 9px;
}
.sea .circle-wrapper {
  position: relative;
  background: -webkit-linear-gradient(#2c647a, #204858);
  background: linear-gradient(#2c647a, #204858);
  width: 300px;
  height: 300px;
  margin: 10px auto 0 auto;
  overflow: hidden;
  z-index: 0;
  border-radius: 50%;
  padding: 0 50px 0 50px;
  border: 6px solid #3e8caa;
}
.sea .submarine-wrapper {
  height: 300px;
  width: 300px;
  padding: 30px 50px 30px 150px;
  margin: 0 auto 0 auto;
  -webkit-animation: diving 3s ease-in-out infinite, diving-rotate 3s ease-in-out infinite;
          animation: diving 3s ease-in-out infinite, diving-rotate 3s ease-in-out infinite;
}
.sea .submarine-wrapper .submarine-body {
  width: 150px;
  height: 80px;
  position: absolute;
  margin-top: 50px;
  left: 25px;
  background-color: #D93A54;
  border-radius: 40px;
  background: -webkit-linear-gradient(#D93A54, #bc243d);
  background: linear-gradient(#D93A54, #bc243d);
}
.sea .submarine-wrapper .submarine-body .light {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 150px 40px;
  border-color: transparent transparent #377c98 transparent;
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  top: 40px;
  left: 99%;
}
.sea .submarine-wrapper .submarine-body .light:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 13px;
  border-radius: 5px;
  background-color: #d12844;
  margin-left: -10px;
}
.sea .submarine-wrapper .submarine-body .window {
  width: 37px;
  height: 37px;
  position: absolute;
  margin-top: 23px;
  right: 18px;
  background: -webkit-linear-gradient(#1e4554, #183642);
  background: linear-gradient(#1e4554, #183642);
  border-radius: 50%;
  border: 3px solid #D93A54;
}
.sea .submarine-wrapper .submarine-body .window:after {
  content: "";
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: transparent;
  opacity: 0.8;
  border-top: 3px solid white;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.sea .submarine-wrapper .submarine-body .engine {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 32px;
  left: 53px;
  background-color: #bc243d;
  border-radius: 50%;
  border: 5px solid #D93A54;
}
.sea .submarine-wrapper .submarine-body .engine:after, .sea .submarine-wrapper .submarine-body .engine:before {
  position: absolute;
  content: "";
  border-radius: 2px;
  background-color: white;
  -webkit-animation: spin 900ms linear infinite;
          animation: spin 900ms linear infinite;
  opacity: 0.8;
}
.sea .submarine-wrapper .submarine-body .engine:after {
  top: 8px;
  width: 20px;
  height: 4px;
}
.sea .submarine-wrapper .submarine-body .engine:before {
  left: 8px;
  width: 4px;
  height: 20px;
}
.sea .submarine-wrapper .helix {
  width: 30px;
  height: 70px;
  position: absolute;
  margin-top: 55px;
  left: 0;
  background-color: #D93A54;
  border-radius: 7px;
  background: -webkit-linear-gradient(#D93A54, #bc243d);
  background: linear-gradient(#D93A54, #bc243d);
}
.sea .submarine-wrapper .helix:after {
  content: "";
  position: absolute;
  margin-top: 5px;
  margin-left: 7px;
  width: 17px;
  height: 60px;
  border-radius: 3px;
  background-color: transparent;
  opacity: 0.8;
  background: -webkit-linear-gradient(top, #D93A54, #D93A54 50%, #e57a8c 50%, #e57a8c);
  background: linear-gradient(to bottom, #D93A54, #D93A54 50%, #e57a8c 50%, #e57a8c);
  background-size: 100% 20px;
  -webkit-animation: helix-movement 110ms linear infinite;
          animation: helix-movement 110ms linear infinite;
}
.sea .submarine-wrapper .hat {
  width: 65px;
  height: 25px;
  position: absolute;
  margin-top: 26px;
  left: 70px;
  background-color: #D93A54;
  border-radius: 10px 10px 0 0;
  background: -webkit-linear-gradient(#D93A54, #d72d49);
  background: linear-gradient(#D93A54, #d72d49);
}
.sea .submarine-wrapper .hat .periscope {
  position: absolute;
  width: 7px;
  height: 20px;
  background-color: #D93A54;
  margin-top: -27px;
  margin-left: 32px;
  border-radius: 5px 5px 0 0;
}
.sea .submarine-wrapper .hat .periscope:after, .sea .submarine-wrapper .hat .periscope:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 7px;
  border-radius: 5px;
  background-color: #D93A54;
}
.sea .submarine-wrapper .hat .leds-wrapper {
  width: 53px;
  height: 13px;
  position: relative;
  top: 7px;
  left: 7px;
  background-color: #D93A54;
  border-radius: 10px;
  background: -webkit-linear-gradient(#b3233a, #a21f35);
  background: linear-gradient(#b3233a, #a21f35);
}
.sea .submarine-wrapper .hat .leds-wrapper .leds {
  position: absolute;
  margin-top: 4px;
  margin-left: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: white;
  -webkit-animation: leds-off 500ms linear infinite;
          animation: leds-off 500ms linear infinite;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after, .sea .submarine-wrapper .hat .leds-wrapper .leds:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: white;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after {
  margin-top: 0px;
  margin-left: 17px;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:before {
  margin-top: 0px;
  margin-left: 34px;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes leds-off {
  100% {
    opacity: 0.3;
  }
}
@keyframes leds-off {
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes helix-movement {
  100% {
    background: -webkit-linear-gradient(top, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
    background: linear-gradient(to bottom, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
    background-size: 100% 20px;
  }
}
@keyframes helix-movement {
  100% {
    background: -webkit-linear-gradient(top, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
    background: linear-gradient(to bottom, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
    background-size: 100% 20px;
  }
}
@-webkit-keyframes diving {
  0% {
    margin-top: 5px;
  }
  50% {
    margin-top: 15px;
  }
  100% {
    margin-top: 5px;
  }
}
@keyframes diving {
  0% {
    margin-top: 5px;
  }
  50% {
    margin-top: 15px;
  }
  100% {
    margin-top: 5px;
  }
}
@-webkit-keyframes diving-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  75% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes diving-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  75% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes bubble1-h-movement {
  0% {
    margin-left: 80%;
  }
  100% {
    margin-left: -100%;
  }
}
@keyframes bubble1-h-movement {
  0% {
    margin-left: 80%;
  }
  100% {
    margin-left: -100%;
  }
}
@-webkit-keyframes bubble2-h-movement {
  0% {
    margin-left: 65%;
  }
  100% {
    margin-left: -5%;
  }
}
@keyframes bubble2-h-movement {
  0% {
    margin-left: 65%;
  }
  100% {
    margin-left: -5%;
  }
}
@-webkit-keyframes bubble1-v-movement {
  0% {
    margin-top: 115px;
  }
  100% {
    margin-top: 160px;
  }
}
@keyframes bubble1-v-movement {
  0% {
    margin-top: 115px;
  }
  100% {
    margin-top: 160px;
  }
}
@-webkit-keyframes bubble2-v-movement {
  0% {
    margin-top: 115px;
  }
  100% {
    margin-top: 90px;
  }
}
@keyframes bubble2-v-movement {
  0% {
    margin-top: 115px;
  }
  100% {
    margin-top: 90px;
  }
}
@-webkit-keyframes bubble-scale-movement {
  0% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@keyframes bubble-scale-movement {
  0% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@-webkit-keyframes light-movement {
  0% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
  100% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@keyframes light-movement {
  0% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
  100% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}

 

Author

Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.

Search

Back to Top