User:物灵/时钟样式.css：修订间差异
< User:物灵
（建立内容为“@keyframes spin { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } #spin-wrapper, #spin-second…”的新页面） |
（物灵将页面User:物灵/时钟样式.css的内容模型从“CSS”更改为“已过滤的CSS”） 标签：内容模型更改 |
（没有差异）
| |
2022年6月10日 (五) 11:57的版本
@keyframes spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
#spin-wrapper, #spin-second, #spin-minute, #spin-hour {
position: relative;
display: inline-block;
width: 300px;
height: 300px;
}
#spin-second-wrapper, #spin-minute-wrapper, #spin-hour-wrapper {
position: absolute;
}
#spin-second {
animation: spin 60s linear infinite;
background: red;
clip-path: polygon(48% 50%, 52% 50%, 52% 10%, 48% 10%);
}
#spin-minute {
animation: spin 3600s linear infinite;
background: black;
clip-path: polygon(48% 50%, 52% 50%, 52% 20%, 48% 20%);
}
#spin-hour {
animation: spin 216000s linear infinite;
background: black;
clip-path: polygon(48% 50%, 52% 50%, 52% 30%, 48% 30%);
}
#spin-wrapper {
background: yellow;
clip-path: circle(50%);
}