CSS Lasers

Developer

Size

4,032 Kb

Views

6,072

CSS Lasers Previews
CSS Lasers HTML Codes
CSS Lasers CSS Codes
CSS Lasers JS Codes

How do I make an css lasers?

Pure CSS lasers effect. . What is a css lasers? How do you make a css lasers? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.

CSS Lasers Previews

CSS Lasers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Lasers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ div { background: blue; height: 1.5px; border-radius: 50%;
}
@keyframes effect { to { transform: rotate(480deg); background: red; }
}
.line-40 { animation: effect 3.2s ease-in-out infinite alternate;
}
.line-41 { animation: effect 3.28s ease-in-out infinite alternate;
}
.line-42 { animation: effect 3.36s ease-in-out infinite alternate;
}
.line-43 { animation: effect 3.44s ease-in-out infinite alternate;
}
.line-44 { animation: effect 3.52s ease-in-out infinite alternate;
}
.line-45 { animation: effect 3.6s ease-in-out infinite alternate;
}
.line-46 { animation: effect 3.68s ease-in-out infinite alternate;
}
.line-47 { animation: effect 3.76s ease-in-out infinite alternate;
}
.line-48 { animation: effect 3.84s ease-in-out infinite alternate;
}
.line-49 { animation: effect 3.92s ease-in-out infinite alternate;
}
.line-50 { animation: effect 4s ease-in-out infinite alternate;
}
.line-51 { animation: effect 4.08s ease-in-out infinite alternate;
}
.line-52 { animation: effect 4.16s ease-in-out infinite alternate;
}
.line-53 { animation: effect 4.24s ease-in-out infinite alternate;
}
.line-54 { animation: effect 4.32s ease-in-out infinite alternate;
}
.line-55 { animation: effect 4.4s ease-in-out infinite alternate;
}
.line-56 { animation: effect 4.48s ease-in-out infinite alternate;
}
.line-57 { animation: effect 4.56s ease-in-out infinite alternate;
}
.line-58 { animation: effect 4.64s ease-in-out infinite alternate;
}
.line-59 { animation: effect 4.72s ease-in-out infinite alternate;
}
.line-60 { animation: effect 4.8s ease-in-out infinite alternate;
}
.line-61 { animation: effect 4.88s ease-in-out infinite alternate;
}
.line-62 { animation: effect 4.96s ease-in-out infinite alternate;
}
.line-63 { animation: effect 5.04s ease-in-out infinite alternate;
}
.line-64 { animation: effect 5.12s ease-in-out infinite alternate;
}
.line-65 { animation: effect 5.2s ease-in-out infinite alternate;
}
.line-66 { animation: effect 5.28s ease-in-out infinite alternate;
}
.line-67 { animation: effect 5.36s ease-in-out infinite alternate;
}
.line-68 { animation: effect 5.44s ease-in-out infinite alternate;
}
.line-69 { animation: effect 5.52s ease-in-out infinite alternate;
}
.line-70 { animation: effect 5.6s ease-in-out infinite alternate;
}
.line-71 { animation: effect 5.68s ease-in-out infinite alternate;
}
.line-72 { animation: effect 5.76s ease-in-out infinite alternate;
}
.line-73 { animation: effect 5.84s ease-in-out infinite alternate;
}
.line-74 { animation: effect 5.92s ease-in-out infinite alternate;
}
.line-75 { animation: effect 6s ease-in-out infinite alternate;
}
.line-76 { animation: effect 6.08s ease-in-out infinite alternate;
}
.line-77 { animation: effect 6.16s ease-in-out infinite alternate;
}
.line-78 { animation: effect 6.24s ease-in-out infinite alternate;
}
.line-79 { animation: effect 6.32s ease-in-out infinite alternate;
}
.line-80 { animation: effect 6.4s ease-in-out infinite alternate;
}
.line-81 { animation: effect 6.48s ease-in-out infinite alternate;
}
.line-82 { animation: effect 6.56s ease-in-out infinite alternate;
}
.line-83 { animation: effect 6.64s ease-in-out infinite alternate;
}
.line-84 { animation: effect 6.72s ease-in-out infinite alternate;
}
.line-85 { animation: effect 6.8s ease-in-out infinite alternate;
}
.line-86 { animation: effect 6.88s ease-in-out infinite alternate;
}
.line-87 { animation: effect 6.96s ease-in-out infinite alternate;
}
.line-88 { animation: effect 7.04s ease-in-out infinite alternate;
}
.line-89 { animation: effect 7.12s ease-in-out infinite alternate;
}
.line-90 { animation: effect 7.2s ease-in-out infinite alternate;
}
.line-91 { animation: effect 7.28s ease-in-out infinite alternate;
}
.line-92 { animation: effect 7.36s ease-in-out infinite alternate;
}
.line-93 { animation: effect 7.44s ease-in-out infinite alternate;
}
.line-94 { animation: effect 7.52s ease-in-out infinite alternate;
}
.line-95 { animation: effect 7.6s ease-in-out infinite alternate;
}
.line-96 { animation: effect 7.68s ease-in-out infinite alternate;
}
.line-97 { animation: effect 7.76s ease-in-out infinite alternate;
}
.line-98 { animation: effect 7.84s ease-in-out infinite alternate;
}
.line-99 { animation: effect 7.92s ease-in-out infinite alternate;
}
.line-100 { animation: effect 8s ease-in-out infinite alternate;
}
.line-101 { animation: effect 8.08s ease-in-out infinite alternate;
}
.line-102 { animation: effect 8.16s ease-in-out infinite alternate;
}
.line-103 { animation: effect 8.24s ease-in-out infinite alternate;
}
.line-104 { animation: effect 8.32s ease-in-out infinite alternate;
}
.line-105 { animation: effect 8.4s ease-in-out infinite alternate;
}
.line-106 { animation: effect 8.48s ease-in-out infinite alternate;
}
.line-107 { animation: effect 8.56s ease-in-out infinite alternate;
}
.line-108 { animation: effect 8.64s ease-in-out infinite alternate;
}
.line-109 { animation: effect 8.72s ease-in-out infinite alternate;
}
.line-110 { animation: effect 8.8s ease-in-out infinite alternate;
}
.line-111 { animation: effect 8.88s ease-in-out infinite alternate;
}
.line-112 { animation: effect 8.96s ease-in-out infinite alternate;
}
.line-113 { animation: effect 9.04s ease-in-out infinite alternate;
}
.line-114 { animation: effect 9.12s ease-in-out infinite alternate;
}
.line-115 { animation: effect 9.2s ease-in-out infinite alternate;
}
.line-116 { animation: effect 9.28s ease-in-out infinite alternate;
}
.line-117 { animation: effect 9.36s ease-in-out infinite alternate;
}
.line-118 { animation: effect 9.44s ease-in-out infinite alternate;
}
.line-119 { animation: effect 9.52s ease-in-out infinite alternate;
}
.line-120 { animation: effect 9.6s ease-in-out infinite alternate;
}
body { background: black; margin: auto; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 50em; height: 6.25em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='line-40'></div>
<div class='line-41'></div>
<div class='line-42'></div>
<div class='line-43'></div>
<div class='line-44'></div>
<div class='line-45'></div>
<div class='line-46'></div>
<div class='line-47'></div>
<div class='line-48'></div>
<div class='line-49'></div>
<div class='line-50'></div>
<div class='line-51'></div>
<div class='line-52'></div>
<div class='line-53'></div>
<div class='line-54'></div>
<div class='line-55'></div>
<div class='line-56'></div>
<div class='line-57'></div>
<div class='line-58'></div>
<div class='line-59'></div>
<div class='line-60'></div>
<div class='line-61'></div>
<div class='line-62'></div>
<div class='line-63'></div>
<div class='line-64'></div>
<div class='line-65'></div>
<div class='line-66'></div>
<div class='line-67'></div>
<div class='line-68'></div>
<div class='line-69'></div>
<div class='line-70'></div>
<div class='line-71'></div>
<div class='line-72'></div>
<div class='line-73'></div>
<div class='line-74'></div>
<div class='line-75'></div>
<div class='line-76'></div>
<div class='line-77'></div>
<div class='line-78'></div>
<div class='line-79'></div>
<div class='line-80'></div>
<div class='line-81'></div>
<div class='line-82'></div>
<div class='line-83'></div>
<div class='line-84'></div>
<div class='line-85'></div>
<div class='line-86'></div>
<div class='line-87'></div>
<div class='line-88'></div>
<div class='line-89'></div>
<div class='line-90'></div>
<div class='line-91'></div>
<div class='line-92'></div>
<div class='line-93'></div>
<div class='line-94'></div>
<div class='line-95'></div>
<div class='line-96'></div>
<div class='line-97'></div>
<div class='line-98'></div>
<div class='line-99'></div>
<div class='line-100'></div>
<div class='line-101'></div>
<div class='line-102'></div>
<div class='line-103'></div>
<div class='line-104'></div>
<div class='line-105'></div>
<div class='line-106'></div>
<div class='line-107'></div>
<div class='line-108'></div>
<div class='line-109'></div>
<div class='line-110'></div>
<div class='line-111'></div>
<div class='line-112'></div>
<div class='line-113'></div>
<div class='line-114'></div>
<div class='line-115'></div>
<div class='line-116'></div>
<div class='line-117'></div>
<div class='line-118'></div>
<div class='line-119'></div>
<div class='line-120'></div> <script src="js/index.js"></script>
</body>
</html>

CSS Lasers - Script Codes CSS Codes

div { background: blue; height: 1.5px; border-radius: 50%;
}
@keyframes effect { to { transform: rotate(480deg); background: red; }
}
.line-40 { animation: effect 3.2s ease-in-out infinite alternate;
}
.line-41 { animation: effect 3.28s ease-in-out infinite alternate;
}
.line-42 { animation: effect 3.36s ease-in-out infinite alternate;
}
.line-43 { animation: effect 3.44s ease-in-out infinite alternate;
}
.line-44 { animation: effect 3.52s ease-in-out infinite alternate;
}
.line-45 { animation: effect 3.6s ease-in-out infinite alternate;
}
.line-46 { animation: effect 3.68s ease-in-out infinite alternate;
}
.line-47 { animation: effect 3.76s ease-in-out infinite alternate;
}
.line-48 { animation: effect 3.84s ease-in-out infinite alternate;
}
.line-49 { animation: effect 3.92s ease-in-out infinite alternate;
}
.line-50 { animation: effect 4s ease-in-out infinite alternate;
}
.line-51 { animation: effect 4.08s ease-in-out infinite alternate;
}
.line-52 { animation: effect 4.16s ease-in-out infinite alternate;
}
.line-53 { animation: effect 4.24s ease-in-out infinite alternate;
}
.line-54 { animation: effect 4.32s ease-in-out infinite alternate;
}
.line-55 { animation: effect 4.4s ease-in-out infinite alternate;
}
.line-56 { animation: effect 4.48s ease-in-out infinite alternate;
}
.line-57 { animation: effect 4.56s ease-in-out infinite alternate;
}
.line-58 { animation: effect 4.64s ease-in-out infinite alternate;
}
.line-59 { animation: effect 4.72s ease-in-out infinite alternate;
}
.line-60 { animation: effect 4.8s ease-in-out infinite alternate;
}
.line-61 { animation: effect 4.88s ease-in-out infinite alternate;
}
.line-62 { animation: effect 4.96s ease-in-out infinite alternate;
}
.line-63 { animation: effect 5.04s ease-in-out infinite alternate;
}
.line-64 { animation: effect 5.12s ease-in-out infinite alternate;
}
.line-65 { animation: effect 5.2s ease-in-out infinite alternate;
}
.line-66 { animation: effect 5.28s ease-in-out infinite alternate;
}
.line-67 { animation: effect 5.36s ease-in-out infinite alternate;
}
.line-68 { animation: effect 5.44s ease-in-out infinite alternate;
}
.line-69 { animation: effect 5.52s ease-in-out infinite alternate;
}
.line-70 { animation: effect 5.6s ease-in-out infinite alternate;
}
.line-71 { animation: effect 5.68s ease-in-out infinite alternate;
}
.line-72 { animation: effect 5.76s ease-in-out infinite alternate;
}
.line-73 { animation: effect 5.84s ease-in-out infinite alternate;
}
.line-74 { animation: effect 5.92s ease-in-out infinite alternate;
}
.line-75 { animation: effect 6s ease-in-out infinite alternate;
}
.line-76 { animation: effect 6.08s ease-in-out infinite alternate;
}
.line-77 { animation: effect 6.16s ease-in-out infinite alternate;
}
.line-78 { animation: effect 6.24s ease-in-out infinite alternate;
}
.line-79 { animation: effect 6.32s ease-in-out infinite alternate;
}
.line-80 { animation: effect 6.4s ease-in-out infinite alternate;
}
.line-81 { animation: effect 6.48s ease-in-out infinite alternate;
}
.line-82 { animation: effect 6.56s ease-in-out infinite alternate;
}
.line-83 { animation: effect 6.64s ease-in-out infinite alternate;
}
.line-84 { animation: effect 6.72s ease-in-out infinite alternate;
}
.line-85 { animation: effect 6.8s ease-in-out infinite alternate;
}
.line-86 { animation: effect 6.88s ease-in-out infinite alternate;
}
.line-87 { animation: effect 6.96s ease-in-out infinite alternate;
}
.line-88 { animation: effect 7.04s ease-in-out infinite alternate;
}
.line-89 { animation: effect 7.12s ease-in-out infinite alternate;
}
.line-90 { animation: effect 7.2s ease-in-out infinite alternate;
}
.line-91 { animation: effect 7.28s ease-in-out infinite alternate;
}
.line-92 { animation: effect 7.36s ease-in-out infinite alternate;
}
.line-93 { animation: effect 7.44s ease-in-out infinite alternate;
}
.line-94 { animation: effect 7.52s ease-in-out infinite alternate;
}
.line-95 { animation: effect 7.6s ease-in-out infinite alternate;
}
.line-96 { animation: effect 7.68s ease-in-out infinite alternate;
}
.line-97 { animation: effect 7.76s ease-in-out infinite alternate;
}
.line-98 { animation: effect 7.84s ease-in-out infinite alternate;
}
.line-99 { animation: effect 7.92s ease-in-out infinite alternate;
}
.line-100 { animation: effect 8s ease-in-out infinite alternate;
}
.line-101 { animation: effect 8.08s ease-in-out infinite alternate;
}
.line-102 { animation: effect 8.16s ease-in-out infinite alternate;
}
.line-103 { animation: effect 8.24s ease-in-out infinite alternate;
}
.line-104 { animation: effect 8.32s ease-in-out infinite alternate;
}
.line-105 { animation: effect 8.4s ease-in-out infinite alternate;
}
.line-106 { animation: effect 8.48s ease-in-out infinite alternate;
}
.line-107 { animation: effect 8.56s ease-in-out infinite alternate;
}
.line-108 { animation: effect 8.64s ease-in-out infinite alternate;
}
.line-109 { animation: effect 8.72s ease-in-out infinite alternate;
}
.line-110 { animation: effect 8.8s ease-in-out infinite alternate;
}
.line-111 { animation: effect 8.88s ease-in-out infinite alternate;
}
.line-112 { animation: effect 8.96s ease-in-out infinite alternate;
}
.line-113 { animation: effect 9.04s ease-in-out infinite alternate;
}
.line-114 { animation: effect 9.12s ease-in-out infinite alternate;
}
.line-115 { animation: effect 9.2s ease-in-out infinite alternate;
}
.line-116 { animation: effect 9.28s ease-in-out infinite alternate;
}
.line-117 { animation: effect 9.36s ease-in-out infinite alternate;
}
.line-118 { animation: effect 9.44s ease-in-out infinite alternate;
}
.line-119 { animation: effect 9.52s ease-in-out infinite alternate;
}
.line-120 { animation: effect 9.6s ease-in-out infinite alternate;
}
body { background: black; margin: auto; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 50em; height: 6.25em;
}

CSS Lasers - Script Codes JS Codes

// this can be made simply with nth-child.

Home Page	Home
Developer	Diéssica Gurskas
Username	diessica
Uploaded	January 10, 2023
Rating	3.5
Size	4,032 Kb
Views	6,072

Do you need developer help for CSS Lasers?

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!

Diéssica Gurskas (diessica) Script Codes

Name	Size
A CSS curve	3,007 Kb
Git logo with CSS	3,138 Kb
CSS is AWESOME	3,349 Kb
Pure CSS Waves	3,446 Kb
CSS Sine Waves	4,102 Kb
CSS Tube explodes	5,035 Kb
CSS is incredibly awesome	3,087 Kb
Tooltip with title attribute	1,663 Kb
Colunas de mesma altura	2,479 Kb
Equal Height Columns Sass mixin	3,861 Kb

Create amazing art & images 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!

Similar Scripts & Codes

Name	Username	Size
ASCII triangle image overlay	Mitchdot	2,200 Kb
Day 1 - Portfolio	Chpecson	3,532 Kb
SCSS Simple Animated Drop-In	Danwarfel	2,175 Kb
Animated Logo	Shakdaniel	2,672 Kb
Under construction	GhostRider	1,642 Kb
Tree growth tests	Orchard	3,818 Kb
Boxes	H3l1um	2,563 Kb
Growing Root - Scroll control - CANVAS	Cjonasw	2,342 Kb
CSS background-size - GSAP	Jonathan	2,209 Kb
See Through	Larrygeams	77,410 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!