如何用JavaScript实现网页倒影时钟特效

```

css样式

```css

.clock-container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.clock {

position: relative; font-size: 80px;

color: 333;

text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.time {

position: relative; z-index: 1;

}

.reflection {

position: absolute; bottom: -50px;

transform: scaley(-1);

filter: blur(5px);

opacity: 0.5;

z-index: -1;

}

```

javascript代码

```javascript

const timeelement = document.queryselector('.time');

function updatetime() {

const now = new date();

const hours = now.gethours().tostring().padstart(2, '0');

const minutes = now.getminutes().tostring().padstart(2, '0');

const seconds = now.getseconds().tostring().padstart(2, '0');

timeelement.textcontent = `${hours}:${minutes}:${seconds}`;

}

updatetime();

setinterval(updatetime, 1000);

```

通过以上代码，我们创建了一个包含时钟和倒影的容器。css样式定义了时钟的外观和倒影的样式，javascript则负责实时更新时间显示。

这样，一个具有独特倒影效果的时钟就呈现在网页上了。它不仅能准确显示时间，还为页面增添了一份别样的视觉效果，给用户带来全新的浏览体验。无论是个人博客还是商业网站，这种特效都能起到很好的装饰作用，吸引用户的注意力。