Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Pure CSS3 Robot with JS Clocks

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š 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

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

...



๐Ÿ“Œ Pure CSS3 Robot with JS Clocks


๐Ÿ“ˆ 72.56 Punkte

๐Ÿ“Œ be quiet! FX mit Light Wings: Pure Base, Pure Loop und Pure Rock leuchten jetzt


๐Ÿ“ˆ 42.19 Punkte

๐Ÿ“Œ be quiet! FX mit Light Wings: Pure Base, Pure Loop und Pure Rock leuchten jetzt


๐Ÿ“ˆ 42.19 Punkte

๐Ÿ“Œ [WIP] The Pure Bash Bible - Documenting pure bash ways to do various tasks.


๐Ÿ“ˆ 28.13 Punkte

๐Ÿ“Œ pure as in pure bash text editor


๐Ÿ“ˆ 28.13 Punkte

๐Ÿ“Œ Tineco PURE ONE S12 Pro EX und PURE ONE S12 im Test


๐Ÿ“ˆ 28.13 Punkte

๐Ÿ“Œ 6/7/18 CSS3 Side Channel Attack | AT&T ThreatTraq


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ Preview of eXternOS Beta 2, a distro using its own desktop built entirely in JS, HTML5, and CSS3


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ Learn HTML5, CSS3, JS, and More With This $40 Web Developer Course Bundle


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ CVE-2022-3601 | Image Hover Effects CSS3 Plugin up to 4.5 on WordPress Setting cross site scripting


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ CSS โ€“ CSS3 opacity gradient


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ Webdesign: So lernst du spielerisch CSS3-Grids


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ Greyscale image with filter in CSS3


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ CSS3 Selectors Series - 1


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ HTML5 und CSS3


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ How to Apply CSS3 Transforms to Background Images


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ A Quick Look at CSS3 Multiple Backgrounds (+ Examples)


๐Ÿ“ˆ 26.53 Punkte

๐Ÿ“Œ While You Were Offline: Hey Yโ€™All, Remember to Set Your Doomsday Clocks Forward


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ How Do PCs and Phones Set Their Own Clocks?


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Fermi Satellite Clocks Pulsar Going 2.5 Million Miles Per Hour


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Zendesk clocks 10,000 accounts accessed by miscreants before November 2016


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ How to add multiple clocks on Windows 10


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ How to get clocks for multiple time zones on the menu bar on macOS


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Comparing thermals, clocks and performance of R5 3500X and i5-9400F under Linux


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Physicists Find That As Clocks Get More Precise, Time Gets More Fuzzy


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Lithuania Calls On EU To Stop Adjusting Clocks For Daylight Savings


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ The 5 best alarm clocks of 2022


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ The 4 best sunrise alarm clocks of 2022


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Singapore clocks higher ransomware attacks, warns of IoT risks


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ I know it sounds ridiculous but I forgot how useful digital clocks can be


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ It sounds ridiculous but I forgot how useful digital clocks can be


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Puzzle โ€“ Degrees between Hand of Clocks on 3:15


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Research Suggests Effects of Shift Work or Jet Lag On Our Body Clocks Can Be Reduced By Simply Changing Meal Times


๐Ÿ“ˆ 21.63 Punkte

๐Ÿ“Œ Frequency Deviations In Continental Europe Are Causing Electric Clocks To Run Behind By 5 Minutes


๐Ÿ“ˆ 21.63 Punkte











matomo