AI时代，找源码已成为过去式，纪念我过去的十年0(回)
80天前
还有人吗2(回)
98天前会python真的可以为所欲为0(回)
578天前
这里还有人吗2(回)
763天前这里还有人吗0(回)
763天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
987天前<html> |
<head> |
<title>css格式的漂亮时钟</title> |
<style> |
.box1{ |
height: 750px; |
width: 845px; |
} |
.img{float:none;margin:center;text-align:center;} |
#grad1 { |
height: 750px; |
width: 845px; |
background: -webkit-linear-gradient(top, rgba(29,150,250,250), rgba(250,250,250,250)); /* Safari 5.1 - 6.0 */ |
background: -o-linear-gradient(bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* Opera 11.1 - 12.0 */ |
background: -moz-linear-gradient(bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* Firefox 3.6 - 15 */ |
background: linear-gradient(to bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* 标准的语法（必须放在最后） */ |
margin:center; top:80px; |
} |
.clock_t { |
width: 98%; |
height: 98vh; |
display: -webkit-box; |
display: -ms-flexbox; |
display: flex; |
-webkit-box-pack: center; |
-ms-flex-pack: center; |
justify-content: center; |
-webkit-box-align: center; |
-ms-flex-align: center; |
align-items: center; |
background-image: -webkit-linear-gradient(left, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%); |
background-image: linear-gradient(to right, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%); |
} |
.face { |
position: relative; |
display: -webkit-box; |
display: -ms-flexbox; |
display: flex; |
-webkit-box-pack: center; |
-ms-flex-pack: center; |
justify-content: center; |
-webkit-box-align: start; |
-ms-flex-align: start; |
align-items: flex-start; |
width: 100px; |
height: 100px; |
background: #eee; |
background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5); |
background-image: linear-gradient(to bottom right, #eee, #f5f5f5); |
border-radius: 50%; |
padding: 5px; |
border: 5px solid #d9d9d9; |
box-shadow: 5px 5px 7px -10px rgba(0, 0, 0, 0.4), inset 3px 3px 5px rgba(0, 0, 0, 0.2); |
} |
.face:after { |
display: block; |
position: absolute; |
top: 0; |
left: 0; |
width: 100%; |
height: 100%; |
content: ""; |
border-radius: 50%; |
z-index: 9999; |
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%); |
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%); |
} |
.numbers { |
position: relative; |
} |
.number { |
position: absolute; |
height: 50px; |
-webkit-transform-origin: 0 100%; |
transform-origin: 0 100%; |
font-size: 16px; |
} |
.number:nth-child(1) { |
-webkit-transform: rotate(25deg); |
transform: rotate(25deg); |
} |
.number:nth-child(1) span { |
display: block; |
-webkit-transform: rotate(-25deg); |
transform: rotate(-25deg); |
} |
.number:nth-child(2) { |
-webkit-transform: rotate(55deg); |
transform: rotate(55deg); |
} |
.number:nth-child(2) span { |
display: block; |
-webkit-transform: rotate(-55deg); |
transform: rotate(-55deg); |
} |
.number:nth-child(3) { |
-webkit-transform: rotate(85deg); |
transform: rotate(85deg); |
} |
.number:nth-child(3) span { |
display: block; |
-webkit-transform: rotate(-85deg); |
transform: rotate(-85deg); |
} |
.number:nth-child(4) { |
-webkit-transform: rotate(115deg); |
transform: rotate(115deg); |
} |
.number:nth-child(4) span { |
display: block; |
-webkit-transform: rotate(-115deg); |
transform: rotate(-115deg); |
} |
.number:nth-child(5) { |
-webkit-transform: rotate(145deg); |
transform: rotate(145deg); |
} |
.number:nth-child(5) span { |
display: block; |
-webkit-transform: rotate(-145deg); |
transform: rotate(-145deg); |
} |
.number:nth-child(6) { |
-webkit-transform: rotate(175deg); |
transform: rotate(175deg); |
} |
.number:nth-child(6) span { |
display: block; |
-webkit-transform: rotate(-175deg); |
transform: rotate(-175deg); |
} |
.number:nth-child(7) { |
-webkit-transform: rotate(205deg); |
transform: rotate(205deg); |
} |
.number:nth-child(7) span { |
display: block; |
-webkit-transform: rotate(-205deg); |
transform: rotate(-205deg); |
} |
.number:nth-child(8) { |
-webkit-transform: rotate(235deg); |
transform: rotate(235deg); |
} |
.number:nth-child(8) span { |
display: block; |
-webkit-transform: rotate(-235deg); |
transform: rotate(-235deg); |
} |
.number:nth-child(9) { |
-webkit-transform: rotate(265deg); |
transform: rotate(265deg); |
} |
.number:nth-child(9) span { |
display: block; |
-webkit-transform: rotate(-265deg); |
transform: rotate(-265deg); |
} |
.number:nth-child(10) { |
-webkit-transform: rotate(295deg); |
transform: rotate(295deg); |
} |
.number:nth-child(10) span { |
display: block; |
-webkit-transform: rotate(-295deg); |
transform: rotate(-295deg); |
} |
.number:nth-child(11) { |
-webkit-transform: rotate(325deg); |
transform: rotate(325deg); |
} |
.number:nth-child(11) span { |
display: block; |
-webkit-transform: rotate(-325deg); |
transform: rotate(-325deg); |
} |
.number:nth-child(12) { |
-webkit-transform: rotate(355deg); |
transform: rotate(355deg); |
} |
.number:nth-child(12) span { |
display: block; |
-webkit-transform: rotate(-355deg); |
transform: rotate(-355deg); |
} |
.arms { |
position: absolute; |
top: 50%; |
left: 50%; |
} |
.arms:after { |
display: block; |
position: absolute; |
top: 50%; |
left: 50%; |
width: 15px; |
height: 15px; |
content: ""; |
background: #ccc; |
border-radius: 50%; |
-webkit-transform: translate(-50%, -50%); |
transform: translate(-50%, -50%); |
z-index: 999; |
} |
.arm { |
position: absolute; |
top: 50%; |
left: 50%; |
height: 25px; |
width: 5px; |
content: ""; |
background: black; |
-webkit-transform: translate(-50%, -100%); |
transform: translate(-50%, -100%); |
border-radius: 0 0 10px 10px; |
-webkit-transform-origin: 50% 100%; |
transform-origin: 50% 100%; |
z-index: 4; |
-webkit-animation: count 3600s linear infinite; |
animation: count 3600s linear infinite; |
} |
.arm:after { |
display: block; |
content: ""; |
position: absolute; |
left: 0; |
bottom: 0; |
width: 80%; |
height: calc(100% + 25px); |
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent 70%); |
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 70%); |
z-index: 1; |
-webkit-animation: moveShadow 3600s linear infinite; |
animation: moveShadow 3600s linear infinite; |
-webkit-transform-origin: 50% 100%; |
transform-origin: 50% 100%; |
} |
.arm:before { |
display: block; |
position: absolute; |
top: -25px; |
width: 0; |
height: 0; |
border: 3px solid transparent; |
border-width: 3px 2px 10px; |
border-bottom-color: black; |
content: ""; |
} |
.arm.arm-hour { |
height: 6px; |
-webkit-transform: translate(-50%, -100%) rotate(30deg); |
transform: translate(-50%, -100%) rotate(30deg); |
-webkit-animation: count 216000s linear infinite; |
animation: count 216000s linear infinite; |
} |
.arm.arm-hour:after { |
-webkit-animation: moveShadow 216000s linear infinite; |
animation: moveShadow 216000s linear infinite; |
} |
.arm.arm-second { |
height: 30px; |
width: 3px; |
-webkit-transform: translate(-50%, -100%) rotate(60deg); |
transform: translate(-50%, -100%) rotate(60deg); |
z-index: 3; |
background: red; |
-webkit-animation: count 60s linear infinite; |
animation: count 60s linear infinite; |
} |
.arm.arm-second:after { |
-webkit-animation: moveShadow 60s linear infinite; |
animation: moveShadow 60s linear infinite; |
} |
.arm.arm-second .body { |
display: block; |
position: relative; |
top: 0; |
left: 0; |
width: 100%; |
height: 100%; |
content: ""; |
background: red; |
z-index: 4; |
} |
.arm.arm-second:before { |
border-width: 3px 2px 10px; |
border-bottom-color: red; |
z-index: -1; |
} |
@-webkit-keyframes count { |
0%, 100% { |
-webkit-transform: translate(-50%, -100%); |
transform: translate(-50%, -100%); |
} |
25% { |
-webkit-transform: translate(-50%, -100%) rotate(90deg); |
transform: translate(-50%, -100%) rotate(90deg); |
} |
50% { |
-webkit-transform: translate(-50%, -100%) rotate(180deg); |
transform: translate(-50%, -100%) rotate(180deg); |
} |
75% { |
-webkit-transform: translate(-50%, -100%) rotate(270deg); |
transform: translate(-50%, -100%) rotate(270deg); |
} |
} |
@keyframes count { |
0%, 100% { |
-webkit-transform: translate(-50%, -100%); |
transform: translate(-50%, -100%); |
} |
25% { |
-webkit-transform: translate(-50%, -100%) rotate(90deg); |
transform: translate(-50%, -100%) rotate(90deg); |
} |
50% { |
-webkit-transform: translate(-50%, -100%) rotate(180deg); |
transform: translate(-50%, -100%) rotate(180deg); |
} |
75% { |
-webkit-transform: translate(-50%, -100%) rotate(270deg); |
transform: translate(-50%, -100%) rotate(270deg); |
} |
} |
@-webkit-keyframes moveShadow { |
0%, 100%, 5% { |
-webkit-transform: rotate(5deg); |
transform: rotate(5deg); |
} |
10% { |
-webkit-transform: rotate(8deg); |
transform: rotate(8deg); |
} |
40%, 90% { |
-webkit-transform: rotate(0deg); |
transform: rotate(0deg); |
} |
70% { |
-webkit-transform: rotate(-5deg); |
transform: rotate(-5deg); |
} |
} |
@keyframes moveShadow { |
0%, 100%, 5% { |
-webkit-transform: rotate(5deg); |
transform: rotate(5deg); |
} |
10% { |
-webkit-transform: rotate(8deg); |
transform: rotate(8deg); |
} |
40%, 90% { |
-webkit-transform: rotate(0deg); |
transform: rotate(0deg); |
} |
70% { |
-webkit-transform: rotate(-5deg); |
transform: rotate(-5deg); |
} |
} |
</style> |
<!-- html调用代码：--> |
<meta charset="UTF-8"> |
</head> |
<body> |
<div class="watch" style="margin:0 auto;"> |
<div class="face"> |
<div class="numbers"> |
<div class="number number-1"> <span>1</span></div> |
<div class="number number-2"> <span>2</span></div> |
<div class="number number-3"> <span>3</span></div> |
<div class="number number-4"> <span>4</span></div> |
<div class="number number-5"> <span>5</span></div> |
<div class="number number-6"> <span>6</span></div> |
<div class="number number-7"> <span>7</span></div> |
<div class="number number-8"> <span>8</span></div> |
<div class="number number-9"> <span>9</span></div> |
<div class="number number-10"> <span>10</span></div> |
<div class="number number-11"> <span>11</span></div> |
<div class="number number-12"> <span>12</span></div> |
</div> |
<div class="arms"> |
<div class="arm arm-hour"></div> |
<div class="arm arm-minute"></div> |
<div class="arm arm-second"> |
<div class="clock_t"></div> |
</div> |
</div> |
</div> |
</body> |
</html> |
