La primera vez que publiqué un artículo, estaba más emocionado.
He estado inmerso en Dribbble y otros sitios web de diseñadores durante mucho tiempo, y estoy muy emocionado de ver esos hermosos trabajos de diseño, pero la indefensa PS no es competente, la IA lo olvidó por mucho tiempo, pero solo un poco de investigación en el frente, accidentalmente vi algunos Un reloj con un diseño limpio, creo que no debería ser difícil de implementar con CSS, por lo que me costó un poco entender el reloj.
Renderings
Punto técnico
- La textura de la esfera cuadrada depende de ello.
- nth-child (x) se usa para colocar la escala de marcado
- origen de transformación Se utiliza para localizar el punto central de la rotación de las tres manos.
- efecto de animación de aguja de fotogramas clave
Proceso
Primero diseñe la estructura DOM, el código es el siguiente:
<div class="clock-wrapper">
<div class="clock-base">
<div class="click-indicator">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="clock-hour"></div>
<div class="clock-minute"></div>
<div class="clock-second"></div>
<div class="clock-center"></div>
</div>
</div>
La estructura es muy simple, y el uso de cada elemento se puede ver desde el nombre del estilo. El div vacío en el medio es, naturalmente, la escala del dial.
El siguiente es el código CSS
html,body{
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(#e7e7e7,#d7d7d7);
}
/*时钟容器*/
.clock-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
width: 250px;
height: 250px;
margin: auto;
padding: 5px;
background-image: linear-gradient(#f7f7f7,#e0e0e0);
border-radius: 50%;
box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);
}
/*表盘*/
.clock-base{
width: 250px;
height: 250px;
background-color: #eee;
border-radius: 50%;
box-shadow: 0 0 5px #eee;
}
/*表盘刻度容器*/
.click-indicator{
position: absolute;
z-index: 1;
top: 15px;
left: 15px;
width: 230px;
height: 230px;
}
/*表盘刻度*/
.click-indicator div{
position: absolute;
width: 2px;
height: 4px;
margin: 113px 114px;
background-color: #ddd;
}
/*分别设置各个刻度的位置和角度*/
.click-indicator div:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
.click-indicator div:nth-child(2) {
transform: rotate(60deg) translateY(-113px);
}
.click-indicator div:nth-child(3) {
transform: rotate(90deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(4) {
transform: rotate(120deg) translateY(-113px);
}
.click-indicator div:nth-child(5) {
transform: rotate(150deg) translateY(-113px);
}
.click-indicator div:nth-child(6) {
transform: rotate(180deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(7) {
transform: rotate(210deg) translateY(-113px);
}
.click-indicator div:nth-child(8) {
transform: rotate(240deg) translateY(-113px);
}
.click-indicator div:nth-child(9) {
transform: rotate(270deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(10) {
transform: rotate(300deg) translateY(-113px);
}
.click-indicator div:nth-child(11) {
transform: rotate(330deg) translateY(-113px);
}
.click-indicator div:nth-child(12) {
transform: rotate(360deg) translateY(-113px);
background-color: #c00;
}
/*时针*/
.clock-hour{
position: absolute;
z-index: 2;
top: 80px;
left: 128px;
width: 4px;
height: 65px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 50px;
transition: .5s;
-webkit-animation: rotate-hour 43200s linear infinite;
}
/*分针*/
.clock-minute{
position: absolute;
z-index: 3;
top: 60px;
left: 128px;
width: 4px;
height: 85px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 70px;
transition: .5s;
-webkit-animation: rotate-minute 3600s linear infinite;
}
/*秒针*/
.clock-second{
position: absolute;
z-index: 4;
top: 20px;
left: 129px;
width: 2px;
height: 130px;
background-color: #a00;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 1px 110px;
transition: .5s;
-webkit-animation: rotate-second 60s linear infinite;
}
.clock-second:after{
content: "";
display: block;
position: absolute;
left: -5px;
bottom: 14px;
width: 8px;
height: 8px;
background-color: #a00;
border: solid 2px #a00;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*表盘中央的原型区域*/
.clock-center{
position: absolute;
z-index: 1;
width: 150px;
height: 150px;
top: 55px;
left: 55px;
background-image: linear-gradient(#e3e3e3,#f7f7f7);
border-radius: 50%;
box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
content: "";
display: block;
width: 20px;
height: 20px;
margin: 65px;
background-color: #ddd;
border-radius: 50%;
}
Estos son los archivos de estilo, pero en este caso, los tres punteros están a las 12 en punto, y luego el puntero necesita ser movido.
De hecho, simplemente establezca las reglas de animación directamente en el CSS: la manecilla de hora 43200 segundos gira 360 grados, la manecilla de minutos, la manecilla de segundos, etc.
Sin embargo, el trastorno obsesivo compulsivo dice que esto no es posible, y que el reloj que ni siquiera puede indicar la hora correcta es definitivamente un producto básico, por lo que aquí tenemos que encontrar un buen hermano CSS JavaScript para pedir prestado:
(function(){
//generate clock animations
var now = new Date(),
hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
secondDeg = now.getSeconds() / 60 * 360,
stylesDeg = [
"@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
].join("");
document.getElementById("clock-animations").innerHTML = stylesDeg;
})();
Oh, no olvides poner algo en la etiqueta de la cabeza:
<style id="clock-animations"></style>
De lo contrario, el código de estilo generado por JS no tiene lugar para vivir.
Ok, he puesto el código anterior en jsbin:
http://output.jsbin.com/xeraxe
-
Eso es todo, dale una palmadita fea a todos ~ :)