Luke ROTJ Lightsaber

Developer
Tom
Size
2,758 Kb
Views
14,168
  1. Luke ROTJ Lightsaber Previews
  2. Luke ROTJ Lightsaber HTML Codes
  3. Luke ROTJ Lightsaber CSS Codes
  4. Luke ROTJ Lightsaber JS Codes

How do I make an luke rotj lightsaber?

Inspiration: http://blinkdash.com/funprojects/lightsaber.html. What is a luke rotj lightsaber? How do you make a luke rotj lightsaber? This script and codes were developed by Tom on 19 November 2022, Saturday.

Luke ROTJ Lightsaber Previews
IQ Test

Luke ROTJ Lightsaber - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Luke ROTJ Lightsaber</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="saber"> <div class="stub"></div> <div class="nub1"></div> <div class="nub2"></div> <div class="nub3"></div> <div class="nub4"></div> <div class="hilt"></div> <div class="switch"></div> <div class="bl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="sl"></div> <div class="e1"></div> <div class="e2"></div> <div class="s1"></div> <div class="b1"></div> <div class="b2"></div> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> <div class="s5"></div> <div class="s6"></div> <div class="blade on"></div>
</div>
<button id="toggle" value="1">Toggle On/Off</button>
<img src="http://i228.photobucket.com/albums/ee63/Spideristic/luke_rotj_lightsaber_pcr01.jpg"/> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Luke ROTJ Lightsaber - Script Codes CSS Codes

body { background:#010101;
}
.saber { position:absolute; top:50px; margin:0 0 0 -300px; left:50%; width:700px;
}
.stub { height:30px; width:4px; display:inline-block; position:relative; left:-16px; top:2px; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%);
}
.nub1 { position:absolute; display:inline-block; top:-1px; left:-10px; width:20px; background:#c9c9c9; height:5px; border-radius:10px 10px 0 0;
}
.nub2 { position:absolute; display:inline-block; top:8px; left:-8px; width:14px; background:#c9c9c9; height:5px; box-shadow:0 0 0 3px rgba(0,0,0,.1);
}
.nub3 { position:absolute; display:inline-block; bottom:8px; left:-8px; width:14px; background:#c9c9c9; height:5px; box-shadow:0 0 0 3px rgba(0,0,0,.1);
}
.nub4 { position:absolute; display:inline-block; bottom:-1px; left:-10px; width:20px; background:#c9c9c9; height:5px; border-radius:0px 0px 10px 10px;
}
.hilt { width:70px; height:30px; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); display:inline-block;
}
.hilt:before { width:20px; height:26px; margin-top:2px; content:" "; positon:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); display:block; margin-left:-20px; display:inline-block;
}
.switch { height:5px; width:50px; background:#dbdce2; position:absolute; top:-3px; left:26px; display:inline-block; box-sizing:border-box;
}
.switch:before { height:2px; width:52px; position:relative; content:""; top:-1px; left:-1px; background: linear-gradient(to right, #f2825b 0%,#e55b2b 50%,#f07146 100%); display:block;
}
.bl { width:4px; height:30px; background: linear-gradient(to bottom, #000000 0%,#3a3a3a 21%,#4c4c4c 31%,#000000 80%,#000000 100%); position:relative; border-radius:0 5px 5px 0; display:inline-block; left:-4px; top:2px;
}
.sl { width:4px; height:30px; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); position:relative; display:inline-block; margin:0; top:2px; left:-4px; border-radius:0 5px 5px 0;
}
.sl:before { width:4px; height:30px; width:4px; height:30px; background: linear-gradient(to bottom, #000000 0%,#3a3a3a 21%,#4c4c4c 31%,#000000 80%,#000000 100%); position:relative; border-radius:5px 0px 0px 5px; display:inline-block; content:""; left:-4px;
}
.e1 { background: linear-gradient(to bottom, #000000 0%,#3a3a3a 21%,#4c4c4c 31%,#000000 80%,#000000 100%); width:10px; height:14px; display:inline-block; position:relative; top:-6px; left:-8px;
}
.e2 { background: linear-gradient(to bottom, #000000 0%,#3a3a3a 21%,#4c4c4c 31%,#000000 80%,#000000 100%); width:2px; height:18px; display:inline-block; position:relative; top:-4px; left:-12px;
}
.s1 { width:1px; height:20px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:-3px; left:-16px;
}
.b1 { background: linear-gradient(to bottom, #f07146 0%,#ef977a 21%,#edc8bd 32%,#ef977a 80%,#f07146 100%); width:3px; height:18px; display:inline-block; position:relative; top:-4px; left:-20px;
}
.b2 { background: linear-gradient(to bottom, #f07146 0%,#ef977a 21%,#edc8bd 32%,#ef977a 80%,#f07146 100%); width:10px; height:12px; display:inline-block; position:relative; top:-7px; left:-24px;
}
.s2 { width:3px; height:14px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:-6px; left:-28px;
}
.s3 { width:8px; height:22px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:-2px; left:-32px;
}
.s4 { width:4px; height:24px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:-1px; left:-36px;
}
.s5 { width:1px; height:26px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:0px; left:-40px;
}
.s6 { width:4px; height:18px; display:inline-block; position:relative; background: linear-gradient(to bottom, #c9c9c9 0%,#dbdce2 21%,#f2f2f2 32%,#dddfe3 80%,#c9c9c9 100%); top:-4px; left:-44px;
}
.blade { background:#fff; width:0px; opacity:0; height:18px; display:inline-block; position:relative; left:-48px; top:-4px; border-radius:0 9px 9px 0; box-shadow:5px 0 10px 5px rgba(182,224,38,1), inset 0px 0 5px 3px rgba(182,224,38,1);
}
.blade.on { animation:saberon .3s forwards, saber .1s forwards infinite;
}
.blade.off { animation:saberoff .3s reverse, saber .1s forwards infinite;
}
@keyframes saber { to { box-shadow:5px 0 8px 2px rgba(182,224,38,1), inset 0px 0 4px 5px rgba(182,224,38,1); }
}
@keyframes saberon { from { width:0px; opacity:0; } 20% { opacity:1; } to { width:400px; opacity:1; }
}
@keyframes saberoff { from { width:0px; opacity:0; } 20% { opacity:1; } to { width:400px; opacity:1; }
}
img { position:absolute; left:50%; top:100px; margin-left:-300px;
}

Luke ROTJ Lightsaber - Script Codes JS Codes

$('#toggle').on('click',function(e){ $('.blade').toggleClass('on off');
});
Luke ROTJ Lightsaber - Script Codes
Luke ROTJ Lightsaber - Script Codes
Home Page Home
Developer Tom
Username TomJ1588
Uploaded November 19, 2022
Rating 3
Size 2,758 Kb
Views 14,168
Do you need developer help for Luke ROTJ Lightsaber?

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!

Tom (TomJ1588) Script Codes
Name
ESPN Style Navigation
Editor Test
CSS Only Line Animated Modal
Left Side Slide Out Push Nav
UI Test 2
Pure CSS Only Snackbar
Swing In Social Links
Pure CSS Animated Modals
A Pen by Tom
Create amazing captions 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!