Pure CSS3 Robot with JS clocks
How do I make an pure css3 robot with js clocks?
What is a pure css3 robot with js clocks? How do you make a pure css3 robot with js clocks? This script and codes were developed by B. on 21 December 2022, Wednesday.
Pure CSS3 Robot with JS clocks Previews
Pure CSS3 Robot with JS clocks - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Robot with JS clocks</title> <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<title>CSS3 Little Robot</title>
<hgroup> <h1>CSS3 Robot with jQuery Clocks</h1> <h2>The Little Blue Bot</h2>
</hgroup> <div class="main"> <div class="zigzag"> <div></div> <!-- zigzag Start --> <ul class="zigzag-line"> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> <li></li> <!-- zigzag 1 --> </ul> <div></div> <!-- zigzag End --> </div> <!-- zigzag --> <!-- Robots Head --> <div class="head"> <div class="eye l-eye"> <div class="out-eye"> <div class="mid-eye"> <div class="in-eye"> <div></div> </div> <!-- in eye --> </div> <!-- mid eye --> </div> <!-- out eye --> </div> <!-- Left eye --> <div class="eye r-eye"> <div class="out-eye"> <div class="mid-eye"> <div class="in-eye"> <div></div> </div> <!-- in eye --> </div> <!-- mid eye --> </div> <!-- out eye --> <div class="ear l-ear"> </div> <!-- Left ear --> <div class="ear r-ear"> </div> <!-- Right ear --> <div class="nose"> <div></div> </div> <!-- nose --> <div class="lips"> <!-- Using felxbox for teeth --> <div class="teeth"> <div></div> <!-- tooth 1 --> <div></div> <!-- tooth 2 --> <div></div> <!-- tooth 3 --> <div></div> <!-- tooth 4 --> <div></div> <!-- tooth 5 --> <div></div> <!-- tooth 6 --> <div></div> <!-- tooth 7 --> <div></div> <!-- tooth 8 --> <div></div> <!-- tooth 9 --> <div></div> <!-- tooth 10 --> </div> <!-- teeth --> </div> <!-- lips --> </div> </div><!-- head --> <!-- Robots Neck --> <div class="neck"> </div> <!-- neck --> <div class="body-container"> <!-- Robots Shoulders --> <div class="shoulders l-shoulder"> <!-- Using nth: child to select divs --> <div></div> <!-- nth:child small rec --> <div></div> <!-- nth:child big rec --> </div> <!-- Left Shoulder --> <div class="shoulders r-shoulder"> <!-- Using nth: child to select divs --> <div></div> <!-- nth:child small rec --> <div></div> <!-- nth:child big rec --> </div> <!-- Right Shoulder --> <!-- Robots Arms --> <div class="arm l-arm"> <!-- arm > div to style div --> <div></div> <!-- nth:child stud --> <div></div> <!-- nth:child stud --> </div> <!-- Left arm --> <div class="arm r-arm"> <!-- arm > div to style div --> <div></div> <!-- nth:child stud --> <div></div> <!-- nth:child stud --> </div> <!-- Right arm --> <!-- Robots Body --> <div class="rb-body"> <div class="engine"> <div class="screws l-push"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <br/> <div class="screws l-push"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="screws screw-down"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="screws screw-down l-screw-in"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="screws screw-down r-screw-in"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="screws screw-down r-screw-out"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="l-dial out-border"> <div class="in-border"> <div id="Date"></div> <ul class="digital-clock"> <li id="dighours"></li> <li id="point">:</li> <li id="digmin"></li> <li id="point">:</li> <li id="digsec"></li> </ul> </div> </div> <!-- Left Dial Inner border --> </div> <!-- Left Dial Outter Border --> <div class="r-c-dial out-c-border"> <div class="in-c-border"> <!-- Make the clock --> <ul id="clock"> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> </ul> <!-- Make the clock handles --> <div class="clock-dials"> <div></div> <!-- 12 --> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> <div></div> <!-- 4 --> <div></div> <!-- 5 --> <div></div> <!-- 6 --> <div></div> <!-- 7 --> <div></div> <!-- 8 --> <div></div> <!-- 9 --> <div></div> <!-- 10 --> <div></div> <!-- 11 --> </div> <!-- Clock --> <div class="clock-pin"></div> </div> <!-- Right Circle Dial Inner border --> </div> <!-- Right Circle Dial Outter Border --> <div class="m-engine out-border"> <div class="in-border"> <div class="top-block"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> <div></div> <!-- 4 --> <div></div> <!-- 5 --> <div class="mask"></div> <!-- mask --> <div class="cover"></div> <!-- cover --> </div> <!-- Top Block --> <div class="coil-large"> <div class="twelve-point-star"></div> <div class="twelve-point-star-two"></div> <div class=coil-large-inner> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> </div> </div> <!-- Coil Large --> <div class="belts"> <div class="blt-1"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> </div> <div class=" blt-2"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> </div> <div class="blt-3"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> </div> </div> <!-- Belts --> <div class="fan-rubber"> <div></div> <div></div> </div> <div class="fan-belt"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> <div></div> <!-- 4 --> </div><!-- Fan belt --> <div class="coil-small"> <div class="twelve-point-star-small"></div> <div class=coil-small-inner> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> </div> </div> <!-- coil small --> <div class="bottom-block"> <div class="battery"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <ul class="screw-four"> <li></li> <li></li> <li></li> <li></li> </ul> </div><!-- battery --> <div class="transformers"> <ul class="trnf-1"> <li></li> <!-- 1 --> <li></li> <!-- 2 --> <li></li> <!-- 3 --> </ul> <!-- trnf 1 --> <ul class="trnf-2"> <li></li> <!-- 1 --> <li></li> <!-- 2 --> <li></li> <!-- 3 --> </ul> <!-- trnf 2 --> <ul class="trnf-3"> <li></li> <!-- 1 --> <li></li> <!-- 2 --> <li></li> <!-- 3 --> </ul> <!-- trnf 3 --> </div> <!-- transformers --> <div class="fuses"> <div class="fuse-1"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> <div></div> <!-- 4 --> <div></div> <!-- 5 --> </div> <!-- fuse 1 --> <div class="fuse-2"> <div></div> <!-- 1 --> <div></div> <!-- 2 --> <div></div> <!-- 3 --> <div></div> <!-- 4 --> <div></div> <!-- 5 --> </div> <!-- fuse 2 --> </div> <!-- fuses --> <div class="bottom-base"> <div class="bh-1"> <div></div> <!-- 1 --> </div> <!-- Base hole 1 --> <div class="bh-2"> <div></div> <!-- 1 --> </div> <!-- Base hole 2 --> <div class="bh-3"> <div></div> <!-- 1 --> </div> <!-- Base hole 3 --> <div class="bh-4"> <div></div> <!-- 1 --> </div> <!-- Base hole 4 --> <div class="bh-5"> <div></div> <!-- 1 --> </div> <!-- Base hole 5 --> <div class="wire wire-vert"> </div> <!-- Wire vert --> <div class="wire wire-hoz"> </div> <!-- Wire hoz --> <div class="wire wire-vert wv-2"> </div> <!-- Wire vert --> </div> <!-- Bottom base --> </div> <!-- Bottom Block --> </div> <!-- Main Inner border --> </div> <!-- Main Engine --> </div> <!-- engine --> <!-- Robots Privates --> <div class="private-bit"> </div> <!-- Private Bit --> </div> <!-- rb-body --> <!-- Robots Legs --> <div class="lower-body"> <div class="leg l-leg"> <div></div> <!-- nth:child grey --> <div></div> <!-- nth:child blue --> </div> <!-- Left Leg --> <div class="leg r-leg"> <div></div> <!-- nth:child grey --> <div></div> <!-- nth:child blue --> </div> <!-- Right Leg --> <!-- Robots Feet --> <div class="foot l-foot"> </div> <!-- Left Foot --> <div class="foot r-foot"> </div> <!-- Right Foot --> </div> <!-- Body Lower --> </div> <!-- Main wrapper --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pure CSS3 Robot with JS clocks - Script Codes CSS Codes
body { background: #9ACDCB;
}
.main { width: 500px; height: 900px; padding: 30px 20px 40px 20px; margin: 0 auto; background:#FCFCFC; border: 10px solid #D54620; box-shadow: 0 0 5px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
h1,
h2 { font-family: 'Lato', sans-serif; text-align: center; color: #D54620; text-shadow: rgba(255, 255, 255, 0.47) 1px 1px;
}
.zigzag { width: 202px; height: 44px; margin: 0 auto;
}
.zigzag > div { position: absolute; height: 58px; border-left-color: #534F4F; border-left-style: solid; border-left-width: 2px; margin-top: 38px;
}
.zigzag > div:nth-child(1) {
margin-left: 200px;
}
.zigzag-line { margin: 0; padding: 0;
}
.zigzag-line li { list-style: none; float: left; height: 44px; border-left-color: #534F4F; border-left-style: solid; border-left-width: 2px; margin-top: -4px;
}
.zigzag-line > li:nth-child(even) { -webkit-transform: rotate(-7.5deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(-7.5deg); /* Firefox 16+, Opera 12.50+ */ margin-left: 3px;
}
.zigzag-line > li:nth-child(odd) { -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(7.5deg); /* Firefox 16+, Opera 12.50+ */ margin-left: 3px;
}
.ear { background-color:rgb(213,70,32); width: 12px; height:66px; position: absolute; top: 18px;
}
.l-ear { border-top-left-radius: 10px; border-bottom-left-radius: 10px; left: -132px;
}
.r-ear { border-top-right-radius: 10px; border-bottom-right-radius: 10px; right: 108px;
}
.head { background-color:rgb(154,205,203); width:202px; height:202px; border-radius: 12px; margin: 0 auto;
}
.eye {
}
.out-eye { background-color:rgb(205,127,64); border-color:rgb(75,71,71); width: 55px; height: 55px; border-width:2px; border-style:solid; border-radius: 100%;
}
.mid-eye { background-color:rgb(255,255,255); border-color:rgb(75,71,71); width: 43px; height: 43px; border-width:2px; border-style:solid; border-radius: 100%; margin: 4px;
}
.in-eye { background-color:transparent; border-color:rgb(75,71,71); width: 35px; height: 35px; border-width:2px; border-style: dotted; border-radius: 100%; margin: 2px;
}
.in-eye > div { background-color:rgb(75,71,71); width: 10px; height: 10px; border-radius: 100%; margin: 12px;
}
.l-eye { position: relative; top: 33px; left: 23px;
}
.r-eye { position: relative; top: -25px; right: -120px;
}
.nose { width: 0; height: 0; border-bottom: 50px solid #4B4747; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; left: -50px; top: 45px;
}
.nose > div { width: 0; height: 0; border-bottom: 44px solid #9ACDCB; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; left: -25px; top: 4px;
}
.lips { background-color:rgb(213,70,32); width:152px; height:30px; border-color:rgb(75,71,71); border-width:2px; border-style:solid; position: relative; top: 55px; right: 98px;
}
.teeth { background-color:white; width:132px; height:10px; border-color:rgb(75,71,71); border-width:2px; border-style:solid; margin: 8px;
}
.teeth > div { width: 10px; height: 10px; border-right-color: #4B4747; border-right-width: 2px; border-right-style: solid; float: left;
}
.neck { background-color: #9ACDCB; width: 154px; height: 14px; margin: 0 auto; margin-top: 1px; margin-bottom: 1px;
}
.shoulders { position: absolute;
}
.l-shoulder {
}
.l-shoulder > div:nth-child(1) { background-color: #E9E9E9; width: 57px; height: 13px; position: relative; top: 30px; left: 27px;
}
.l-shoulder > div:nth-child(2) { background-color: #E9E9E9; width: 23px; height: 37px; position: relative; top: 5px; left: 27px;
}
.r-shoulder {
}
.r-shoulder > div:nth-child(1) { background-color: #E9E9E9; width: 57px; height: 13px; position: relative; top: 30px; left: 416px;
}
.r-shoulder > div:nth-child(2) { background-color: #E9E9E9; width: 23px; height: 37px; position: relative; top: 5px; left: 450px;
}
.arm { background-color:rgb(89,144,140); width: 5px; height: 334px; position: relative; top: 10px;
}
.l-arm { left: 60px;
}
.r-arm { top: -324px; left: 435px;
}
.arm > div { background-color:rgb(203,153,53); width:8px; height:15px; position: relative; left: -1px;
}
.arm > div:nth-child(1) { top: 102px;
}
.arm > div:nth-child(2) { top: 212px;
}
.rb-body { background-color:rgb(154,205,203); width:332px; height:374px; margin: 0 auto; margin-top: -668px; border-radius: 22px;
}
.screws {
}
.screws ul { margin: 0;
}
.screws li { list-style: none; width: 3px; height: 3px; background-color:transparent; border-color:rgb(75,71,71); border-width:1px; border-style:solid; border-radius: 100%; position: relative; float: left; margin: 11px 6px 0px 1px;
}
.l-push { margin-left: 7px;
}
.screw-down { width: 3px; position: absolute; margin-left: -31px;
}
.screw-down li { float: none;
}
.l-screw-in li { margin-left: 20px;
}
.r-screw-in li { margin-left: 288px;
}
.r-screw-out li { margin-left: 307px;
}
.out-border { background-color:#ce8041; border-color:#4c4848; border-width:2px; border-style:solid; border-radius: 12px;
}
.in-border { background-color:#2b2424; border-radius: 9px;
}
.l-dial { width:119px; height:77px; position: relative; top: 35px; left: 45px;
}
.l-dial .in-border { width: 104px; height: 62px; margin: 7px;
}
.out-c-border { background-color:#ce8041; border-color:#4c4848; border-width:2px; border-style:solid; border-radius: 100%;
}
.in-c-border { background-color:rgb(255,255,255); border-color:rgb(75,71,71); border-width:2px; border-style:solid; border-radius: 100%;
}
.r-c-dial { width: 80px; height: 80px; position: relative; top: -47px; left: 203px;
}
.r-c-dial .in-c-border { width: 64px; height: 64px; margin: 6px;
}
.m-engine { width: 238px; height: 203px; margin: 0 auto; margin-top: -34px; margin-left: 45px;
}
.m-engine .in-border { width: 224px; height: 189px; margin: 7px;
}
/* Making the clocks */
/* Digital Clock */
.digital-clock { font-family: 'Orbitron', sans-serif; font-size: 1.05em; margin: 0 auto; margin-left: -29px; padding-top: 20px;
}
.digital-clock li { list-style: none; float: left; color: white;
}
/* Old School Clock */
.clock-dials > div { width: 2px; height: 8px; background-color: #4B4747; position: relative; left: 31px;
}
.clock-dials > div:nth-child(1) {
}
.clock-dials > div:nth-child(2) { top: -3px; left: 47px; -webkit-transform: rotate(30deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(30deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(3) { top: 0px; left: 57px; -webkit-transform: rotate(60deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(60deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(4) { top: 6px; left: 59px; -webkit-transform: rotate(90deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(90deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(5) { top: 12px; left: 54px; -webkit-transform: rotate(120deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(120deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(6) { top: 13px; left: 44px; -webkit-transform: rotate(150deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(150deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(7) { top: 8px;
}
.clock-dials > div:nth-child(8) { top: -4px; left: 16px; -webkit-transform: rotate(210deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(210deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(9) { top: -21px; left: 7px; -webkit-transform: rotate(240deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(240deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(10) { top: -44px; left: 3px; -webkit-transform: rotate(270deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(270deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(11) { top: -65px; left: 6px; -webkit-transform: rotate(300deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(300deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-dials > div:nth-child(12) { top: -84px; left: 16px; -webkit-transform: rotate(330deg); /* Safari 3.1+, Chrome */ /* Firefox 3.5-15 */ /* IE9+ */ /* Opera 10.5-12.00 */ transform: rotate(330deg); /* Firefox 16+, Opera 12.50+ */
}
.clock-pin { position: relative; top: -66px; left: 29px; width: 6px; height: 6px; background-color: red; border-radius: 100%; z-index: 99;
}
#clock { position: absolute; list-style: none;
}
#sec, #min, #hour { position: absolute; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%;
}
#sec { width: 1px; height: 26px; background-color: red; top: -8px; left: 32px; z-index: 3;
}
#min { width: 2px; height: 30px; background-color: black; top: -12px; left: 31px; z-index: 2;
}
#hour { width: 2px; height: 22px; background-color: black; z-index: 1; left: 30px; top: -4px;
}
#sec { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
/* Engine magic */
/* Top Block */
.top-block { height: 20px; width: 80px; margin-left: 85px;
}
.top-block > div:nth-child(1) { background-color:rgb(255,255,255); width: 12px; height: 23px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
.top-block > div:nth-child(2) { background-color:rgb(213,70,32); width: 6px; height: 6px; position: relative; top: -23px; left: 14px;
}
.top-block > div:nth-child(3) { background-color:rgb(213,70,32); width: 63px; height: 6px; position: relative; top: -29px; left: 23px;
}
.top-block > div:nth-child(4) { background-color:rgb(213,70,32); width: 6px; height: 15px; position: relative; top: -26px; left: 14px;
}
.top-block > div:nth-child(5) { background-color:rgb(213,70,32); width: 63px; height: 15px; position: relative; top: -41px; left: 23px;
}
/* CSS3 Shapes Large Coil */
.coil-large { position: relative; top: -21px; left: 144px; margin: 0; width: 66px; overflow: hidden; padding-left: 14px; height: 105px; border-top-right-radius: 10px;
}
.mask { border-top-right-radius: 9px; background: #9ACDCB; height: 14px; width: 14px; position: relative; top: -66px; left: 125px; z-index: 99;
}
.cover { border-top-right-radius: 9px; background: #CE8041; height: 14px; width: 14px; position: relative; top: -86px; left: 126px; z-index: 80;
}
/* KeyFrames */
@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);}}
@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@-webkit-keyframes spin-two{from{-webkit-transform:rotate(45deg);} to{-webkit-transform:rotate(405deg);}}
@keyframes spin-two{from{-webkit-transform:rotate(45deg);transform:rotate(45deg);} to{-webkit-transform:rotate(405deg);transform:rotate(405deg);}}
@-webkit-keyframes spin-op{from{-webkit-transform:rotate(360deg);} to{-webkit-transform:rotate(0deg);}}
@keyframes spin-op{from{-webkit-transform:rotate(360deg);transform:rotate(360deg);} to{-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
.twelve-point-star { height: 70px; width: 70px; background-color:rgb(233,233,233); position: absolute; border-radius: 2px; -webkit-animation: spin 33s infinite linear; animation: spin 33s infinite linear;
}
.twelve-point-star:before { height: 70px; width: 70px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(30deg); transform: rotate(30deg); border-radius: 2px;
}
.twelve-point-star:after { height: 70px; width: 70px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(-30deg); transform: rotate(-30deg); border-radius: 2px;
}
.twelve-point-star-two { height: 70px; width: 70px; background-color:rgb(233,233,233); position: absolute; border-radius: 2px; /* Rotate */ -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: spin-two 33s infinite linear; animation: spin-two 33s infinite linear;
}
.twelve-point-star-two:before { height: 70px; width: 70px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(60deg); transform: rotate(60deg); border-radius: 2px;
}
.twelve-point-star-two:after { height: 70px; width: 70px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(-60deg); transform: rotate(-60deg); border-radius: 2px;
}
.coil-large-inner > div { position: relative;
}
.coil-large-inner > div:nth-child(1) { background-color: #9ACDCB; width: 80px; height: 80px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; left: -6px; top: -6px;
}
.coil-large-inner > div:nth-child(2) { background-color: #E9E9E9; width: 21px; height: 21px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; left: 25px; top: -57px;
}
.coil-large-inner > div:nth-child(3) { background-color: #4B4747; width: 11px; height: 11px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; left: 30px; top: -75px;
}
/* Coil Small */
.coil-small { position: relative; top: -39px; left: 180px;
}
.twelve-point-star-small { height: 25px; width: 25px; background-color:rgb(233,233,233); position: absolute; border-radius: 2px; -webkit-animation: spin-op 16s infinite linear; animation: spin-op 16s infinite linear;
}
.twelve-point-star-small:before { height: 25px; width: 25px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.twelve-point-star-small:after { height: 25px; width: 25px; background-color:rgb(233,233,233); content:""; position: absolute; /* Rotate */ -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.coil-small-inner {
}
.coil-small-inner > div:nth-child(1) { background-color: #9ACDCB; width: 21px; height: 21px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; position: absolute; margin: 1px;
}
.coil-small-inner > div:nth-child(2) { background-color:rgb(233,233,233); width: 10px; height: 10px; border-color:rgb(75,71,71); border-width:1px; border-style:solid; border-radius: 100%; position: absolute; margin: 6px;
}
.coil-small-inner > div:nth-child(3) { background-color: #4B4747; width: 4px; height: 4px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; position: absolute; margin: 9px;
}
/* Fan Belt */
.fan-belt { position: relative; top: -81px; left: 60px;
}
.fan-belt > div { position: absolute;
}
.fan-belt > div:nth-child(1) { background-color:rgb(233,233,233); width: 84px; height: 84px; border-color:rgb(75,71,71); border-width:1px; border-style:solid; border-radius: 100%;
}
.fan-belt > div:nth-child(2) { background-color: #9ACDCB; width: 72px; height: 72px; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; margin: 6px;
}
.fan-belt > div:nth-child(3) { background: url(https://wearebold.co.uk/fan-belt.svg) no-repeat; width: 64px; height: 64px; margin: 11px; -webkit-animation: spin-op 16s infinite linear; animation: spin-op 16s infinite linear;
}
.fan-belt > div:nth-child(4) {
}
/* Fan Rubber */
.fan-rubber > div { position: absolute; width: 60px; height: 3px; background-color: #9ACDCB; border-color: #4B4747; border-width: 1px; border-style: solid;
}
.fan-rubber > div:nth-child(1) { margin-top: -49px; margin-left: 135px; /* Rotate */ -webkit-transform: rotate(23deg); transform: rotate(23deg);
}
.fan-rubber > div:nth-child(2) { margin-top: -16px; margin-left: 125px; /* Rotate */ -webkit-transform: rotate(-8deg); transform: rotate(-8deg);
}
/* Belts */
.belts { position: absolute; margin-top: -100px; margin-left: 10px;
}
.belts > div { position: relative; background-color: #9ACDCB; width: 40px; height: 11px; margin-bottom: 21px;
}
.blt-1 > div,
.blt-2 > div,
.blt-3 > div { position: absolute; background-color: #D54620; border-color: #4B4747; border-width: 1px; border-style: solid; width: 11px; height: 11px; margin-top: -1px; margin-left: -4px; border-radius: 100%;
}
.blt-1 > div:nth-child(1),
.blt-2 > div:nth-child(1),
.blt-3 > div:nth-child(1) { margin-left: 35px;
}
.blt-1 > div:nth-child(2),
.blt-2 > div:nth-child(2),
.blt-3 > div:nth-child(2) { margin: 4px; background-color: #9ACDCB; width: 34px; height: 1px; border-radius: 0; z-index: 1;
}
/* Battery */
.screw-four { margin: 0 0 0 -30px;
}
.screw-four li { list-style: none; width: 3px; height: 3px; background-color: transparent; border-color: #4B4747; border-width: 1px; border-style: solid; border-radius: 100%; position: relative; float: left;
}
.screw-four li:nth-child(1) { margin: 2px 50px 2px -7px;
}
.screw-four li:nth-child(2) { margin: -7px 0px 3px 46px;
}
.screw-four li:nth-child(3) { margin: 14px 49px 0px -7px;
}
.screw-four li:nth-child(4) { margin: -4px 0px 0px 46px;
}
.battery { background-color: #D54620; width: 64px; height: 33px; margin: 3px;
}
.battery > div { background-color: #E9E9E9; width: 7px; height: 3px; position: absolute; margin-top: -3px; margin-left: 10px;
}
.battery > div:nth-child(2) { margin-left: 47px;
}
/* Transformers */
.transformers { position: absolute; margin-top: -30px; margin-left: 79px;
}
.transformers ul { margin: 0; padding: 0;
}
ul.trnf-1 {
margin-left: 15px;
}
ul.trnf-2 {
margin-left: 40px;
}
ul.trnf-3 {
margin-left: 65px;
}
.trnf-1 > li,
.trnf-2 > li,
.trnf-3 > li { list-style: none; position: absolute;
}
.trnf-1 > li:nth-child(1),
.trnf-2 > li:nth-child(1),
.trnf-3 > li:nth-child(1){ background-color: #9ACDCB; width: 14px; height: 21px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.trnf-1 > li:nth-child(2),
.trnf-2 > li:nth-child(2),
.trnf-3 > li:nth-child(2){ background-color: #9ACDCB; width: 14px; height: 2px; margin-top: 22px;
}
.trnf-1 > li:nth-child(3),
.trnf-2 > li:nth-child(3),
.trnf-3 > li:nth-child(3){ background-color: #9ACDCB; width: 20px; height: 2px; margin-top: 25px; margin-left: -3px;
}
/* Fuses */
.fuses {
}
.fuse-2 { margin-left: 20px;
}
.fuse-1 > div,
.fuse-2 > div { position: absolute; margin-top: -38px; margin-left: 184px;
}
.fuse-1 > div:nth-child(1),
.fuse-2 > div:nth-child(1) { background-color:rgb(233,233,233); width: 3px; height: 3px; margin-left: 191px;
}
.fuse-1 > div:nth-child(2),
.fuse-2 > div:nth-child(2) { background-color: #D54620; width: 17px; height: 32px; margin-top: -35px;
}
.fuse-1 > div:nth-child(3),
.fuse-2 > div:nth-child(3) { background-color:rgb(233,233,233); width: 17px; height: 4px; margin-top: -30px;
}
.fuse-1 > div:nth-child(4),
.fuse-2 > div:nth-child(4) { background-color:rgb(236,218,89); width: 17px; height: 6px; margin-top: -23px;
}
.fuse-1 > div:nth-child(5),
.fuse-2 > div:nth-child(5) { background-color:rgb(233,233,233); width: 17px; height: 4px; margin-top: -14px;
}
/*Bottom Block*/
.bottom-base { background-color: #9ACDCB; width: 218px; height: 22px; margin: 0 auto; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;
}
/* Base Holes */
.bh-1,
.bh-2,
.bh-3,
.bh-4,
.bh-5 { position: absolute; margin: 2px 0; background-color: #E9E9E9; border-color: #4B4747; border-width: 1px; border-style: solid; width: 16px; height: 16px; border-radius: 100%;
}
.bh-1 { margin-left: 10px;
}
.bh-2 { margin-left: 68px;
}
.bh-3 { margin-left: 98px;
}
.bh-4 { margin-left: 138px;
}
.bh-5 { margin-left: 191px;
}
.bh-1 > div,
.bh-2 > div,
.bh-3 > div,
.bh-4 > div,
.bh-5 > div { background-color:rgb(42,35,35); border-color:rgb(75,71,71); border-width:1px; border-style:solid; width: 10px; height: 10px; margin: 2px; border-radius: 100%;
}
/* Wire */
.wire{ position: absolute; background-color:rgb(236,218,89); border-color:rgb(75,71,71); border-width:1px; border-style:solid; margin-top: 8px;
}
.wire-vert { width: 4px; height: 13px; margin-left: 16px;
}
.wv-2 { margin-left: 197px;
}
.wire-hoz { width: 30px; height: 4px; margin-left: 76px;
}
.private-bit { background-color: #D54620; width: 70px; height: 6px; margin: 0 auto; margin-top: -6px; border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.leg { background-color:rgb(154,205,203); width: 46px; height:221px; position: relative;
}
.l-leg { left: 114px;
}
.l-leg > div:nth-child(1) { background-color:rgb(233,233,233); width:14px; height: 221px; margin-left: 46px;
}
.l-leg > div:nth-child(2) { background-color: #9ACDCB; width: 9px; height: 18px; margin-left: 46px; margin-top: -125px;
}
.r-leg > div:nth-child(1) { background-color:rgb(233,233,233); width:14px; height: 221px; margin-left: -14px;
}
.r-leg > div:nth-child(2) { background-color: #9ACDCB; width: 9px; height: 18px; margin-left: -9px; margin-top: -125px;
}
.r-leg { left: 340px; top: -221px;
}
.foot { height: 0; width: 61px; border-bottom: 60px solid #D54620; border-left: 30px solid transparent; border-right: 30px solid transparent; position: relative; top: -221px; border-radius: 11px;
}
.l-foot { left: 84px;
}
.r-foot { top: -281px; left: 295px;
}
@font-face { font-family: 'ds-digitalnormal'; src: url('http://ewe-extensions.com/fonts/ds-digi-webfont.eot'); src: url('http://ewe-extensions.com/fonts/ds-digi-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ds-digi-webfont.woff') format('woff'), url('http://ewe-extensions.com/fonts/ds-digi-webfont.ttf') format('truetype'), url('http://ewe-extensions.com/fonts/ds-digi-webfont.svg#ds-digitalnormal') format('svg'); font-weight: normal; font-style: normal;
}Pure CSS3 Robot with JS clocks - Script Codes JS Codes
setInterval( function() { var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() { var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
setInterval( function() { // Create a newDate() object and extract the seconds of the current time on the visitor's var seconds = new Date().getSeconds(); // Add a leading zero to seconds value $("#digsec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000);
setInterval( function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $("#digmin").html(( minutes < 10 ? "0" : "" ) + minutes); },1000);
setInterval( function() { // Create a newDate() object and extract the hours of the current time on the visitor's var hours = new Date().getHours(); // Add a leading zero to the hours value $("#dighours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000);
| Developer | B. |
| Username | wearebold |
| Uploaded | December 21, 2022 |
| Rating | 4 |
| Size | 7,759 Kb |
| Views | 22,264 |
Do you need developer help for Pure CSS3 Robot with JS clocks?
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!
B. (wearebold) Script Codes
| Name | Size |
| Instagram Feed with Lightbox2 | 2,895 Kb |
| Simple Preloader | 3,265 Kb |
| Particle Earth Map | 5,106 Kb |
| Alerts | 2,726 Kb |
| Simple CSS3 Button | 2,571 Kb |
| Simple Push Menu | 3,455 Kb |
| Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
| Plane, Goodbye | 9,358 Kb |
| Slide Content Module | 6,634 Kb |
| A Pen by B. | 5,519 Kb |
Create amazing video scripts 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 |
| CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
| Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
| Slider for stackoverflow | KKOKU | 3,222 Kb |
| Rain Landing in a Pond | Edball | 3,009 Kb |
| Compare resources on mobile sites | Gyusza | 3,226 Kb |
| Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| Off Canvas | Mariamarica | 1,870 Kb |
| Brent Burns Tribute Page | Nevada48 | 2,569 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!