A Pen by Ophelia Lam

undefined

Forked from Michael Brown's Pen bVgbRw.

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ophelia Lam</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>

  <h1>Bouncy Letters</h1>
<p align="center">Having fun with text shadows and animation</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ophelia17peace/a-pen-by-ophelia-lam-YyNPwe */
@import url(https://fonts.googleapis.com/css?family=Erica+One);
/* BODY */
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow: hidden;
}

::selection {
  background: transparent;
}

h1 {
  cursor: default;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  margin: auto;
  display: block;
  -webkit-animation: bounce .3s ease infinite alternate;
  font-family: 'Erica One', cursive;
  font-size: 80px;
  color: #FFF;
  text-align: center;
  line-height: 100px;
  text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.6);
}

/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
    top: -30px;
    text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 30px 30px rgba(0, 0, 0, 0.3);
  }
}

Comments