console
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue3 + css3动画 - 01</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 14px;
font-family: sans-serif,"HelveticaNeue",Helvetica,"PingFangSC","MicrosoftYaHei","HiraginoSansGB",Arial;
color: #27282b;
background: #111726;
}
a {
text-decoration: none;
color: #27282b;
}
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.mn {
width: 100vw;
height: 100vh;
margin: 0 auto;
perspective: 600px;
transform-style: preserve-3d;
position: fixed;
top: 0;
left: 0;
}
.mn .u5 {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s linear;
position: absolute;
top: 0;
left: 0;
background: #fff1;
}
.mn .u5.u-main {
}
.mn .u5 li {
background: #fffb;
color: #fff;
border-radius: 55%;
box-shadow: 0 0 10px #ccc;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
@keyframes anim1z {
0% {
transform: translate3d(0, 0, -6000px);
}
100% {
transform: translate3d(0, 0, 1000px);
}
}
</style>
</head>
<body>
<div class="wrapper" id="app">
<div class="mn">
<ul class="u5 u-main">
<li class="anim1s" v-for="v of dp.aList" :key="v.rid" :style="v">{{ v.text }}</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vio-utils/utils.min.js"></script>
<script>
const vm = Vue.createApp({
setup(props, ctx) {
const { reactive, onMounted, } = Vue
const dp = reactive({
aList: [],
dotLimit: 1200,
speed: [2, 10],
})
function dotObj() {
const rnd = vio.randNum
let size = `${rnd(10, 50)}px`
return {
width: size,
height: size,
top: `${rnd(1, window.innerHeight)}px`,
left: `${rnd(1, window.innerWidth)}px`,
opacity: vio.floor(rnd(6, 10) / 10),
animation: `anim1z ${rnd(dp.speed[0], dp.speed[1])}s linear both`,
text: randEmoji(),
rid: vio.randStr(12),
}
}
function randEmoji() {
return vio.randItem(Array.from({length: 79}, (v, i) => v = String.fromCodePoint(i+128512)))
}
function pushDot() {
dp.aList.push( dotObj() )
dp.aList = dp.aList.slice(-dp.dotLimit)
setTimeout(() => {
pushDot()
}, vio.randNum(20, 50))
}
onMounted(() => {
pushDot()
})
return {
vio,
dp,
}
},
}).mount('#app')
</script>
</body>
</html>