800+ IT
News
als RSS Feed abonnieren📚 Pure CSS3 Robot with JS Clocks
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to
What is a css3 latte art logo? How do you make a css3 latte art logo?
Pure CSS3 Robot with JS Clocks - HTML Code:
<!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 - CSS Code:
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 - JS Code:
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);
👉 Source & Preview: https://scriptcodes.co/pure-css3-robot-with-js-clocks-kjubd
...