Blink

Developer
Alexandre Masy
Size
2,417 Kb
Views
26,312
  1. Blink Previews
  2. Blink HTML Codes
  3. Blink CSS Codes

How do I make an blink?

The blink tag has been banished from html5, so here is a css3 solution to reproduce the same behavior.. What is a blink? How do you make a blink? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

Blink Previews
IQ Test

Blink - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blink</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <article> <h1>Blink</h1> <h2>Nothing fancy here, just a blinking cursor :)</h2> <span id="cursor" class="blink">|</span>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Blink - Script Codes CSS Codes

.blink { animation: blink 0.7s steps(2, start) infinite; -webkit-animation: blink 0.7s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; }
}
@-webkit-keyframes blink { to { visibility: hidden; }
}
article { position: absolute; width: 100%; height: 100%; background: #fc745f; text-align: center;
}
article h1 { font-size: 4em; line-height: .2; color: #fff; zoom: 1; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; font-weight: normal;
}
article h2 { font-size: 1.5em; font-weight: normal; zoom: 1; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
}
#cursor { font-size: 4em; color: #fff; text-shadow: -2px 4px 1px rgba(0, 0, 0, 0.15);
}
Blink - Script Codes
Blink - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 2,417 Kb
Views 26,312
Do you need developer help for Blink?

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!

Alexandre Masy (alexandremasy) Script Codes
Name
Alexandremasy-logo
Conditional Library Loading
Bullet Loader
Yp-loader
Ideation-icon
SVG - Color Matrix applied to map
A Pen by Alexandre Masy
Tiles - Triangles
Activate Button
A Type Scale
Create amazing sales emails 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!