vue实现下雪雪花飘飘动画效果代码

代码语言:html

所属分类:粒子

代码描述:vue实现下雪雪花飘飘动画效果代码

代码标签: vue 下雪 雪花 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <style>
        body {
          background-color: #3D3D3B;
          text-align: center;
        }
        
        svg {
          max-width: 90vh;
        }
        
        .snowflake {
          fill: #F4F4F4;
        }
    </style>




</head>

<body>
    <svg id="app" viewBox="0 0 500 500">
  <circle v-for="snowflake in snowflakes"
          class="snowflake"
          :cx="snowflake.cx"
          :cy="snowflake.cy"
          :r="snowflake.r" />
</svg>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.js"></script>
    <script>
        new Vue({
          el: '#app',
          data: {
            snowflakes: [] },
        
          methods: {
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0