18 CSS Divider Collections 05 / 18
Cyber Dividers
Three terminal-styled breaks — a beam scanning a track, a dot-matrix grid with a pulse bar growing across it, and a system tag that types itself in.
The code
<div class="div-cyber-surface"> <p class="div-cyber-text">> ESTABLISHING SECURE CHANNEL... [OK]<br>> SESSION_ID: 0x7FA3-C891-02BE</p> <div class="div-cyber-v1" role="separator"></div> <p class="div-cyber-text">The attack surface of a modern data center is not its perimeter — that concept is meaningless now.</p> <div class="div-cyber-v2" role="separator"><span class="div-cyber-bar"></span></div> <p class="div-cyber-text">> ANOMALY DETECTED: 847 req/sec from 10.0.14.x<br>> AUTO-THROTTLE: ENGAGED</p> <div class="div-cyber-v3" role="separator"><span class="div-cyber-tag">[ SYSTEM NOMINAL ]</span></div> <p class="div-cyber-text">Cryptography is applied mathematics in service of trust — the implementations are where the problems live.</p> </div>
<div class="div-cyber-surface">
<p class="div-cyber-text">> ESTABLISHING SECURE CHANNEL... [OK]<br>> SESSION_ID: 0x7FA3-C891-02BE</p>
<div class="div-cyber-v1" role="separator"></div>
<p class="div-cyber-text">The attack surface of a modern data center is not its perimeter — that concept is meaningless now.</p>
<div class="div-cyber-v2" role="separator"><span class="div-cyber-bar"></span></div>
<p class="div-cyber-text">> ANOMALY DETECTED: 847 req/sec from 10.0.14.x<br>> AUTO-THROTTLE: ENGAGED</p>
<div class="div-cyber-v3" role="separator"><span class="div-cyber-tag">[ SYSTEM NOMINAL ]</span></div>
<p class="div-cyber-text">Cryptography is applied mathematics in service of trust — the implementations are where the problems live.</p>
</div>@keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
background: #060a0f;
padding: 36px 40px;
border-radius: 12px;
}
.div-cyber-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.78;
color: #2a5848;
margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
position: relative;
height: 2px;
margin: 38px 0;
background: rgba(0, 245, 200, 0.1);
overflow: visible;
}
.div-cyber-v1::before {
content: '';
position: absolute;
top: -5px;
left: -22%;
width: 22%;
height: 12px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
content: '// 0x4F2A·C8';
position: absolute;
right: 0;
top: -15px;
font-family: "Courier New", monospace;
font-size: 8.5px;
letter-spacing: 0.08em;
color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
position: relative;
height: 20px;
margin: 38px 0;
display: flex;
align-items: center;
}
.div-cyber-v2::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
position: absolute;
left: 0;
right: 0;
top: 8px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
transform-origin: center;
animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
display: flex;
align-items: center;
gap: 14px;
margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
color: rgba(0, 245, 200, 0.8);
white-space: nowrap;
overflow: hidden;
max-width: 0;
opacity: 0;
animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
.div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
.div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
} @keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
background: #060a0f;
padding: 36px 40px;
border-radius: 12px;
}
.div-cyber-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.78;
color: #2a5848;
margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
position: relative;
height: 2px;
margin: 38px 0;
background: rgba(0, 245, 200, 0.1);
overflow: visible;
}
.div-cyber-v1::before {
content: '';
position: absolute;
top: -5px;
left: -22%;
width: 22%;
height: 12px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
content: '// 0x4F2A·C8';
position: absolute;
right: 0;
top: -15px;
font-family: "Courier New", monospace;
font-size: 8.5px;
letter-spacing: 0.08em;
color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
position: relative;
height: 20px;
margin: 38px 0;
display: flex;
align-items: center;
}
.div-cyber-v2::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
position: absolute;
left: 0;
right: 0;
top: 8px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
transform-origin: center;
animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
display: flex;
align-items: center;
gap: 14px;
margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
content: '';
flex: 1;
height: 1px;
animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
color: rgba(0, 245, 200, 0.8);
white-space: nowrap;
overflow: hidden;
max-width: 0;
opacity: 0;
animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
.div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
.div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
}