attr

In this example below you will see how to do a attr with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jop, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jop ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>attr</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="attr">
  <div class="me me-sky"></div>
  <div class="clouds">
    <div class="cloud cloud1"></div>
    <div class="cloud cloud2"></div>
    <div class="cloud cloud3"></div>
    <div class="cloud cloud4"></div>
    <div class="cloud cloud5"></div>
    <div class="cloud cloud6"></div>
  </div>
  <div class="me"></div>
  <div class="text">made by jop!</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Jop/attr-eMEzzw */
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
body,
html {
  background: #111;
}
.attr {
  position: absolute;
  width: 9.5vmax;
  height: 9vmax;
  bottom: 0;
  right: 0;
  color: rgba(255,255,255,0);
  min-width: 120px;
  min-height: 120px;
}
.attr :hover {
  color: #fff;
}
.text {
  position: relative;
  transition: 0.2s ease;
  width: 100%;
  height: 100%;
  text-align: center;
  font-align: center;
  top: -0.5vmax;
  font-size: 1.8vmax;
  opacity: 1;
  z-index: 10;
  font-family: 'Amatic SC', cursive;
}
.clouds {
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  width: 95%;
  height: 98%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, rgba(255,255,255,0) 70%);
          mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, rgba(255,255,255,0) 70%);
}
.cloud {
  left: -40%;
  width: 20%;
  height: 10%;
  position: absolute;
  -webkit-animation: cloud 10s linear infinite;
          animation: cloud 10s linear infinite;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-pixelated;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
}
.cloud1 {
  top: 40%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds4.png");
}
.cloud2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds2.png");
  top: 15%;
}
.cloud3 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds1.png");
  top: 58%;
}
.cloud4 {
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds3.png");
  top: 32%;
}
.cloud5 {
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
  top: 12%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds1.png");
}
.cloud6 {
  -webkit-animation-delay: 7.5s;
          animation-delay: 7.5s;
  top: 38%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds2.png");
}
.cloud7 {
  -webkit-animation-delay: 9.5s;
          animation-delay: 9.5s;
  top: 12%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/clouds4.png");
}
.me {
  position: absolute;
  width: 74%;
  height: 74%;
  bottom: 9%;
  right: 9%;
  border: 3px #297e25 solid;
  border-radius: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/me.png");
  background-size: cover;
}
.me-sky {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/522641/me_sky.png");
}
@-webkit-keyframes cloud {
  from {
    left: -40%;
  }
  to {
    left: 140%;
  }
}
@keyframes cloud {
  from {
    left: -40%;
  }
  to {
    left: 140%;
  }
}

Comments