Skip to content

Instantly share code, notes, and snippets.

@redknitin

redknitin/web02.html

Created August 21, 2018 14:15
Show Gist options
  • Save redknitin/0f99ed17147599adae8812071ac2afca to your computer and use it in GitHub Desktop.
Save redknitin/0f99ed17147599adae8812071ac2afca to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animation - Simulate HTML blink tag
Raw
web02.html
<!doctype html><html>
<head>
<title></title>
<style>
@keyframes glowshift { from { text-shadow: 0px 0px 25px #00f; } to { text-shadow: 0px 0px 25px #0f0; } }
@keyframes blinker { from {opacity: 1;} to {opacity: 0.05}; }
/* @keyframes buzzingPointObj {
0% { transform: translate3d(0,0,0,0); }
10% { transform: translate3d(800px, 160px, 0); }
20% { transform: translate3d(800px, 00px, 0); }
30% { transform: translate3d(200px, 00px, 0); }
40% { transform: translate3d(600px, 30px, 0); }
50% { transform: translate3d(0,0,0); }
} */
body { background-color: black; color: #ddd; font-family: Arial; background-image: url(fractals-1800242_1920.jpg); background-repeat: no-repeat; background-size: cover; padding: 0; margin: 0; }
.blinker { animation: blinker 0.15s linear 1s infinite alternate; }
code { color: #5f5; }
h1#title { text-transform: uppercase; color: white; text-shadow: 0px 0px 25px #00f; font-size: 38pt; text-align: center; animation: glowshift 2s linear 1s infinite alternate; padding: 0; margin-top: 0; }
#subtitle { text-align: center; margin-top: -30px; font-weight: normal; text-shadow: 0px 0px 25px #000; }
#mainWrapper { background-color: rgba(0,0,0,0.6); margin: 20px; padding: 1px 10px 20px 10px; min-height: 90vh; } /* vh here, or apply h 100% to html and minh to body? */
#cmdNetcat { position: absolute; right: 30px; top: 30px; }
#bio { display: inline-block; width: 350px; }
.no-wrap { white-space: nowrap; }
/* #pointObj { position: absolute; top: 40px; left: 40px; animation: buzzingPointObj 2s linear 1s infinite alternate; opacity: 0.6; } */
</style>
<script></script>
</head>
<body>
<div id="mainWrapper">
<h1 id="title">
Nitin
</h1>
<h4 id="subtitle">Enterprise Software Specialist</h4>
<pre id="cmdNetcat"><code>#!/bin/bash
while true
do
netcat -l -p 5555 < index.html
done<span class="blinker">|</span>
</code></pre>
<p id="bio">With a background in software development and system administration, I provide enterprise software implementation and support services. <br />In my current engagement, I am supporting <span class="no-wrap">Infor EAM</span> and <span class="no-wrap">IFS Applications</span> and am developing reports with Cognos and <span class="no-wrap">Crystal Reports</span>.</p>
<!-- <svg id="pointObj" width="10px" height="10px" viewBox="0 0 100 100" version="1.1">
<title>My SVG</title>
<g>
<circle class="circle" cx="50" cy="50" r="50" fill="#df0"></circle>
</g>
</svg> -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment