Whatthehack Pusher

Developer
Alex Pate
Size
3,474 Kb
Views
12,144
  1. Whatthehack Pusher Previews
  2. Whatthehack Pusher HTML Codes
  3. Whatthehack Pusher CSS Codes

How do I make an whatthehack pusher?

What is a whatthehack pusher? How do you make a whatthehack pusher? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.

Whatthehack Pusher Previews
IQ Test

Whatthehack Pusher - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>whatthehack Pusher</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="feature"> <h1 class="feature__glitch">what<br>the<br>hack</h1> <span class="feature__span">Pusher London</span> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="294px" height="276px" viewBox="0 0 294 276" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs> <polygon id="triangle-1" stroke="#00FFDA" fill-opacity="0" fill="#00FFDA" sketch:type="MSShapeGroup" transform="translate(147.000000, 138.500000) rotate(-180.000000) translate(-147.000000, -138.500000) " points="147 1 293 276 1 276 "></polygon> </defs> <use x="0" y="0" xlink:href="#triangle-1"/> </svg> <div class="feature__dash feature__dash--1"></div> <div class="feature__dash feature__dash--2"></div> <div class="feature__line feature__line--1"></div> <div class="feature__line feature__line--2"></div>
</div>
</body>
</html>

Whatthehack Pusher - Script Codes CSS Codes

