HTML <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="playemoji.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="face"> <div class="eyes"> <div class="eye"></div> <div class="eye"></div> </div> </div> <script> document.querySelector('body').addEventListener('mousemove', eyeball); function eyeball() { var eye = document.querySelectorAll('.eye'); ...
HTML
<!doctype html>
<html>
<head>
<title>Creative Menu</title>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<ul>
<li><a href="#" data-text="Home">Home</li>
<li><a href="#" data-text="About">About</li>
<li><a href="#" data-text="Team">Teame</li>
<li><a href="#" data-text="Contact Us">Contact Us</li>
<li><a href="#" data-text="Portfolio">Portfolio</li>
<ul>
</body>
</html>
CSS
@important url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
}
ul li
{
list-style: none;
}
ul li a
{
position: relative;
display: block;
color: transparent;
-webkit-text-stroke: 1px #fff;
font-size: 5em;
font-weight: 900;
text-decoration: none;
line-height: 1.2em;
}
ul li a:hover
{
color: #fff;
-webkit-text-stroke: 1px #000;
transition: 0.5s;
}
ul li a:before,
ul li a:after
{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
ul li a:hover:before
{
color: #f00;
z-index: 1;
-webkit-text-stroke: 1px #fff;
transform: translate(10px,-10px);
}
ul li a:hover:after
{
color: #f00;
z-index: 1px;
-webkit-text-stroke: 1px #fff;
transform: translate(10px,-10px);
}
Comments