《Vue3+TS》开发一个自己的起始页，小白必看

2. 右击首页，打开快捷入口的时候，也会触发放大和毛玻璃效果；

部分代码如下：

另外，这里还有一个骨架屏的效果，就是当背景图还没有被加载的时候，整个背景图处于灰色，并且有一个从左往右的动效，代表正在加载中，骨架屏效果代码如下：

.threeS-loading {

background-color: #f2f2f2;

background: linear-gradient(

100deg,

rgba(255, 255, 255, 0) 40%,

rgba(255, 255, 255, 0.5) 50%,

rgba(255, 255, 255, 0) 60%

)

#f6f6f6;

background-size: 200% 100%;

background-position-x: 120%;

animation: 1s loading ease-in-out infinite;

}

@keyframes loading {

to {

background-position-x: -20%;

}

}

时钟组件

---

这个组件的难点在于实现电子数字的格式，这个是最复杂的，而时间的获取就是基于浏览器Date对象，这个很简单，获取时间的方法部分如下：

/**

• 获得时间

• @returns {String} 当前时间

*/

function getTime(): string {

const date = new Date();

const hour = date.getHours();

const minute = date.getMinutes();

return (

(hour >= 10 ? hour : “0” + hour) +

“:” +

(minute >= 10 ? minute : “0” + minute)

);

}

当获取到时间以后，需要将转成电子格式的，这部分的原理就是先拼出一个电子格式的8，然后，不同的数字只是去掉8中的某一个笔划，这样就达到了0-9的数字，这里我挑一部分CSS代码

.digits div span {

opacity: 0;

position: absolute;

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

transition: 0.25s;

}

.digits div span:before,

.digits div span:after {

content: “”;

position: absolute;

width: 0;

height: 0;

border: @fontSize solid transparent;

}

.digits .d1 {

height: @fontSize;

width: 16px;

top: 0;

left: 6px;

}

.digits .d1:before {

border-width: 0 @fontSize @fontSize 0;

border-right-color: inherit;

left: -@fontSize;

}

.digits .d1:after {

border-width: 0 0 @fontSize @fontSize;

border-left-color: inherit;

right: -@fontSize;

}

.digits .d2 {

heig