body { background: #2e3035;
}
.feature { position: relative; margin: 150px auto; width: 300px; text-align: center;
}
.feature__glitch { font-size: 64px; color: #fff; margin: 0; padding: 0; line-height: 1em; position: absolute; width: 200px; left: 50px; top: 10px; text-align: center;
}
.feature__glitch:before, .feature__glitch:after { font-size: 64px; line-height: 1em; font-weight: bold; background: #2e3035; clip: rect(0, 900px, 0, 0); color: #fff; content: "what \A the \A hack"; white-space: pre; overflow: hidden; position: absolute; top: 0; text-align: center;
}
.feature__glitch:before { -webkit-animation: glitch-1 5s infinite linear alternate-reverse; animation: glitch-1 5s infinite linear alternate-reverse; left: 35px; text-shadow: 1px 0 #40bad8;
}
.feature__glitch:after { -webkit-animation: glitch-2 3s infinite linear alternate-reverse; animation: glitch-2 3s infinite linear alternate-reverse; left: 30px; text-shadow: -1px 0 #f00;
}
.feature__span { color: #fff; text-transform: uppercase; letter-spacing: 5px; margin-top: 200px; font-size: 11px; position: absolute; text-align: center; display: block; width: 100%;
}
@-webkit-keyframes glitch-1 { 0% { clip: rect(38px, 9999px, 226px, 0); } 6.25% { clip: rect(5px, 9999px, 283px, 0); } 12.5% { clip: rect(53px, 9999px, 122px, 0); } 18.75% { clip: rect(51px, 9999px, 115px, 0); } 25% { clip: rect(97px, 9999px, 271px, 0); } 31.25% { clip: rect(84px, 9999px, 57px, 0); } 37.5% { clip: rect(49px, 9999px, 212px, 0); } 43.75% { clip: rect(26px, 9999px, 299px, 0); } 50% { clip: rect(93px, 9999px, 118px, 0); } 56.25% { clip: rect(36px, 9999px, 9px, 0); } 62.5% { clip: rect(7px, 9999px, 70px, 0); } 68.75% { clip: rect(63px, 9999px, 25px, 0); } 75% { clip: rect(20px, 9999px, 169px, 0); } 81.25% { clip: rect(86px, 9999px, 44px, 0); } 87.5% { clip: rect(84px, 9999px, 80px, 0); } 93.75% { clip: rect(60px, 9999px, 296px, 0); } 100% { clip: rect(21px, 9999px, 246px, 0); }
}
@keyframes glitch-1 { 0% { clip: rect(38px, 9999px, 226px, 0); } 6.25% { clip: rect(5px, 9999px, 283px, 0); } 12.5% { clip: rect(53px, 9999px, 122px, 0); } 18.75% { clip: rect(51px, 9999px, 115px, 0); } 25% { clip: rect(97px, 9999px, 271px, 0); } 31.25% { clip: rect(84px, 9999px, 57px, 0); } 37.5% { clip: rect(49px, 9999px, 212px, 0); } 43.75% { clip: rect(26px, 9999px, 299px, 0); } 50% { clip: rect(93px, 9999px, 118px, 0); } 56.25% { clip: rect(36px, 9999px, 9px, 0); } 62.5% { clip: rect(7px, 9999px, 70px, 0); } 68.75% { clip: rect(63px, 9999px, 25px, 0); } 75% { clip: rect(20px, 9999px, 169px, 0); } 81.25% { clip: rect(86px, 9999px, 44px, 0); } 87.5% { clip: rect(84px, 9999px, 80px, 0); } 93.75% { clip: rect(60px, 9999px, 296px, 0); } 100% { clip: rect(21px, 9999px, 246px, 0); }
}
@-webkit-keyframes glitch-2 { 0% { clip: rect(42px, 9999px, 213px, 0); } 6.25% { clip: rect(57px, 9999px, 75px, 0); } 12.5% { clip: rect(28px, 9999px, 101px, 0); } 18.75% { clip: rect(64px, 9999px, 3px, 0); } 25% { clip: rect(73px, 9999px, 56px, 0); } 31.25% { clip: rect(56px, 9999px, 93px, 0); } 37.5% { clip: rect(2px, 9999px, 31px, 0); } 43.75% { clip: rect(22px, 9999px, 219px, 0); } 50% { clip: rect(13px, 9999px, 26px, 0); } 56.25% { clip: rect(55px, 9999px, 188px, 0); } 62.5% { clip: rect(83px, 9999px, 189px, 0); } 68.75% { clip: rect(25px, 9999px, 31px, 0); } 75% { clip: rect(40px, 9999px, 24px, 0); } 81.25% { clip: rect(35px, 9999px, 89px, 0); } 87.5% { clip: rect(5px, 9999px, 108px, 0); } 93.75% { clip: rect(65px, 9999px, 247px, 0); } 100% { clip: rect(42px, 9999px, 77px, 0); }
}
@keyframes glitch-2 { 0% { clip: rect(42px, 9999px, 213px, 0); } 6.25% { clip: rect(57px, 9999px, 75px, 0); } 12.5% { clip: rect(28px, 9999px, 101px, 0); } 18.75% { clip: rect(64px, 9999px, 3px, 0); } 25% { clip: rect(73px, 9999px, 56px, 0); } 31.25% { clip: rect(56px, 9999px, 93px, 0); } 37.5% { clip: rect(2px, 9999px, 31px, 0); } 43.75% { clip: rect(22px, 9999px, 219px, 0); } 50% { clip: rect(13px, 9999px, 26px, 0); } 56.25% { clip: rect(55px, 9999px, 188px, 0); } 62.5% { clip: rect(83px, 9999px, 189px, 0); } 68.75% { clip: rect(25px, 9999px, 31px, 0); } 75% { clip: rect(40px, 9999px, 24px, 0); } 81.25% { clip: rect(35px, 9999px, 89px, 0); } 87.5% { clip: rect(5px, 9999px, 108px, 0); } 93.75% { clip: rect(65px, 9999px, 247px, 0); } 100% { clip: rect(42px, 9999px, 77px, 0); }
}
.feature__dash,
.feature__line { position: absolute; background: #00ffda;
}
.feature__dash--1 { width: 5px; height: 40px; top: -15px; left: 25px; -webkit-transform: skew(30deg); transform: skew(30deg);
}
.feature__dash--2 { width: 30px; height: 4px; right: 5px; top: 30px;
}
.feature__line { width: 1px; height: 120px;
}
.feature__line--1 { bottom: -50px; left: 160px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.feature__line--2 { bottom: -50px; left: 140px; -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
Whatthehack Pusher - Script Codes
Whatthehack Pusher - Script Codes
Home Page Home
Developer Alex Pate
Username alexpate
Uploaded November 24, 2022
Rating 4
Size 3,474 Kb
Views 12,144
Do you need developer help for Whatthehack Pusher?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Pate (alexpate) Script Codes
Name
Single Element Stacked Paper
Steps List
Stats Animation
Labs Bubbling Animation
SVG Progress Circle JS
Button Animation
Smock Gradient Button
Pulse Animation - With Notifications
Graph Preloader
Pulse Animation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!