1 Star 0 Fork 83

曾庆辉/前端页面效果合集

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
米老鼠时钟 38.40 KB
一键复制 编辑 原始数据 按行查看 历史
木兰君 提交于 2020-12-09 08:37 . add 米老鼠时钟.
<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/jaysalvat/pen/ogQbKB -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #000;
}
#watch {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
width: 450px;
height: 450px;
background: radial-gradient(grey, black 70%);
color: #fff;
font: bold 30px Arial, sans-serif;
}
.digit {
position: absolute;
width: 104%;
height: 104%;
margin: -2%;
text-align: center;
}
.digit span {
display: block;
}
.digit:nth-child(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.digit:nth-child(1) span {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.digit:nth-child(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.digit:nth-child(2) span {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.digit:nth-child(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit:nth-child(3) span {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit:nth-child(4) {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.digit:nth-child(4) span {
-webkit-transform: rotate(-120deg);
transform: rotate(-120deg);
}
.digit:nth-child(5) {
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.digit:nth-child(5) span {
-webkit-transform: rotate(-150deg);
transform: rotate(-150deg);
}
.digit:nth-child(6) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit:nth-child(6) span {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.digit:nth-child(7) {
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
.digit:nth-child(7) span {
-webkit-transform: rotate(-210deg);
transform: rotate(-210deg);
}
.digit:nth-child(8) {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
.digit:nth-child(8) span {
-webkit-transform: rotate(-240deg);
transform: rotate(-240deg);
}
.digit:nth-child(9) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.digit:nth-child(9) span {
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.digit:nth-child(10) {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.digit:nth-child(10) span {
-webkit-transform: rotate(-300deg);
transform: rotate(-300deg);
}
.digit:nth-child(11) {
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
.digit:nth-child(11) span {
-webkit-transform: rotate(-330deg);
transform: rotate(-330deg);
}
.digit:nth-child(12) {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.digit:nth-child(12) span {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#mickey,
#hours,
#minutes {
width: 100%;
height: 100%;
position: absolute;
background: no-repeat center center;
background-size: contain;
}
#mickey {
background-size: 70%;
background-position: 45% 85%;
z-index: 50;
}
#hours,
#minutes,
#minutes:after {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat top center;
background-size: 90px;
background-position: center 5%;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
#hours {
z-index: 10;
}
#minutes {
z-index: 100;
}
#minutes:after {
content: '';
display: block;
-webkit-animation: seconds infinite 1s;
animation: seconds infinite 1s;
}
@-webkit-keyframes seconds {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes seconds {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* Sprites */
#mickey {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22396%22%20height%3D%22497%22%20viewBox%3D%22-6.905%20-5.582%20396%20497%22%20overflow%3D%22visible%22%20enable-background%3D%22new%20-6.905%20-5.582%20396%20497%22%3E%3Cellipse%20cx%3D%22160.677%22%20cy%3D%22123.803%22%20rx%3D%2280.751%22%20ry%3D%2275.888%22%2F%3E%3Cellipse%20cx%3D%22245.615%22%20cy%3D%22109.762%22%20rx%3D%2225.293%22%20ry%3D%2237.927%22%2F%3E%3Cpath%20d%3D%22M137.787%20161.41c29.368%205.696%2056.57%2063.198%2063.512%2067.647%209.96%207.476%2014.41%2018.688%2013.52%2033.817-.72%2011.925-4.45%2024.205-11.22%2037.023-.54.89.18%202.668%201.78%204.98%201.24%201.96%202.49%203.738%203.91%204.984-18.16%2017.63-38.63%2032.4-61.23%2044.5-22.07%2011.57-40.94%2017.98-56.6%2019.05-17.8%201.25-32.4-.71-43.97-6.23-13-6.23-20.65-16.19-22.96-29.9.18%2011.93%205.69%2021.54%2016.37%2028.66%2012.1%208.19%2029.01%2011.57%2050.72%2010.32%2016.19-1.42%2033.82-6.94%2052.86-16.55%2013.17-6.76%2032.04-18.33%2056.42-34.88l-18.69%2030.26c-5.52%201.07-10.68%203.2-15.31%206.58-4.81%203.21-7.48%206.41-8.19%209.61-2.85%201.96-8.37%204.28-16.38%207.12l-24.21%208.01c-22.07%208.01-37.2%2017.45-45.57%2028.48-9.08%2012.1-10.32%2023.85-3.38%2035.6%205.34%209.61%2014.95%2017.62%2028.48%2024.56%209.97%204.98%2021.36%208.01%2033.99%208.72%2012.46.89%2024.74-.35%2036.844-3.73%2012.46-3.56%2023.316-8.9%2032.393-16.37%209.97-7.83%2016.91-17.26%2021-28.3%2018.15%205.16%2036.31%207.83%2054.29%208.55%2016.91.35%2032.75-1.07%2047.52-4.63%2014.24-3.38%2026.34-8.54%2036.13-15.13%209.97-6.76%2016.73-14.6%2020.29-23.67%205.692-14.42%202.85-27.41-8.54-38.63-4.45-4.09-9.61-7.65-15.66-10.68-5.17-2.67-9.97-4.27-14.42-5.16-14.77-2.67-33.82%202.32-57.31%2015.31-1.25-1.6-3.39-3.2-6.06-4.45-2.495-1.42-4.98-2.31-7.3-2.67%205.34-12.99%2012.63-25.8%2021.53-38.44%204.986-.71%2010.68-3.2%2017.27-7.12%206.586-4.09%2011.57-8.19%2014.77-12.64-4.63-10.32-7.83-22.6-9.61-36.67%204.27-20.46.355-38.26-11.925-53.04-10.504-12.81-25.81-22.07-45.57-27.94-13.52-5.53-18.51-7.29%207.02-42.64m5.23-40.3l-6.35-12.47c1.96-3.38%203.026-7.48%203.383-12.28.18-4.45-.355-8.9-1.6-13.17-1.424-4.27-3.56-7.83-6.407-10.5-3.026-2.84-6.586-4.27-10.856-4.45-9.79-.17-15.485%203.92-17.266%2012.46-1.42%206.41-.18%2014.6%203.03%2024.39-2.67%201.07-4.45%202.14-5.34%202.85-4.45-8.19-10.68-14.95-18.69-20.29-7.66-5.16-16.2-8.72-25.99-10.5-9.62-1.96-19.05-2.14-29.02-.71-10.15%201.61-19.58%204.81-28.3%209.79%205.16-11.74%205.87-22.78%201.96-33.1-3.39-9.43-9.79-16.55-19.05-21.71C99.67.53%2089.88-1.08%2079.38.7%2067.81%202.657%2058.02%208.354%2049.834%2018.143c-8.722%2010.145-13.883%2021.18-15.485%2032.75-1.61%2010.856%200%2020.468%204.8%2029.19%204.62%208.72%2011.39%2014.594%2020.47%2017.976%209.61%203.38%2020.29%203.02%2031.68-1.25-2.32%205.34-4.1%2011.03-5.16%2017.26-1.43%207.12-1.6%2013.7-1.07%2019.75M262%2085.94c6.584%208.01%208.9%2017.8%206.94%2029.19-1.958%2012.46-8.72%2024.21-19.757%2035.248-5.874%205.698-12.28%2010.148-19.936%2013.53-7.297%203.383-14.772%205.34-22.427%205.874-7.654.712-14.95-.178-21.537-2.313-7.12-2.49-12.81-6.23-17.26-11.39%202.313-1.25%206.407-2.67%2012.103-4.45-5.873-1.25-11.746.35-17.8%204.63-5.693%204.09-8.363%208.36-8.007%2012.99l3.91-5.16c1.6-1.96%203.2-3.38%204.81-4.63%203.02%202.31%206.05%205.87%209.43%2010.68l8.36%2012.81c3.38%204.8%206.41%208.36%209.08%2010.68%203.73%203.02%207.65%204.45%2011.57%204.45%208.36%200%2015.66-4.28%2022.07-13%201.95-3.03%204.27-6.59%206.22-10.68l4.09-8.72c5.52-2.5%209.79-5.34%2012.82-8.01-.36%202.31-1.6%205.16-3.38%208.54l-3.56%205.51-1.78%202.13.89-2.85%201.06-2.67c-.53%200-1.96%201.78-3.92%205.52l-7.3%2011.75c-7.83%2011.39-15.31%2017.26-22.78%2017.62-7.48.53-14.24-1.43-20.11-5.34-2.5-1.78-7.12-6.05-14.06-12.99-.18.89.89%203.02%203.56%206.58-18.69-4.45-34.18-8.55-46.28-12.28-2.32-3.56-2.85-7.84-2.14-13%20.89-5.17%203.2-10.15%206.76-14.95%204.09-5.34%209.25-9.79%2015.66-13%207.12-3.92%2015.31-6.05%2024.21-6.59-4.45-2.31-10.15-5.87-16.56-10.86-7.12-5.34-13.53-11.04-19.23-16.73-14.77-15.29-19.75-26.5-14.77-33.8%205.16-8.01%2014.24-12.64%2027.23-13.888%2012.1-1.24%2023.14.36%2032.93%204.987l-3.38-3.92c-1.78-1.96-2.85-3.2-3.39-4.27%208.01.18%2016.55%202.67%2025.63%207.47%2010.32%205.34%2018.86%2012.82%2025.09%2022.25l-2.49%202.32c-3.02-6.58-7.48-11.92-13.53-16.19-5.69-4.09-9.43-5.16-11.39-3.56-1.42%201.425-.71%204.27%202.14%208.545%201.43%202.49%204.63%206.41%209.44%2012.1%201.78%203.21%204.45%205.88%207.653%207.836-1.96%205.34-2.85%209.078-2.67%2011.036%202.84-6.588%205.34-11.216%207.47-14.24%203.023-4.09%206.584-6.94%2010.68-8.9.89%203.03%202.49%205.52%204.625%207.652%202.14%201.96%204.452%203.2%207.12%203.74%206.053%201.24%2011.393-1.25%2015.843-7.3zm-38.268.18l-2.32%203.21c-2.49-3.56-4.804-5.514-7.12-6.05-1.244-.18-2.134%200-2.67.536l-7.65-9.61c-2.67-3.92-3.737-6.41-3.027-7.3l3.206.18%206.05%203.38c5.52%204.092%209.97%209.253%2013.53%2015.66zm-24.03%2093.98c3.38-1.42%207.12-1.953%2010.854-1.6%204.806.536%208.366%202.495%2010.323%205.877-6.77%208.72-13.71%2012.28-20.83%2010.68-7.66-1.61-14.95-8.9-22.07-21.9%205.16-1.07%209.96.172%2014.59%203.56%203.73%202.67%206.94%206.4%209.79%2011.21%200-1.78-.89-4.45-2.67-7.83zM341.2%20349.73c10.322%202.312%2019.04%206.94%2026.34%2013.526%2010.856%209.79%2013.882%2021.71%209.075%2035.42-3.202%209.073-10.145%2016.91-20.824%2023.49-10.14%206.23-22.78%2010.855-37.91%2013.882-14.77%203.025-30.25%204.27-46.63%203.738-16.91-.712-32.93-3.205-47.88-7.475%204.45-12.46%204.63-27.76.72-46.1%206.41%203.39%2014.06%205.17%2022.79%205.52%208.01.36%2015.67-.53%2022.79-2.85%207.12-2.49%2012.28-5.69%2015.31-9.96%203.38-4.63%203.74-9.79.89-15.48l12.99-5.69c5.16-2.14%209.61-3.92%2013.17-5.16%2010.5-3.38%2020.11-4.45%2029.19-2.85zm-134.38-35.776l1.42-1.246-3.915%206.77-1.246.89%203.74-6.41zm22.25%2045.92c2.665-1.603%204.8-2.492%206.225-2.848l-2.67%207.83c-.18%201.955.89%203.56%203.203%204.625%202.136%201.25%204.806%201.96%208.366%202.31%208.008.72%2014.77-.53%2020.11-3.55.712-.53%201.78-2.49%203.026-5.87%201.245-3.56%202.313-5.87%202.67-6.4%207.296%201.96%2011.923%205.52%2013.882%2010.68%201.957%204.63%201.067%208.9-2.67%2012.28-2.492%202.32-6.05%204.27-10.678%206.05-4.807%201.61-9.79%202.67-15.31%203.21-13.17%201.07-24.028-1.06-32.748-6.4l-1.425-2.67c3.56-4.81%204.45-10.14%202.67-15.66%201.07-1.07%202.85-2.13%205.35-3.56zm6.94-36.84l9.075%201.066c4.45.177%207.83.177%209.79-.178-7.12%2011.21-12.995%2020.822-17.265%2029.188-6.054%201.602-11.037%204.27-14.774%208.188-.18-.89-.89-2.134-2.137-3.2-1.25-1.244-2.31-1.78-3.38-1.957%209.79-17.97%2015.84-29.01%2018.69-33.1zm-32.93%2048.41c4.093-1.423%207.3-3.56%209.61-6.053l3.92-7.29c2.67%201.43%204.45%203.56%205.16%206.94.71%203.38%200%206.76-1.96%2010.14-2.314%203.92-5.874%207.12-10.86%209.44-5.69%202.85-12.99%204.45-21.535%204.81-7.653.18-13.883-.71-18.867-3.02-4.45-1.96-7.12-4.81-8.01-8.36-.71-3.38.356-6.94%203.737-10.5%203.56-3.92%208.9-7.12%2016.197-9.79-3.204%205.34-4.805%208.19-4.805%208.9.53%202.49%202.133%204.45%205.16%205.69%202.67%201.25%206.23%201.78%2010.32%201.61%204.1-.18%208.013-1.07%2011.93-2.49zm15.484%2010.144c3.383%206.41%205.162%2014.778%205.162%2025.28.178%2011.393-1.78%2021-6.052%2029.368-5.518%2011.745-13.705%2021.18-24.562%2028.478-9.61%206.407-20.645%2010.855-33.283%2013.172l-33.82%201.244c-10.68-1.244-19.76-3.914-26.88-7.832-18.16-9.79-28.12-20.822-29.73-32.928-.89-8.01%201.24-15.13%206.58-21.715%208.36-9.79%2021.18-18.154%2038.26-24.918l22.07-8.01c8.9-3.207%2016.02-6.05%2021.36-8.725-.54%204.807%201.42%208.723%206.05%2011.747%204.27%202.85%209.97%204.63%2017.26%205.34%207.12.71%2014.06.18%2020.64-1.6%207.3-1.96%2012.99-4.81%2016.91-8.9zm2.848-164.28c4.986-5.87%2011.216-10.853%2019.226-14.95%207.65-4.09%2015.66-6.76%2023.845-7.83%208.546-1.244%2016.378-.71%2023.14%201.78%206.587%204.808%2011.926%2010.147%2015.84%2015.84%204.63%206.41%207.48%2013.528%208.9%2021.005%201.96%2010.145%201.068%2023.493-2.49%2040.048.89-.71%202.135-3.2%203.738-7.12.36%207.48%203.03%2017.27%207.84%2029.37-13.35%2013.17-30.43%2020.11-51.61%2020.65%203.56-7.83%206.05-14.42%207.3-19.76%205.69-1.96%2011.57-5.16%2017.44-9.43%206.23-4.8%209.79-9.07%2010.5-12.81-6.05%206.76-13.52%2012.46-22.42%2017.27-4.62%202.32-10.32%204.81-17.26%207.3l9.26-1.42c-3.2%208.9-5.87%2015.84-8.01%2020.65-12.81%204.45-25.63%204.45-38.26.18-5.51-1.96-10.14-4.45-14.06-7.48-3.91-3.02-6.58-6.41-8.18-9.79%206.77-12.46%2010.5-23.67%2011.75-33.28%201.25-10.32-.53-20.46-5.16-30.43.36-6.94%203.38-13.35%208.72-19.75zM126.9%20177.8l.535.89%22%2F%3E%3Cpath%20fill%3D%22%23FDE1C4%22%20d%3D%22M268.934%20115.145c1.96-11.39-.355-21.18-6.94-29.19-4.45%206.053-9.79%208.544-15.842%207.3-2.67-.536-4.983-1.782-7.12-3.74-2.135-2.136-3.736-4.627-4.626-7.653-4.095%201.958-7.655%204.806-10.68%208.9-2.136%203.025-4.63%207.653-7.476%2014.238-.18-1.958.71-5.696%202.67-11.036-3.204-1.957-5.874-4.627-7.652-7.832-4.807-5.695-8.01-9.61-9.436-12.102-2.848-4.272-3.56-7.12-2.135-8.544%201.957-1.602%205.694-.533%2011.39%203.56%206.053%204.272%2010.503%209.612%2013.528%2016.197l2.49-2.314c-6.228-9.44-14.77-16.91-25.095-22.25-9.077-4.81-17.62-7.3-25.63-7.48.535%201.07%201.603%202.31%203.383%204.27l3.38%203.92c-9.788-4.63-20.823-6.23-32.926-4.99-12.994%201.24-22.07%205.87-27.233%2013.88-4.983%207.29%200%2018.51%2014.774%2033.81%205.695%205.69%2012.103%2011.39%2019.223%2016.73%206.41%204.98%2012.11%208.54%2016.56%2010.85-8.9.53-17.08%202.67-24.2%206.58-6.4%203.2-11.57%207.65-15.66%2012.99-3.56%204.8-5.87%209.79-6.76%2014.95-.71%205.16-.17%209.43%202.14%2012.99%2018.19%2024.11%2037.6%2016.21%2046.28%2012.28-2.67-3.56-3.73-5.7-3.56-6.59%206.94%206.94%2011.57%2011.21%2014.06%2012.99%205.88%203.91%2012.64%205.87%2020.12%205.34%207.48-.36%2014.95-6.23%2022.79-17.63l7.3-11.75c1.96-3.74%203.38-5.52%203.91-5.52l-1.07%202.68.89.72%203.56-5.52c1.78-3.39%203.02-6.23%203.38-8.55-3.02%202.67-7.29%205.52-12.81%208.01l-4.09%208.72c-1.96%204.1-4.27%207.66-6.23%2010.68-6.41%208.72-13.7%2012.99-22.07%2012.99-3.91%200-7.83-1.425-11.57-4.45-2.67-2.314-5.69-5.874-9.08-10.68l-8.37-12.81c-3.38-4.81-6.41-8.37-9.43-10.68-1.6%201.243-3.2%202.67-4.8%204.63l-3.92%205.16c-.35-4.63%202.32-8.9%208.01-12.995%206.05-4.27%2011.93-5.877%2017.8-4.63-5.69%201.78-9.79%203.2-12.1%204.45%204.45%205.16%2010.14%208.9%2017.26%2011.39%206.59%202.132%2013.89%203.022%2021.54%202.31%207.65-.53%2015.13-2.49%2022.43-5.87%207.66-3.384%2014.06-7.834%2019.94-13.53%2011.04-11.034%2017.8-22.78%2019.76-35.24zm-71.906-36.13c6.583%205.694%2011.212%2011.212%2013.703%2016.374%202.14%204.45%202.32%207.83.54%209.96l-10.14.35c-5.34-2.32-11.39-6.59-18.15-13.17-6.58-6.59-11.03-12.28-13.35-16.91-1.95-4.27-1.78-7.12.36-8.54%201.96-1.43%205.52-1.07%2010.15.89%205.34%202.13%2011.04%205.69%2016.91%2011.03z%22%2F%3E%3Cpath%20d%3D%22M210.73%2095.39c-2.49-5.162-7.12-10.68-13.702-16.376-5.876-5.34-11.57-8.9-16.91-11.035-4.628-1.96-8.188-2.32-10.145-.89-2.136%201.42-2.315%204.27-.357%208.54%202.313%204.63%206.763%2010.32%2013.35%2016.91%206.763%206.58%2012.814%2010.85%2018.154%2013.17l10.146-.36c1.78-2.14%201.6-5.52-.535-9.97zm-19.93-3.74c-1.78.357-2.493%201.248-2.316%202.85-7.653-7.12-12.992-13.17-16.018-17.8-2.49-4.27-2.848-6.94-1.246-8.01%201.602-1.245%204.627-.89%209.077%201.247%204.807%202.136%209.79%205.517%2015.306%2010.146%206.41%205.696%2010.86%2011.036%2013.707%2016.02%202.85%205.517%202.313%208.54-1.6%209.077-1.247-5.518-4.808-9.61-10.86-12.28-2.49-1.07-4.27-1.427-6.05-1.25z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M188.482%2094.5c-.177-1.602.536-2.492%202.316-2.85%201.78-.177%203.56.18%206.05%201.248%206.052%202.67%209.613%206.763%2010.86%2012.28%203.913-.534%204.448-3.56%201.6-9.077-2.847-4.98-7.297-10.32-13.706-16.01-5.517-4.63-10.5-8.01-15.306-10.14-4.45-2.13-7.476-2.49-9.077-1.24-1.61%201.07-1.25%203.74%201.24%208.01%203.02%204.63%208.36%2010.68%2016.01%2017.8zm51.262%2077.246l-.89-.712-.89%202.847%201.78-2.13zm-18.334-82.41l2.315-3.204c-3.56-6.408-8.01-11.57-13.528-15.662l-6.05-3.38-3.206-.18c-.71.89.36%203.382%203.03%207.298l7.65%209.61c.54-.533%201.43-.71%202.67-.533%202.32.535%204.63%202.493%207.12%206.052z%22%2F%3E%3Cpath%20fill%3D%22%23FB8970%22%20d%3D%22M210.554%20178.508c-3.737-.355-7.476.178-10.856%201.603%201.78%203.39%202.67%206.06%202.67%207.84-2.848-4.8-6.052-8.54-9.79-11.21-4.628-3.38-9.434-4.62-14.595-3.56%207.12%2013%2014.417%2020.29%2022.07%2021.9%207.12%201.6%2014.06-1.96%2020.825-10.68-1.958-3.38-5.52-5.34-10.324-5.87z%22%2F%3E%3Cpath%20fill%3D%22%23FDC13C%22%20d%3D%22M367.54%20363.26c-7.3-6.587-16.02-11.215-26.343-13.527-9.078-1.603-18.688-.535-29.19%202.848-3.56%201.25-8.01%203.03-13.172%205.17l-12.993%205.7c2.85%205.7%202.494%2010.86-.89%2015.49-3.026%204.27-8.187%207.48-15.306%209.97-7.12%202.31-14.773%203.2-22.783%202.85-8.72-.35-16.374-2.13-22.783-5.51%203.916%2018.33%203.738%2033.64-.71%2046.1%2014.948%204.27%2030.968%206.76%2047.878%207.48%2016.374.54%2031.86-.71%2046.633-3.74%2015.13-3.02%2027.77-7.65%2037.91-13.88%2010.68-6.58%2017.63-14.41%2020.83-23.49%204.81-13.71%201.78-25.63-9.07-35.42z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M208.24%20312.71l-1.424%201.246-3.738%206.41%201.246-.892%203.916-6.764z%22%2F%3E%3Cpath%20fill%3D%22%23FDC13C%22%20d%3D%22M235.295%20357.03c-1.426.355-3.56%201.245-6.23%202.848-2.49%201.425-4.27%202.49-5.34%203.56%201.78%205.518.89%2010.856-2.67%2015.664l1.425%202.67c8.72%205.34%2019.58%207.475%2032.75%206.408%205.518-.537%2010.5-1.604%2015.308-3.207%204.627-1.78%208.186-3.736%2010.678-6.05%203.737-3.38%204.627-7.653%202.67-12.28-1.96-5.162-6.586-8.722-13.883-10.68-.355.53-1.424%202.848-2.67%206.406-1.246%203.38-2.314%205.34-3.025%205.87-5.34%203.02-12.104%204.27-20.11%203.56-3.562-.36-6.23-1.07-8.368-2.32-2.312-1.07-3.383-2.67-3.203-4.63l2.668-7.84zm-22.605%208.364c-2.313%202.492-5.52%204.63-9.612%206.053-3.916%201.424-7.83%202.314-11.926%202.49-4.093.18-7.653-.355-10.323-1.602-3.03-1.244-4.63-3.202-5.17-5.693%200-.713%201.6-3.56%204.8-8.9-7.3%202.67-12.64%205.873-16.2%209.79-3.38%203.56-4.45%207.12-3.74%2010.5.89%203.56%203.56%206.41%208.01%208.366%204.98%202.313%2011.21%203.203%2018.86%203.024%208.54-.354%2015.84-1.957%2021.53-4.804%204.98-2.315%208.54-5.518%2010.86-9.436%201.95-3.38%202.67-6.76%201.95-10.144-.71-3.382-2.49-5.517-5.16-6.942l-3.92%207.298zm11.036%2041.473c0-10.502-1.78-18.866-5.162-25.275-3.916%204.094-9.612%206.94-16.91%208.9-6.585%201.78-13.525%202.312-20.645%201.6-7.3-.71-13-2.49-17.27-5.34-4.63-3.023-6.59-6.94-6.05-11.746-5.34%202.672-12.46%205.518-21.36%208.723l-22.07%208.01c-17.09%206.76-29.9%2015.12-38.27%2024.91-5.34%206.58-7.48%2013.7-6.59%2021.71%201.6%2012.1%2011.57%2023.14%2029.72%2032.92%207.12%203.92%2016.19%206.59%2026.87%207.83l33.82-1.25c12.63-2.32%2023.67-6.77%2033.28-13.17%2010.86-7.3%2019.04-16.74%2024.56-28.48%204.27-8.37%206.22-17.98%206.05-29.37zm-100.564-7.657l11.926.715c7.12.89%2014.417%202.492%2022.426%204.27%2020.824%205.164%2033.105%2010.323%2036.666%2015.663-11.036-5.695-23.316-9.967-36.666-13.17l-34.352-7.478z%22%2F%3E%3Cpath%20d%3D%22M135.088%20399.925l-11.926-.715%2034.352%207.48c13.35%203.2%2025.63%207.473%2036.666%2013.168-3.56-5.34-15.84-10.5-36.666-15.662-8.01-1.78-15.306-3.382-22.426-4.27z%22%2F%3E%3Cpath%20fill%3D%22%23FC1A22%22%20d%3D%22M240.635%20202.36c-8.01%204.093-14.24%209.076-19.224%2014.95-5.34%206.41-8.36%2012.815-8.72%2019.757%204.63%209.966%206.41%2020.113%205.16%2030.434-1.24%209.62-4.98%2020.83-11.74%2033.29%201.61%203.38%204.28%206.76%208.19%209.79%203.92%203.03%208.55%205.52%2014.07%207.48%2012.64%204.27%2025.45%204.27%2038.27-.17%202.14-4.8%204.81-11.74%208.01-20.64l-9.25%201.42c6.94-2.49%2012.64-4.98%2017.27-7.29%208.9-4.8%2016.38-10.5%2022.43-17.26-.71%203.74-4.27%208.01-10.5%2012.81-5.87%204.28-11.75%207.48-17.44%209.44-1.25%205.34-3.74%2011.92-7.3%2019.76%2021.18-.54%2038.27-7.48%2051.62-20.65-4.8-12.1-7.47-21.89-7.83-29.36-1.6%203.92-2.85%206.41-3.73%207.12%203.56-16.55%204.45-29.9%202.49-40.04-1.42-7.47-4.27-14.59-8.9-21-3.92-5.7-9.26-11.03-15.84-15.84-6.77-2.49-14.6-3.02-23.14-1.78-8.19%201.07-16.2%203.74-23.85%207.84zm45.92%209.076c0-3.737%201.067-5.873%203.38-6.585%202.317-.53%204.808.36%207.656%203.03%201.61%201.61%203.21%203.38%204.45%205.52%201.43%201.96%202.67%204.45%203.74%207.3%202.14%205.7%203.21%2010.15%203.21%2013.88-.17%203.39-1.06%205.34-2.84%206.06-1.96.89-4.09%200-6.58-2.31-2.84-2.31-5.51-6.05-8.18-11.03-3.2-6.4-4.8-11.57-4.8-15.84zm-19.758-2.492c4.45%202.67%208.188%206.942%2010.858%2012.638%203.026%206.05%203.916%2011.57%202.67%2016.73-.89%204.45-3.382%207.83-6.942%209.61-3.736%201.96-7.475%201.78-11.568-.532-4.45-2.315-8.188-7.12-11.036-13.884-3.03-7.12-3.92-12.993-2.67-17.798.89-4.45%203.2-7.298%206.94-8.544%203.73-1.245%207.47-.71%2011.74%201.78z%22%2F%3E%3Cpath%20d%3D%22M289.936%20204.85c-2.313.713-3.38%202.85-3.38%206.586%200%204.273%201.6%209.435%204.806%2015.842%202.67%204.984%205.34%208.72%208.186%2011.035%202.493%202.313%204.627%203.203%206.586%202.313%201.78-.712%202.67-2.67%202.848-6.052%200-3.736-1.066-8.186-3.203-13.88-1.07-2.85-2.32-5.34-3.74-7.3-1.25-2.134-2.85-3.913-4.45-5.516-2.85-2.67-5.34-3.56-7.66-3.027zm6.764%204.63c2.67%202.846%205.16%206.762%207.298%2012.102%201.957%204.45%203.025%208.365%203.202%2011.57.357%203.024-.177%204.98-1.423%205.694-1.247.89-2.847%200-4.984-2.135-2.312-2.31-4.805-6.23-7.475-11.74-2.848-5.34-4.273-9.97-4.627-13.53-.18-3.02.54-4.8%202.14-5.16%201.61-.53%203.56.54%205.88%203.21z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M303.998%20221.582c-2.137-5.34-4.628-9.256-7.298-12.103-2.314-2.67-4.272-3.74-5.875-3.21-1.6.35-2.313%202.13-2.134%205.16.36%203.56%201.78%208.19%204.63%2013.53%202.67%205.51%205.16%209.43%207.48%2011.74%202.14%202.13%203.74%203.02%204.99%202.13%201.25-.71%201.78-2.67%201.43-5.7-.17-3.21-1.24-7.12-3.2-11.57z%22%2F%3E%3Cpath%20d%3D%22M277.655%20221.582c-2.67-5.696-6.407-9.968-10.858-12.638-4.27-2.492-8.01-3.025-11.746-1.78-3.73%201.246-6.05%204.094-6.94%208.544-1.24%204.805-.35%2010.68%202.67%2017.798%202.85%206.765%206.59%2011.57%2011.04%2013.884%204.1%202.312%207.83%202.49%2011.57.533%203.56-1.78%206.06-5.16%206.94-9.61%201.25-5.16.36-10.68-2.67-16.73zm-11.747-10.146c3.738%202.315%206.764%205.697%208.898%209.968%203.027%205.875%204.095%2011.036%203.383%2015.84-.54%204.272-2.32%207.12-5.34%208.898-3.03%201.604-6.23%201.604-9.62-.71-3.92-2.314-7.12-6.586-9.61-12.993-2.85-6.95-3.74-12.64-3.03-16.73.71-3.74%202.49-5.88%205.69-6.59%203.02-.71%206.23%200%209.61%202.31z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M274.807%20221.403c-2.135-4.27-5.16-7.653-8.898-9.968-3.39-2.313-6.59-3.025-9.62-2.313-3.21.712-4.98%202.848-5.7%206.586-.71%204.094.18%209.79%203.02%2016.73%202.49%206.407%205.69%2010.68%209.61%2012.993%203.38%202.32%206.58%202.32%209.61.71%203.02-1.77%204.8-4.62%205.34-8.89.71-4.8-.36-9.96-3.39-15.84z%22%2F%3E%3Cellipse%20cx%3D%2246.596%22%20cy%3D%22152.721%22%20rx%3D%2246.596%22%20ry%3D%2250.614%22%2F%3E%3C%2Fsvg%3E");
}
#hours.right,
#minutes.right:after {
background-image: url("data:image/svg+xml;dataset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22275%22%20viewBox%3D%220%200%20110%20275%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%2225%22%20stroke-linecap%3D%22round%22%20d%3D%22M52.805%20145.29v113.987%22%2F%3E%3Cpath%20d%3D%22M96.24%2061.67c6.61%206.875%209.29%2015.272%2010.752%2022.82%201.555%208.024.572%2015.953-4.412%2022.77%201.963%208.25-6.377%2020.626-15.184%2025.175-1.657.856-3.81%201.01-5.312%202.14-1.986%201.494-2.656%203.165-4.67%204.876-7.406%206.3-15.51%208.08-22.104%208.38-5.534.26-11.447-.82-16.465-4.49-1.772-1.29-2.932-3.39-5.21-5.01-1.132-.8-3.306-.97-4.92-1.6-5.095-1.98-10.052-4.37-14.704-8.56C-2.95%20112.9-1.45%2094.83%202.77%2079.94c1.4-4.937%202.307-9.584%202.594-14.618.614-10.724.19-19.37%201.608-29.116%201.447-9.956%203.244-20.04%209.616-29.174.937-1.34%203.255-3.734%204.325-4.54%206.572-4.952%2019.85-2.477%2023.583%206.98.7%201.774%201.04%204.37%201.103%206.322.38%2011.96-7.55%2026.285-8.53%2036.516%209.09-7.576%2020.19-7.5%2027.38%203.968%2010.64-4.344%2022.28-4.49%2031.79%205.393zm-22.553%2052.167c1.854%201.742-.084%205.445-.957%207.314-1.746%203.75-4.28%207.4-8.505%2010.96-3.866%203.26-8.124%204.59-12.176%205.45-4.18.9-8.25.38-11.95%201.54%205.53%204.57%2012.05%205.34%2018%204.35%205.82-.97%2012.82-3.37%2017.51-8.95-2.4-2.83-7.03-1.07-7.78-4.54%201.94-1.62%203.75.27%205.61.6%207.86%201.39%2018.25-3.92%2023.37-13.98.96-1.89%202.35-4.63.6-6.3-7.51%203.68-14.53%203.21-20.75-3.02-5.33-5.33-7.31-11.56-7.6-17.15-.14-2.62%201.37-5.2-1.94-7.52-.78.24-.73%201.29-.88%201.86-1.01%203.81-2.62%208.12-5.29%2012.2-1.1%201.675-2.87%203.19-3.48%204.72-.94%202.358.52%205.258.23%207.5-.53%204.177-2.53%208.26-6.8%2010.98-9.5%206.05-22.07-1.19-31.9-9.993-2.104-1.89-3.77-3.06-2.666-4.13.717-.7%202.2.4%203.56%201.58%208.735%207.64%2018.48%2014.51%2027.1%2011.638%2010.454-3.484%209.772-16.854%203.92-23.974-7.98-9.702-20.057-12.24-28.46-11.99-2.145.066-4.244%201.348-6.475-.09-.14-2.27%202.966-2.2%204.47-2.322%203.43-.285%207.334.118%2010.723.665.22-3.52%201.02-7.71%203.74-11.706%201.135-1.665%202.443-4.58%204.83-4.02%201.16%201.91-1.517%203.43-2.45%204.734-2.61%203.63-3.618%207.907-3.23%2011.54C41.21%2083.6%2052.2%2089.71%2056%2098.77c8.635-9.47%2010.38-22.163%207.624-32.953-1.397-5.47-4.964-13.767-11.89-14.654-6.013-.77-16.434%205.857-18.59%2013.027-.555%201.843.17%204.472-1.96%205.936-2.27-1.492-1.01-4.615-.757-6.656%201.4-11.22%205.405-22.838%208.67-34.3%201.643-5.776%205.36-16.768-1.56-22.345C33%203.16%2025.827%202.733%2020.647%208.798%2015.47%2014.86%2013.344%2024.813%2011.97%2031.68c-1.57%207.848-2.58%2015.14-2.37%2022.8.22%207.74-.18%2015.4-1.86%2022.98-1.79%208.083-4.294%2015.414-3.73%2022.78.68%208.85%205.167%2018.797%2013.608%2025.755%207.687%206.337%2016.967%209.31%2025.766%209.91%209.312.638%2021.42-4.155%2026.805-15.636.91-1.95%201.12-4.82%203.5-6.43zm-4.307-32.78c1.816-1.407.992-8.063%204.738-9.645%201.86%201.215.296%202.78-.053%203.748-3.21%208.898-5.173%2022.397%206.023%2031.78%205.617%204.708%2013.108%204.682%2018.948-2.286%208.46-10.093%204.34-28.456-4.728-39.09-7.652-8.976-16.895-8.95-25.3-6.324-5.976%201.867-1.838%209.346-1.562%2013.95.194%203.212-1.558%205.746%201.934%207.868z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M73.687%20113.837c1.854%201.742-.084%205.445-.957%207.314-1.746%203.75-4.28%207.4-8.505%2010.96-3.866%203.26-8.124%204.59-12.176%205.45-4.18.9-8.25.38-11.95%201.54%205.53%204.57%2012.05%205.34%2018%204.35%205.82-.97%2012.82-3.37%2017.51-8.95-2.4-2.83-7.03-1.07-7.78-4.54%201.94-1.62%203.75.27%205.61.6%207.86%201.39%2018.25-3.92%2023.37-13.98.96-1.89%202.35-4.63.6-6.3-7.51%203.68-14.53%203.21-20.75-3.02-5.33-5.33-7.31-11.56-7.6-17.15-.14-2.62%201.37-5.2-1.94-7.52-.78.24-.73%201.29-.88%201.86-1.01%203.81-2.62%208.12-5.29%2012.2-1.1%201.675-2.87%203.19-3.48%204.72-.94%202.358.52%205.258.23%207.5-.53%204.177-2.53%208.26-6.8%2010.98-9.5%206.05-22.07-1.19-31.9-9.993-2.104-1.89-3.77-3.06-2.666-4.13.717-.7%202.2.4%203.56%201.58%208.735%207.64%2018.48%2014.51%2027.1%2011.638%2010.454-3.484%209.772-16.854%203.92-23.974-7.98-9.702-20.057-12.24-28.46-11.99-2.145.066-4.244%201.348-6.475-.09-.14-2.27%202.966-2.2%204.47-2.322%203.43-.285%207.334.118%2010.723.665.22-3.52%201.02-7.71%203.74-11.706%201.135-1.665%202.443-4.58%204.83-4.02%201.16%201.91-1.517%203.43-2.45%204.734-2.61%203.63-3.618%207.907-3.23%2011.54C41.21%2083.6%2052.2%2089.71%2056%2098.77c8.635-9.47%2010.38-22.163%207.624-32.953-1.397-5.47-4.964-13.767-11.89-14.654-6.013-.77-16.434%205.857-18.59%2013.027-.555%201.843.17%204.472-1.96%205.936-2.27-1.492-1.01-4.615-.757-6.656%201.4-11.22%205.405-22.838%208.67-34.3%201.643-5.776%205.36-16.768-1.56-22.345C33%203.16%2025.827%202.733%2020.647%208.798%2015.47%2014.86%2013.344%2024.813%2011.97%2031.68c-1.57%207.848-2.58%2015.14-2.37%2022.8.22%207.74-.18%2015.4-1.86%2022.98-1.79%208.083-4.294%2015.414-3.73%2022.78.68%208.85%205.167%2018.797%2013.608%2025.755%207.687%206.337%2016.967%209.31%2025.766%209.91%209.312.638%2021.42-4.155%2026.805-15.636.91-1.95%201.12-4.82%203.5-6.43zm-4.307-32.78c1.816-1.407.992-8.063%204.738-9.645%201.86%201.215.296%202.78-.053%203.748-3.21%208.898-5.173%2022.397%206.023%2031.78%205.617%204.708%2013.108%204.682%2018.948-2.286%208.46-10.093%204.34-28.456-4.728-39.09-7.652-8.976-16.895-8.95-25.3-6.324-5.976%201.867-1.838%209.346-1.562%2013.95.194%203.212-1.558%205.746%201.934%207.868z%22%2F%3E%3C%2Fsvg%3E") !important;
}
#hours.left.back,
#minutes.left.back:after {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22270%22%20viewBox%3D%22-9.039%20-2%20110%20270%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23000%22%20stroke-width%3D%2226%22%20stroke-linecap%3D%22round%22%20d%3D%22M45.825%20143.29v113.987%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M26.093%2061.562c3.258-7.89%2026.757-19.357%2034-4-1.334%204.332-7.543%203.79-9%208%2010.47-8.65%2043.902-6.468%2034%2019-4.537-.462-5.56-4.44-5-10-2.375.625.156%206.155-2%207%2018.398%2026.562-2.98%2063.624-39%2054%205.11%205.102%2018.888%202.68%2027%202-7.176%2027.475-51.683%2012.097-51-12%20.32-2.762%203.095-1.73%204%200-6.454-10.62-14.837-22.304-13-45%20.742-9.167%203.134-18.452%203-28-.23-16.422-7.577-32.96-1-45%2028.995-5.686%2029.597%2041.366%2018%2054zm-5%2052c-3.537-5.807-6.022-17.965-8-22-.57%2010.57%201.796%2018.204%208%2022zm11%205c-2.456-7.064.52-18.36-1-24-2.722%207.042-4.532%2018.465%201%2024zm14%206c.316-9.36%204.62-20.036%205-26-4.492%205.183-8.154%2016.5-5%2026z%22%2F%3E%3Cpath%20d%3D%22M13.093%2091.562c1.978%204.035%204.463%2016.193%208%2022-6.204-3.796-8.57-11.43-8-22zm18%203c1.52%205.64-1.456%2016.936%201%2024-5.532-5.535-3.722-16.958-1-24zm6-52.162c1.918%201.2%209.162-.8%2014%200%206.033.466%207.494%208.294%2014%2011%204.594%201.912%2010.46-.138%2015%202%2010.117%204.766%2016.22%2019.615%208%2031%203.54%2012.908%202.46%2025.692-3%2035-3.28%205.6-10.596%207.617-14%2013-3.246%205.136-1.26%208.444-4%2012-13.76%2017.862-46.827%204.218-54-13-1.838-4.41-.464-9.677-2-15-2.585-8.958-10.267-17.515-11-31-.815-14.993%204.04-37.47%203-53-.958-14.287-8.064-31.247%206-34%2018.668-3.652%2032.764%2018.24%2028%2042zm-29-37c-6.577%2012.042.77%2028.58%201%2045%20.134%209.55-2.258%2018.834-3%2028-1.837%2022.697%206.546%2034.38%2013%2045-.905-1.73-3.68-2.76-4%200-.683%2024.098%2043.824%2039.475%2051%2012-8.11.68-21.888%203.103-27-2%2036.02%209.626%2057.398-27.437%2039-54%202.156-.844-.375-6.374%202-7-.56%205.56.463%209.54%205%2010%209.902-25.467-23.53-27.65-34-19%201.457-4.21%207.666-3.667%209-8-7.242-15.356-30.742-3.89-34%204%2011.597-12.632%2010.995-59.684-18-54zm43%2093.162c-.38%205.964-4.684%2016.64-5%2026-3.154-9.5.51-20.817%205-26z%22%2F%3E%3C%2Fsvg%3E") !important;
}
#hours.left,
#minutes.left:after {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22270%22%20viewBox%3D%220%200%20110%20270%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23000%22%20stroke-width%3D%2226%22%20stroke-linecap%3D%22round%22%20d%3D%22M54.864%20145.29v113.987%22%2F%3E%3Cpath%20d%3D%22M43.218%2056.28c7.184-11.47%2018.29-11.545%2027.38-3.97-.983-10.23-8.91-24.555-8.528-36.515.062-1.953.402-4.547%201.103-6.32C66.903.015%2080.183-2.46%2086.76%202.492c1.07.805%203.39%203.2%204.325%204.54%206.372%209.133%208.17%2019.218%209.616%2029.174%201.42%209.745%201%2018.392%201.61%2029.116.29%205.034%201.2%209.68%202.6%2014.618%204.22%2014.89%205.72%2032.958-11.24%2048.215-4.65%204.186-9.61%206.574-14.7%208.56-1.61.63-3.79.8-4.92%201.603-2.28%201.62-3.44%203.72-5.21%205.015-5.02%203.67-10.93%204.748-16.46%204.495-6.59-.303-14.69-2.086-22.1-8.377-2.01-1.71-2.68-3.38-4.67-4.87-1.5-1.13-3.65-1.28-5.31-2.14-8.8-4.55-17.14-16.92-15.18-25.17-5-6.82-5.98-14.75-4.43-22.77%201.46-7.55%204.15-15.94%2010.76-22.82%209.51-9.88%2021.15-9.73%2031.79-5.39zm-5.736%2063.983c5.385%2011.48%2017.492%2016.274%2026.805%2015.637%208.8-.602%2018.08-3.574%2025.762-9.91%208.44-6.957%2012.93-16.904%2013.6-25.754.56-7.366-1.94-14.697-3.73-22.78-1.68-7.58-2.08-15.24-1.86-22.98.21-7.66-.8-14.952-2.37-22.8-1.38-6.867-3.5-16.82-8.68-22.882-5.18-6.066-12.36-5.64-16.9-1.975-6.92%205.57-3.2%2016.56-1.56%2022.34%203.26%2011.46%207.27%2023.08%208.67%2034.3.25%202.04%201.51%205.16-.76%206.65-2.13-1.47-1.41-4.1-1.96-5.94-2.16-7.17-12.58-13.8-18.59-13.03-6.93.88-10.5%209.18-11.89%2014.65-2.76%2010.79-1.01%2023.48%207.62%2032.95%203.8-9.06%2014.79-15.17%2021.91-17.01.38-3.64-.63-7.92-3.23-11.55-.94-1.31-3.62-2.83-2.46-4.74%202.38-.56%203.69%202.35%204.82%204.02%202.72%203.99%203.52%208.19%203.74%2011.7%203.39-.55%207.29-.95%2010.73-.67%201.5.12%204.6.05%204.46%202.32-2.23%201.43-4.33.15-6.48.09-8.4-.25-20.48%202.29-28.46%2011.99-5.86%207.12-6.54%2020.49%203.92%2023.97%208.61%202.87%2018.36-4%2027.1-11.63%201.35-1.19%202.84-2.28%203.55-1.59%201.1%201.07-.57%202.24-2.67%204.13-9.83%208.8-22.4%2016.04-31.9%209.99-4.27-2.72-6.27-6.81-6.8-10.98-.29-2.25%201.17-5.15.23-7.5-.61-1.53-2.38-3.05-3.48-4.72-2.67-4.08-4.276-8.38-5.287-12.19-.15-.58-.1-1.63-.88-1.87-3.31%202.33-1.8%204.9-1.938%207.53-.288%205.59-2.27%2011.81-7.597%2017.15-6.22%206.23-13.233%206.7-20.74%203.02-1.75%201.66-.36%204.41.6%206.29%205.12%2010.06%2015.512%2015.37%2023.373%2013.98%201.86-.32%203.67-2.21%205.614-.59-.75%203.47-5.378%201.71-7.774%204.54%204.69%205.59%2011.69%207.99%2017.51%208.96%205.95.99%2012.46.22%2018-4.35-3.71-1.16-7.78-.64-11.95-1.534-4.05-.866-8.31-2.196-12.173-5.45-4.22-3.558-6.76-7.21-8.5-10.957-.87-1.87-2.81-5.57-.96-7.31%202.37%201.61%202.58%204.48%203.5%206.43zM40.22%2073.19c.276-4.604%204.414-12.083-1.56-13.95-8.407-2.626-17.65-2.65-25.302%206.324C4.292%2076.198.17%2094.56%208.63%20104.654c5.84%206.968%2013.33%206.994%2018.948%202.287%2011.196-9.38%209.234-22.88%206.023-31.78-.34-.96-1.91-2.53-.05-3.74%203.75%201.58%202.92%208.24%204.74%209.65%203.5-2.12%201.75-4.65%201.94-7.86z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M33.982%20113.837c-1.854%201.742.084%205.445.957%207.314%201.74%203.75%204.27%207.4%208.5%2010.96%203.86%203.26%208.12%204.59%2012.17%205.45%204.17.9%208.24.38%2011.95%201.54-5.54%204.57-12.05%205.34-18%204.35-5.83-.97-12.82-3.37-17.51-8.95%202.39-2.83%207.02-1.07%207.77-4.54-1.95-1.62-3.76.27-5.62.6-7.86%201.39-18.26-3.92-23.38-13.98-.96-1.89-2.35-4.63-.6-6.3%207.51%203.68%2014.53%203.21%2020.75-3.02%205.32-5.33%207.31-11.56%207.59-17.15.13-2.62-1.37-5.2%201.94-7.52.77.24.72%201.29.88%201.86%201.01%203.81%202.62%208.12%205.28%2012.2%201.09%201.68%202.86%203.19%203.47%204.72.94%202.36-.52%205.26-.24%207.5.53%204.18%202.53%208.26%206.8%2010.98%209.49%206.05%2022.06-1.19%2031.89-9.99%202.11-1.89%203.77-3.06%202.67-4.13-.72-.7-2.2.4-3.56%201.58-8.74%207.64-18.48%2014.51-27.1%2011.64-10.46-3.48-9.78-16.85-3.92-23.97%207.98-9.7%2020.05-12.24%2028.46-11.99%202.14.07%204.24%201.35%206.47-.09.14-2.27-2.96-2.2-4.47-2.32-3.43-.29-7.34.12-10.728.66-.22-3.52-1.02-7.71-3.747-11.7-1.14-1.66-2.44-4.58-4.83-4.02-1.16%201.91%201.51%203.44%202.45%204.74%202.61%203.63%203.61%207.91%203.23%2011.54-7.12%201.84-18.11%207.96-21.91%2017.01-8.63-9.47-10.38-22.17-7.62-32.96%201.41-5.48%204.98-13.77%2011.91-14.66%206.01-.77%2016.43%205.86%2018.59%2013.03.55%201.84-.178%204.47%201.952%205.94%202.27-1.49%201.01-4.61.757-6.65-1.4-11.22-5.4-22.836-8.66-34.3-1.646-5.774-5.36-16.766%201.556-22.343C74.65%203.177%2081.82%202.75%2087%208.817c5.175%206.06%207.3%2016.014%208.673%2022.88%201.57%207.85%202.582%2015.14%202.37%2022.8-.218%207.74.18%2015.4%201.86%2022.98%201.79%208.084%204.295%2015.415%203.73%2022.78-.678%208.85-5.166%2018.8-13.607%2025.756-7.68%206.335-16.96%209.31-25.76%209.91-9.31.636-21.42-4.157-26.806-15.64-.91-1.95-1.12-4.82-3.497-6.43zm4.308-32.78c-1.817-1.407-.993-8.063-4.74-9.645-1.86%201.215-.295%202.78.054%203.748%203.21%208.898%205.173%2022.397-6.023%2031.78-5.61%204.708-13.1%204.682-18.94-2.286C.18%2094.56%204.3%2076.198%2013.37%2065.564c7.653-8.976%2016.896-8.95%2025.302-6.324%205.973%201.867%201.835%209.346%201.56%2013.95-.195%203.212%201.56%205.746-1.935%207.868z%22%2F%3E%3C%2Fsvg%3E") !important;
}
</style>
</head>
<body>
<div id="watch">
<div class="digit">
<span>1</span>
</div>
<div class="digit">
<span>2</span>
</div>
<div class="digit">
<span>3</span>
</div>
<div class="digit">
<span>4</span>
</div>
<div class="digit">
<span>5</span>
</div>
<div class="digit">
<span>6</span>
</div>
<div class="digit">
<span>7</span>
</div>
<div class="digit">
<span>8</span>
</div>
<div class="digit">
<span>9</span>
</div>
<div class="digit">
<span>10</span>
</div>
<div class="digit">
<span>11</span>
</div>
<div class="digit">
<span>12</span>
</div>
<div id="mickey"></div>
<div class="left" id="hours"></div>
<div class="right" id="minutes"></div>
</div>
<script>
var $hours = document.getElementById('hours');
var $minutes = document.getElementById('minutes');
setInterval(function () {
"use strict";
var hours = new Date().getHours();
var minutes = new Date().getMinutes();
if (hours >= 6 && hours < 12) {
$hours.className = 'left';
} else {
$hours.className = 'right';
}
if (minutes <= 30) {
$minutes.className = 'back left';
} else {
$minutes.className = 'left';
}
set($hours, 30 * hours);
set($minutes, 6 * minutes);
}, 500);
function set($elmt, deg) {
"use strict";
if ($elmt.id === 'hours' && deg < 180) {
deg = deg - 5;
}
if ($elmt.id === 'minutes' && deg < 180) {
deg = deg + 5;
} else {
deg = deg - 5;
}
$elmt.style.transform = 'rotate(' + deg + 'deg)';
$elmt.style.webkitTransform = 'rotate(' + deg + 'deg)';
}
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/zqhly/front_page_effect_collection.git
git@gitee.com:zqhly/front_page_effect_collection.git
zqhly
front_page_effect_collection
前端页面效果合集
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385