D-17-电子时钟
时钟 - 锐客网 *{
margin: 0;
padding: 0;
}
li{
list-style: none;
position: absolute;
width:10px;
height: 2px;
background: black;
top:99px;
transform-origin: 100px 0;
}
li:nth-child(5n){
width: 15px;
}
.ul li{
top:90px;
left:15px;
transform-origin:85px 10px;
width:20px;
height: 20px;
background: white;
/*opacity: 0;
*/}#big{
width:200px;
height:200px;
/*background:#707E91;
*/
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
margin:auto ;
border-radius: 50%;
border:1px solid brown;
}
#small{
width:20px;
height:20px;
/*background:#707E91;
*/
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
margin:auto ;
background:sandybrown;
border-radius: 50%;
z-index: 99;
}
#inbigs{
width:80px;
height:4px;
background:#999999;
position: absolute;
top:0;
left:20px;
/*right:0;
*/
bottom: 0;
margin:auto ;
/*transform: rotateZ(50deg);
*/
transform-origin: right center;
border-radius:5px;
z-index: 8;
}
#inbigm{
width:60px;
height:4px;
background:salmon;
position: absolute;
top:0;
left:40px;
/*right:0;
*/
bottom: 0;
margin:auto ;
/*transform: rotateZ(50deg);
*/
transform-origin: right center;
border-radius:5px;
z-index: 5;
/*transition: all 60s;
*/
}
#inbigh{
width:40px;
height:4px;
background:black;
position: absolute;
top:0;
left:60px;
/*right:0;
*/
bottom: 0;
margin:auto ;
/*transform: rotateZ(50deg);
*/
transform-origin: right center;
border-radius:5px;
z-index: 2;
/*transition: all 3600s;
*/
}.ul li:nth-child(1){
transform: rotateZ(90deg);
}
.ul li:nth-child(2){
transform: rotateZ(120deg);
}
.ul li:nth-child(3){
transform: rotateZ(150deg);
}
.ul li:nth-child(4){
transform: rotateZ(180deg);
}
.ul li:nth-child(5){
transform: rotateZ(210deg);
}
.ul li:nth-child(6){
transform: rotateZ(240deg);
}
.ul li:nth-child(7){
transform: rotateZ(270deg);
}
.ul li:nth-child(8){
transform: rotateZ(300deg);
}
.ul li:nth-child(9){
transform: rotateZ(330deg);
}
.ul li:nth-child(10){
transform: rotateZ(360deg);
}
.ul li:nth-child(11){
transform: rotateZ(30deg);
}
.ul li:nth-child(12){
transform: rotateZ(60deg);
}
span{
/*display: block;
*/
/*background:red;
*/
width:20px;
height:20px;
text-align: center;
line-height: 20px;
position: absolute;
transform-origin: center center;
color:black;
}
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
文章图片
time2.jpg
推荐阅读
- 玩转Micro:bit(04):电子宠物
- 修行之谜
- 未来的一片天地还是不务正业|未来的一片天地还是不务正业 ——被误解的电子竞技
- 所有Python入门书籍的整理，初学者必看，附赠所有电子版（三）
- django开发电子商城（二十二）购物车商品的所有者身份转换
- 小叮鱼（电子名片方便好用并且免费）
- java|java B2B2C 仿淘宝电子商城系统-Spring Cloud构建分布式电子商务平台
- 数字电子技术基础（第一章知识点概要）
- 清水河四幕
- canvas|canvas 入门