<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <style> .clock { width: 200px; height: 200px; border: solid 10px #333; border-radius: 50%; margin: calc(50vh - 100px) calc(50% - 100px); position: relative; background: rgba(256, 256, 256, 0.25); cursor: pointer; } @media only screen and (min-width: 768px) and (min-height: 540px) { .clock { width: 300px; height: 300px; border: solid 15px #333; margin: calc(50vh - 150px) calc(50% - 150px); } } .dot { background: red; width: 10px; height: 10px; position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); display: none; } .spire { position: absolute; } .hour { top: calc(50% - 37.5px); left: calc(50% - 2.5px); width: 5px; height: 40px; border-radius: 0 0 5px 5px; background: #333; z-index: 4; transform-origin: 2.5px 37.5px; transition: transform 2s ease; } @media only screen and (min-width: 768px) and (min-height: 540px) { .hour { top: calc(50% - 57.5px); left: calc(50% - 2.5px); width: 5px; height: 60px; transform-origin: 2.5px 57.5px; } } .min { top: calc(50% - 67.5px); left: calc(50% - 2.5px); width: 5px; height: 70px; border-radius: 0 0 5px 5px; background: rgba(167, 139, 131, 1); z-index: 3; transform-origin: 2.5px 67.5px; transition: transform 1s ease; } @media only screen and (min-width: 768px) and (min-height: 540px) { .min { top: calc(50% - 102.5px); left: calc(50% - 2.5px); width: 5px; height: 105px; transform-origin: 2.5px 102.5px; } } .sec { top: calc(50% - 78.75px); left: calc(50% - 1.25px); width: 2.5px; height: 80px; border-radius: 0 0 2.5px 2.5px; background: rgba(231, 76, 60, 1); z-index: 2; transform-origin: 1.25px 78.75px; transition: transform .5s ease; } @media only screen and (min-width: 768px) and (min-height: 540px) { .sec { top: calc(50% - 118.75px); left: calc(50% - 1.25px); width: 2.5px; height: 120px; transform-origin: 1.25px 118.75px; } } .digit { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; font: 42px/200px Arial; color: rgba(32, 32, 32, 0.6); display: none; z-index: -10; } @media only screen and (min-width: 768px) and (min-height: 540px) { .digit { top: calc(50% - 150px); left: calc(50% - 150px); width: 300px; font: 58px/300px Arial; } } .clock:hover + .digit { display: block; } </style> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 text-center"> <div class="clock"> <div class="dot"></div> <div class="spire hour"></div> <div class="spire min"></div> <div class="spire sec"></div> </div> <div class="digit">00:00</div> </div> </div> </div> <script src="https://bootstraptema.ru/snippets/clock/2017/jsclock/jsclock.js"></script>
დააკოპირეთ
