css实现荧光闪烁、时间、流水、炫酷

1、html部分

<div id="app"> <div class="time" v-if="house">{{house}}:{{minute}}:{{second}} el: "#app", data() { return { house: null, minute: null, second: null } }, created() { setInterval(() => { let dateTime = new Date(), // yer = dateTime.getFullYear(), // moth = String(dateTime.getMonth() + 1), // day = dateTime.getDate().toString(), house = dateTime.getHours().toString(), minute = dateTime.getMinutes().toString(), second = dateTime.getSeconds().toString(); // 补〇 // moth = ('00' + moth).slice(moth.length); // day = ('00' + day).slice(day.length); house = ('00' + house).slice(house.length); minute = ('00' + minute).slice(minute.length); second = ('00' + second).slice(second.length); this.house = house; this.minute = minute; this.second = second; }, 1000); }, }); 

3、css部分

* { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } html,
body { display: grid; height: 100%; place-items: center; background-color: #000; } .time { font-size: 50px; font-weight: 600; background: linear-gradient(135deg, #14ffe9, #ffeb3d, #ff00e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: animate 1.5s linear infinite; } @keyframes animate { 100% { filter: hue-rotate(360deg); } } 

4、效果演示 4.1、微信小程序码

4.2、普通二维码