Cyberpunk Effect HTML Code: Create a Distinctive Look
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Cyberpunk Effect</title>
<style>
body {
background-color: #000;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
line-height: 1.6;
}
h1 {
font-size: 60px;
text-align: center;
margin-top: 100px;
}
h2 {
font-size: 40px;
margin-top: 50px;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
.cyber {
position: relative;
}
.cyber::before {
content: '';
width: 10px;
height: 100%;
background-color: #0f0;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
animation: flicker 0.1s infinite alternate;
}
@keyframes flicker {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
.cyber::after {
content: '';
width: 100%;
height: 10px;
background-color: #0f0;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
animation: flicker 0.1s infinite alternate;
}
</style>
</head>
<body>
<h1>Cyberpunk Effect</h1>
<div class='cyber'>
<h2>What is Cyberpunk?</h2>
<p>Cyberpunk is a subgenre of science fiction that focuses on a dystopian future where advanced technology is intertwined with a corrupt society.</p>
<p>Cyberpunk often features elements such as cybernetic implants, virtual reality, artificial intelligence, and computer hacking.</p>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oRRX 著作权归作者所有。请勿转载和采集!