vue.js实现雪花特效完整代码
·
这是一个使用 Vue.js 实现雪花特效的完整代码示例:
<template>
<div id="app">
<div v-for="i in 60" :key="i" class="snowflake" :style="{ top: getTop(i), left: getLeft(i) }"></div>
</div>
</template>
<style>
#app {
position: relative;
}
.snowflake {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
animation: falling 10s linear infinite;
}
@keyframes falling {
from {
transform: translateY(0) rotate(0deg);
}
to {
transform: translateY(100vh) rotate(360deg);
}
}
</style>
<script>
export default {
methods: {
getTop(i) {
return Math.floor(Math.random() * 100) + "vh";
},
getLeft(i) {
return Math.floor(Math.random() * 100) + "vw";
}
}
};
</script>
这段代码中,我们使用了一个 v-for 指令来循环渲染 60 个 div 元素,并使用了 CSS 动画来实现雪花的下落效果。我们还使用了 getTop 和 getLeft 方法来随机计算每个雪花的位置。
希望这个示例能帮到你。
更多推荐
所有评论(0)