A Pen by Heather Duvall

Thumbnail
This awesome code was written by heatherduvall, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright heatherduvall ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Heather Duvall</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <div class="line"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/heatherduvall/a-pen-by-heather-duvall-ddxQOL */
body {
  overflow: hidden;
  background-color: rebeccaPurple;
}

.line {
  width: 200%;
  height: 50px;
  animation: width 2s;
  transform: translateY(-25px) rotate(28deg);
  transform-origin: top left;
  
  background-color: DeepPink;
}

@keyframes width {
  0% {
    width: 0;
  }
  100% {
    width: 200%;
  }
}

Comments