文章目录
- 一、效果演示
- 二、Code
- HTML
- CSS
- JavaScript
- 三、实现思路拆分
- CSS 部分
- JavaScript 部分
- 四、源代码
一、效果演示
文末可一键复制完整代码
二、Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霓虹灯数字时钟</title>
<link rel="stylesheet" href="./127-霓虹灯数字时钟.css">
</head>
<body>
<figure>
<div class="face top">
<p id="s"></p>
</div>
<div class="face front">
<p id="m"></p>
</div>
<div class="face left">
<p id="h"></p>
</div>
</figure>
</body>
<script src="./127-霓虹灯数字时钟.js"></script>
</html>
CSS
@font-face {
font-family: 'Digital-7';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
font-weight: normal;
font-style: normal;
}
::selection {
background: #333;
}
::-moz-selection {
background: #111;
}
*,
html {
margin: 0;
}
body {
background: #333
}
figure {
width: 210px;
height: 210px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -105px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-35deg) rotateY(45deg);
transform: rotateX(-35deg) rotateY(45deg);
transition: 2s;
}
figure:hover {
-webkit-transform: rotateX(-50deg) rotateY(45deg);
transform: rotateX(-50deg) rotateY(45deg);
}
.face {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-origin: center;
transform-origin: center;
background: #000;
text-align: center;
}
p {
font-size: 180px;
font-family: 'Digital-7';
margin-top: 20px;
color: #2982FF;
text-shadow: 0px 0px 5px #000;
-webkit-animation: color 10s infinite;
animation: color 10s infinite;
line-height: 180px;
}
.front {
-webkit-transform: translate3d(0, 0, 105px);
transform: translate3d(0, 0, 105px);
background: #111;
}
.left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
transform: rotateY(-90deg) translate3d(0, 0, 105px);
background: #151515;
}
.top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
transform: rotateX(90deg) translate3d(0, 0, 105px);
background: #222;
}
@keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
@-webkit-keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
JavaScript
function date_time(id) {
date = new Date;
h = date.getHours();
if (h < 10) {
h = "0" + h;
}
m = date.getMinutes();
if (m < 10) {
m = "0" + m;
}
s = date.getSeconds();
if (s < 10) {
s = "0" + s;
}
document.getElementById("s").innerHTML = '' + s;
document.getElementById("m").innerHTML = '' + m;
document.getElementById("h").innerHTML = '' + h;
setTimeout('date_time("' + "s" + '");', '1000');
return true;
}
window.onload = date_time('s');
三、实现思路拆分
CSS 部分
@font-face {
font-family: 'Digital-7';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
font-weight: normal;
font-style: normal;
}
定义数字时钟使用的字体。
::selection {
background: #333;
}
设置文本选中时的背景颜色。
::-moz-selection {
background: #111;
}
设置Mozilla浏览器中文本选中时的背景颜色。
*,
html {
margin: 0;
}
重置默认的外边距。
body {
background: #333;
}
设置页面背景颜色。
figure {
width: 210px;
height: 210px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -105px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-35deg) rotateY(45deg);
transform: rotateX(-35deg) rotateY(45deg);
transition: 2s;
}
定义时钟容器的样式，包括尺寸、位置、3D转换和过渡效果。
figure:hover {
-webkit-transform: rotateX(-50deg) rotateY(45deg);
transform: rotateX(-50deg) rotateY(45deg);
}
定义时钟容器悬停时的样式。
.face {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-origin: center;
transform-origin: center;
background: #000;
text-align: center;
}
定义时钟各个面的样式。
p {
font-size: 180px;
font-family: 'Digital-7';
margin-top: 20px;
color: #2982FF;
text-shadow: 0px 0px 5px #000;
-webkit-animation: color 10s infinite;
animation: color 10s infinite;
line-height: 180px;
}
定义时钟数字的样式，包括字体、颜色、阴影和动画。
.front {
-webkit-transform: translate3d(0, 0, 105px);
transform: translate3d(0, 0, 105px);
background: #111;
}
.left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
transform: rotateY(-90deg) translate3d(0, 0, 105px);
background: #151515;
}
.top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
transform: rotateX(90deg) translate3d(0, 0, 105px);
background: #222;
}
定义时钟各个面的具体样式，包括背景颜色和3D转换。
@keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
@-webkit-keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
定义霓虹灯颜色变化动画的关键帧。
JavaScript 部分
function date_time(id) {
date = new Date;
h = date.getHours();
if (h < 10) {
h = "0" + h;
}
m = date.getMinutes();
if (m < 10) {
m = "0" + m;
}
s = date.getSeconds();
if (s < 10) {
s = "0" + s;
}
document.getElementById("s").innerHTML = '' + s;
document.getElementById("m").innerHTML = '' + m;
document.getElementById("h").innerHTML = '' + h;
setTimeout('date_time("' + "s" + '");', '1000');
return true;
}
window.onload = date_time('s');
定义一个函数来获取当前时间并更新时钟的显示，设置页面加载完成时执行该函数。
四、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霓虹灯数字时钟</title>
<style>
@font-face {
font-family: 'Digital-7';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
font-weight: normal;
font-style: normal
}
::selection {
background: #333
}
::-moz-selection {
background: #111
}
*,
html {
margin: 0
}
body {
background: #333
}
figure {
width: 210px;
height: 210px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -105px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-35deg) rotateY(45deg);
transform: rotateX(-35deg) rotateY(45deg);
transition: 2s
}
figure:hover {
-webkit-transform: rotateX(-50deg) rotateY(45deg);
transform: rotateX(-50deg) rotateY(45deg)
}
.face {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-origin: center;
transform-origin: center;
background: #000;
text-align: center
}
p {
font-size: 180px;
font-family: 'Digital-7';
margin-top: 20px;
color: #2982FF;
text-shadow: 0px 0px 5px #000;
-webkit-animation: color 10s infinite;
animation: color 10s infinite;
line-height: 180px
}
.front {
-webkit-transform: translate3d(0, 0, 105px);
transform: translate3d(0, 0, 105px);
background: #111
}
.left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
transform: rotateY(-90deg) translate3d(0, 0, 105px);
background: #151515
}
.top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
transform: rotateX(90deg) translate3d(0, 0, 105px);
background: #222
}
@keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000
}
}
@-webkit-keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000
}
}
</style>
</head>
<body>
<figure>
<div class="face top">
<p id="s"></p>
</div>
<div class="face front">
<p id="m"></p>
</div>
<div class="face left">
<p id="h"></p>
</div>
</figure>
</body>
<script>
function date_time(id) {
date = new Date;
h = date.getHours();
if (h < 10) {
h = "0" + h
}
m = date.getMinutes();
if (m < 10) {
m = "0" + m
}
s = date.getSeconds();
if (s < 10) {
s = "0" + s
}
document.getElementById("s").innerHTML = '' + s;
document.getElementById("m").innerHTML = '' + m;
document.getElementById("h").innerHTML = '' + h;
setTimeout('date_time("' + "s" + '");', '1000');
return true
}
window.onload = date_time('s');
</script>
</html>
