Skip to content

Instantly share code, notes, and snippets.

@pikapower9080

pikapower9080/hover.html

Last active April 21, 2022 12:38
Show Gist options
  • Save pikapower9080/9d6c184cc7a62403d814ceee879d0e43 to your computer and use it in GitHub Desktop.
Save pikapower9080/9d6c184cc7a62403d814ceee879d0e43 to your computer and use it in GitHub Desktop.
Download ZIP
An example html file for html-sandbox
Raw
hover.html
<!DOCTYPE html>
<!-- This is an example html file for html-sandbox -->
<html>
<head>
<title>CSS Hover Effect</title>
<style>
/* Animation from animista */
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");
@keyframes text-pop-up-top {
0% {
transform: translateY(0);
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
transform: translateY(-50px);
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
body{
background: rgb(235,235,235);
background: radial-gradient(circle, rgba(235,235,235,1) 0%, rgba(212,212,212,1) 100%, rgba(212,212,212,1) 100%);
overflow: clip;
}
h1{
position: absolute;
font-size: 100px;
top: calc(50% - 100px);
text-align: center;
width: 100%;
user-select: none;
font-family: 'Meriweather' sans-serif;
}
.letter:hover {
animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
</style>
</head>
<body>
<h1><span class="letter">H</span><span class="letter">O</span><span class="letter">V</span><span class="letter">E</span><span class="letter">R</span> <span class="letter">M</span><span class="letter">E</span></h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment