Skip to content

Instantly share code, notes, and snippets.

@SenaOzcn

SenaOzcn/index.html

Last active September 13, 2022 22:23
Show Gist options
  • Save SenaOzcn/dcb4b02ca9e10e8cc9968196fdce7b50 to your computer and use it in GitHub Desktop.
Save SenaOzcn/dcb4b02ca9e10e8cc9968196fdce7b50 to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow animate
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
</div>
</body>
</html>
Raw
styles.css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #151320;
}
div {
height: 30rem;
width: 30rem;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 0 20px 35px rgba(0,0,0,0.3);
overflow: hidden;
}
div::before {
content: "";
height: 150%;
width: 150%;
position: absolute;
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
left: -25%;
top: -25%;
animation: spin 1.5s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
div::after {
content: "LOVE IS LOVE";
position: absolute;
background-color: #1c1b29;
height: 93%;
width: 93%;
top: 3.5%;
left: 3.5%;
border-radius: 5px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #fff;
letter-spacing: 6px;
display: grid;
place-items: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment