დაყენების ინსტრუქცია: ქვემოთ მოყვანილი სკრიპტი ჩასვით საიტის ბლოკში
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>CodePen - Cube Clock</title> <link rel="canonical" href="https://codepen.io/stix/pen/mVXypr"> <style> @font-face { font-family: 'Digital-7'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');font-weight: normal;font-style: normal;} ::selection{background:#333;}::-moz-selection{background:#111;} *,html{margin:0;} body{background:#333} figure{width:210px;height:210px;position:absolute;top:50%;left:50%;margin-top:-105px;margin-left:-105px;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(-35deg) rotateY(45deg);transform: rotateX(-35deg) rotateY(45deg);transition:2s;} figure:hover{-webkit-transform:rotateX(-50deg) rotateY(45deg);transform:rotateX(-50deg) rotateY(45deg);} .face{width:100%;height:100%;position:absolute;-webkit-transform-origin: center;transform-origin: center;background:#000;text-align:center;} p{font-size:180px;font-family: 'Digital-7';margin-top:20px;color:#2982FF;text-shadow:0px 0px 5px #000;-webkit-animation:color 10s infinite;animation:color 10s infinite;line-height:180px;} .front{-webkit-transform: translate3d(0, 0, 105px);transform: translate3d(0, 0, 105px);background:#111;} .left{-webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);transform: rotateY(-90deg) translate3d(0, 0, 105px);background:#151515;} .top{-webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);transform: rotateX(90deg) translate3d(0, 0, 105px);background:#222;} @keyframes color{ 0%{color:#2982ff;text-shadow:0px 0px 5px #000;} 50%{color:#cc4343;text-shadow:0px 0px 5px #ff0000;} } @-webkit-keyframes color{ 0%{color:#2982ff;text-shadow:0px 0px 5px #000;} 50%{color:#cc4343;text-shadow:0px 0px 5px #ff0000;} } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <figure> <div class="face top"><p id="s"></p></div> <div class="face front"><p id="m"></p></div> <div class="face left"><p id="h"></p></div> </figure> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script id="rendered-js" > function date_time(id) { date = new Date(); h = date.getHours(); if (h < 10) { h = "0" + h; } m = date.getMinutes(); if (m < 10) { m = "0" + m; } s = date.getSeconds(); if (s < 10) { s = "0" + s; } document.getElementById("s").innerHTML = '' + s; document.getElementById("m").innerHTML = '' + m; document.getElementById("h").innerHTML = '' + h; setTimeout('date_time("' + "s" + '");', '1000'); return true; } window.onload = date_time('s'); //# sourceURL=pen.js </script> </body> </html>
დააკოპირეთ
