Skip to content

Instantly share code, notes, and snippets.

@dave-4k

dave-4k/codespector.css

Created May 24, 2017 22:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dave-4k/e7e22e5ec05d7a8559329d0e36b38648 to your computer and use it in GitHub Desktop.
Save dave-4k/e7e22e5ec05d7a8559329d0e36b38648 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Bike
Raw
codespector.css
/**
* CSS Bike
*/
body { background: peachpuff;}.bike { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.line:nth-child(1) { transform: rotate(6deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(2) { transform: rotate(12deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(3) { transform: rotate(18deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(4) { transform: rotate(24deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(5) { transform: rotate(30deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(6) { transform: rotate(36deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(7) { transform: rotate(42deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(8) { transform: rotate(48deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(9) { transform: rotate(54deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(10) { transform: rotate(60deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(11) { transform: rotate(66deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(12) { transform: rotate(72deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(13) { transform: rotate(78deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(14) { transform: rotate(84deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(15) { transform: rotate(90deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(16) { transform: rotate(96deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(17) { transform: rotate(102deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(18) { transform: rotate(108deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(19) { transform: rotate(114deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(20) { transform: rotate(120deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(21) { transform: rotate(126deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(22) { transform: rotate(132deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(23) { transform: rotate(138deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(24) { transform: rotate(144deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(25) { transform: rotate(150deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(26) { transform: rotate(156deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(27) { transform: rotate(162deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(28) { transform: rotate(168deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(29) { transform: rotate(174deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(30) { transform: rotate(180deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(31) { transform: rotate(186deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(32) { transform: rotate(192deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(33) { transform: rotate(198deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(34) { transform: rotate(204deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(35) { transform: rotate(210deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(36) { transform: rotate(216deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(37) { transform: rotate(222deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(38) { transform: rotate(228deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(39) { transform: rotate(234deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(40) { transform: rotate(240deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(41) { transform: rotate(246deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(42) { transform: rotate(252deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(43) { transform: rotate(258deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(44) { transform: rotate(264deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(45) { transform: rotate(270deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(46) { transform: rotate(276deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(47) { transform: rotate(282deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(48) { transform: rotate(288deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(49) { transform: rotate(294deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(50) { transform: rotate(300deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(51) { transform: rotate(306deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(52) { transform: rotate(312deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(53) { transform: rotate(318deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(54) { transform: rotate(324deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(55) { transform: rotate(330deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(56) { transform: rotate(336deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(57) { transform: rotate(342deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(58) { transform: rotate(348deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(59) { transform: rotate(354deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(60) { transform: rotate(360deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.two:nth-child(1) { transform: rotate(6deg); background: black; height: 12px; width: 12px;}.two:nth-child(2) { transform: rotate(12deg); background: black; height: 12px; width: 12px;}.two:nth-child(3) { transform: rotate(18deg); background: black; height: 12px; width: 12px;}.two:nth-child(4) { transform: rotate(24deg); background: black; height: 12px; width: 12px;}.two:nth-child(5) { transform: rotate(30deg); background: black; height: 12px; width: 12px;}.two:nth-child(6) { transform: rotate(36deg); background: black; height: 12px; width: 12px;}.two:nth-child(7) { transform: rotate(42deg); background: black; height: 12px; width: 12px;}.two:nth-child(8) { transform: rotate(48deg); background: black; height: 12px; width: 12px;}.two:nth-child(9) { transform: rotate(54deg); background: black; height: 12px; width: 12px;}.two:nth-child(10) { transform: rotate(60deg); background: black; height: 12px; width: 12px;}.two:nth-child(11) { transform: rotate(66deg); background: black; height: 12px; width: 12px;}.two:nth-child(12) { transform: rotate(72deg); background: black; height: 12px; width: 12px;}.two:nth-child(13) { transform: rotate(78deg); background: black; height: 12px; width: 12px;}.two:nth-child(14) { transform: rotate(84deg); background: black; height: 12px; width: 12px;}.two:nth-child(15) { transform: rotate(90deg); background: black; height: 12px; width: 12px;}.two:nth-child(16) { transform: rotate(96deg); background: black; height: 12px; width: 12px;}.two:nth-child(17) { transform: rotate(102deg); background: black; height: 12px; width: 12px;}.two:nth-child(18) { transform: rotate(108deg); background: black; height: 12px; width: 12px;}.two:nth-child(19) { transform: rotate(114deg); background: black; height: 12px; width: 12px;}.two:nth-child(20) { transform: rotate(120deg); background: black; height: 12px; width: 12px;}.two:nth-child(21) { transform: rotate(126deg); background: black; height: 12px; width: 12px;}.two:nth-child(22) { transform: rotate(132deg); background: black; height: 12px; width: 12px;}.two:nth-child(23) { transform: rotate(138deg); background: black; height: 12px; width: 12px;}.two:nth-child(24) { transform: rotate(144deg); background: black; height: 12px; width: 12px;}.two:nth-child(25) { transform: rotate(150deg); background: black; height: 12px; width: 12px;}.two:nth-child(26) { transform: rotate(156deg); background: black; height: 12px; width: 12px;}.two:nth-child(27) { transform: rotate(162deg); background: black; height: 12px; width: 12px;}.two:nth-child(28) { transform: rotate(168deg); background: black; height: 12px; width: 12px;}.two:nth-child(29) { transform: rotate(174deg); background: black; height: 12px; width: 12px;}.two:nth-child(30) { transform: rotate(180deg); background: black; height: 12px; width: 12px;}.two:nth-child(31) { transform: rotate(186deg); background: black; height: 12px; width: 12px;}.two:nth-child(32) { transform: rotate(192deg); background: black; height: 12px; width: 12px;}.two:nth-child(33) { transform: rotate(198deg); background: black; height: 12px; width: 12px;}.two:nth-child(34) { transform: rotate(204deg); background: black; height: 12px; width: 12px;}.two:nth-child(35) { transform: rotate(210deg); background: black; height: 12px; width: 12px;}.two:nth-child(36) { transform: rotate(216deg); background: black; height: 12px; width: 12px;}.two:nth-child(37) { transform: rotate(222deg); background: black; height: 12px; width: 12px;}.two:nth-child(38) { transform: rotate(228deg); background: black; height: 12px; width: 12px;}.two:nth-child(39) { transform: rotate(234deg); background: black; height: 12px; width: 12px;}.two:nth-child(40) { transform: rotate(240deg); background: black; height: 12px; width: 12px;}.two:nth-child(41) { transform: rotate(246deg); background: black; height: 12px; width: 12px;}.two:nth-child(42) { transform: rotate(252deg); background: black; height: 12px; width: 12px;}.two:nth-child(43) { transform: rotate(258deg); background: black; height: 12px; width: 12px;}.two:nth-child(44) { transform: rotate(264deg); background: black; height: 12px; width: 12px;}.two:nth-child(45) { transform: rotate(270deg); background: black; height: 12px; width: 12px;}.two:nth-child(46) { transform: rotate(276deg); background: black; height: 12px; width: 12px;}.two:nth-child(47) { transform: rotate(282deg); background: black; height: 12px; width: 12px;}.two:nth-child(48) { transform: rotate(288deg); background: black; height: 12px; width: 12px;}.two:nth-child(49) { transform: rotate(294deg); background: black; height: 12px; width: 12px;}.two:nth-child(50) { transform: rotate(300deg); background: black; height: 12px; width: 12px;}.two:nth-child(51) { transform: rotate(306deg); background: black; height: 12px; width: 12px;}.two:nth-child(52) { transform: rotate(312deg); background: black; height: 12px; width: 12px;}.two:nth-child(53) { transform: rotate(318deg); background: black; height: 12px; width: 12px;}.two:nth-child(54) { transform: rotate(324deg); background: black; height: 12px; width: 12px;}.two:nth-child(55) { transform: rotate(330deg); background: black; height: 12px; width: 12px;}.two:nth-child(56) { transform: rotate(336deg); background: black; height: 12px; width: 12px;}.two:nth-child(57) { transform: rotate(342deg); background: black; height: 12px; width: 12px;}.two:nth-child(58) { transform: rotate(348deg); background: black; height: 12px; width: 12px;}.two:nth-child(59) { transform: rotate(354deg); background: black; height: 12px; width: 12px;}.two:nth-child(60) { transform: rotate(360deg); background: black; height: 12px; width: 12px;}.two:nth-child(61) { transform: rotate(366deg); background: black; height: 12px; width: 12px;}.spokes { position: absolute; top: 1px; left: 101px;}.rim { position: absolute; height: 202px; width: 202px; background: transparent; margin-left: 90px; border-radius: 100%; border: 13px solid #DA635D; animation: rotate 9s linear infinite;}.circleone { position: absolute; background: gray; border-radius: 100%; height: 55px; width: 55px; border: 1px solid black; z-index: -1; top: 83px; left: 175px;}.circletwo { position: absolute; background: gray; border-radius: 100%; height: 55px; width: 55px; border: 1px solid black; z-index: -1; right: 220px; top: 83px;}.wheelbar { height: 115px; width: 11px; position: absolute; background: #DA635D; transform: rotate(90deg); right: 164px; top: 54px; border-radius: 5px; z-index: -2;}.wheelbarangled { height: 142px; width: 12px; position: absolute; transform: rotate(65deg); background: #DA635D; border-radius: 5px; top: -7px; right: 162px; z-index: -2;}@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.wheel { z-index: -3; position: absolute;}.wheel.second { position: absolute; right: 450px; top: 0px; z-index: -3;}.two { transform-origin: 125px; position: absolute; left: -24px; top: 95px;}.gears { position: absolute; height: 55px; width: 55px; background: gray; border-radius: 100%; top: 83px; right: 67px; border: 2px solid black;}.gears .pedal { position: absolute; width: 55px; height: 8px; background: black; transform: rotate(-35deg); transform-origin: left center; top: 21px; left: 23px; animation: pedal 2s ease-out infinite;}.gears .pedal:after { content: ""; position: absolute; display: block; background: black; height: 10px; width: 35px; transform: rotate(35deg); transform-origin: center center; top: -3px; left: 39px; animation: rotate1 2s linear infinite;}@keyframes rotate1 { 100% { transform: rotate(180deg); }}.seatbar { position: absolute; width: 15px; height: 203px; background: #DA635D; transform: rotate(-12deg); right: 114px; z-index: -3; top: -116px;}.mainbar { position: absolute; background: #DA635D; height: 352px; width: 23px; transform: rotate(45deg); top: -175px; z-index: -3; left: -5px;}.crossbar { position: absolute; height: 12px; width: 200px; background: #DA635D; right: -70px; top: -50px; transform: rotate(-5deg);}.frontwheelbar { position: absolute; height: 267px; width: 13px; background: #DA635D; transform: rotate(-18deg); top: -168px; left: 152px; z-index: -3;}.steeringwheel { position: absolute; background: black; height: 13px; width: 80px; transform: rotate(-20deg); top: -160px; left: 68px;}.steeringwheel:after { content: ""; position: absolute; display: block; height: 13px; width: 80px; background: black; top: -25px; left: 5px; transform: rotate(38deg);}.seat { position: absolute; display: block; background: black; height: 30px; width: 92px; top: -135px; border-top-right-radius: 250px 100px; border-top-left-radius: 14px; border-bottom-left-radius: 100px 100px; border-bottom-right-radius: 15px; right: 92px;}@keyframes pedal { 100% { transform: rotate(325deg); }}
Raw
codespector.html
<!-- content to be placed inside <body>…</body> -->
<div class="bike"> <div class="wheel"> <div class="rim"> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="spokes"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> <div class="wheel second"> <div class="rim"> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="two"></div> <div class="spokes"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> <div class="circleone"></div> <div class="circletwo"></div> <div class="wheelbar"></div> <div class="wheelbarangled"></div> <div class="gears"> <div class="pedal"></div> </div> <div class="seatbar"></div> <div class="mainbar"></div> <div class="crossbar"></div> <div class="frontwheelbar"></div> <div class="steeringwheel"></div> <div class="seat"></div></div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment