桃花随意飘落

css3 + js

不实用第三方类库

效果图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

</head>

<body>

    <script>

        //生成从minNum到maxNum的随机数

        const randomNum = (minNum, maxNum) => {

            if (minNum && maxNum) {

                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);

            } else if (minNum) {

                return parseInt(Math.random() * minNum + 1, 10);

            } else {

                return parseInt(Math.random() * 10, 10);

            }

        }

        // 桃花素材

        const snowflakeURl = new Array(8).fill().map((item, index) => `./images/icon_petal_${index + 1}.png`)

        // 随机六张图

        const getImagesName = () => snowflakeURl[randomNum(8)];

        // 创建一个雪花元素

        const createSnow = () => {

            const startPositionLeft = randomNum(document.body.offsetWidth);

            let randomStart = Math.random();

            randomStart = randomStart < 0.5 ? 1 : randomStart;

            const snowboxCssText = `

            position: fixed;

            top:-10px;

            width: 25px;

            transform: rotate(0deg);

            height: 26px;

            background-repeat:no-repeat;

            opacity:${randomStart};

            background-image: url(${getImagesName()});

            left:${startPositionLeft}px;

            `;

            const snow = document.createElement('div');

            snow.style.cssText = snowboxCssText;

            return snow;

        }

        const main = () => {

            // 造新落花

            const snow = createSnow();

            document.body.appendChild(snow);

            const duration = randomNum(6, 10) * 1000; //随机下落时间

            const endPositionLeft = Number(snow.style.left.replace('px', '')) - 100 + Math.random() * 500 + 'px'; //所及下落左/右位置

            snow.animate([

                { top: 1000 + 'px', transform: `rotate(${randomNum(100, 360 * 3)}deg)`, left: endPositionLeft }

            ], {

                duration

            })

            snow.getAnimations().map((animation) => {

                animation?.finished.then(() => {

                    console.log('finished');

                    snow.remove();

                })

            })

        }

        main()

        setInterval(async () => {

            main()

        }, 300)

    </script>

</body>

</html>

图片资源下载

以下是我转成base64图片的代码，不需要图片资源

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

</head>

<body>

    <script>

        const base64Img = [

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+1JREFUeNqclr9vFUcQx2f2ToAdGyp+PAkigZSIgCLFBEWisBSEKJIiNC7S0QRZCU2UFFCAlH8gilKlTEHrImnSUURQEMVVCgoQtAQMWC958bN573bzmd093/n9kCyfNLc/bne+M9+Z2T198tGiTHxUxBWFOOdoXerTKhO0NEXlyjRXlCXrVKY9pezu2YcsIBdVtYMU6vQl47vIA5EwiFbtCSREj94X1a9RfBzpIZV5B0gH6y/Qf8qiW6x8tRcQM+0KzZd0uoxeACa1qIlzG0gHyn4AbJk1/Ykg1XA4rh0F8P0ZzVeoXGPCG2aNUa9JQPovAIe1cEu0dyaBuBCCjArPB6i5LgYg4ncRsy7Yl4L3+3zlZVRKe414MSdOboL2GjgfLDAROKSmDldtECu8+gGjDksO8WVtjC7Qd9DE6ypb5xiuS2jiH1+m2GBdAjQQz35nn7zxGA5MjIlvgzh3rBD5hN3dhr6svC3sCRgUNHFpc5qC9WYiiFnWpFNYwsohm3zIFMm2wvHWADTEZCgAWWfYm1QvDYiGg9hzEeUbjcWIWh/FmG2tN1rU5y0hiepMKkr5z7ysBpVUVVUnUUMX1nyIwllkI3EO3yhVlHszJGYxqS3JA4kAFCXfSONhylSZAaRvOj2l4TOIi/xiHkovI71otc+8+xTYuh8sJWO/yulZRamG1SbtAvM/o2NRclHVteTiQu8PoeQdlA3aALGtEojPAElxu/UZyG8hnv5t1l+TVnBSTDSchJWD8P4ieVIHuKlEF6syURSpUhfjES3OfPNYIJ4zu4Re0/WL0V6aFXB6jozpR8VsiaxrfSQ0QJZJcRyMButorq3IT64pKyBZQ/kXyH2mXpontvwsEXyTrKG4NNXeDi9CyqZYE4Bwo2wflNvHaXN6Wwmw3H/MaMWya5alh9k3jPkv0cAWRY0Os1ZzVplpo140GPE4oBS4g0JYsWNlnmVvA/DMQjhJuQTZVg61dW3Ux9BY+YV8DuHNfuO/DBYoLzdQ+y3KZ/Gi2wZKMckAptxnoGlUZaOAKC02Nioz5AMLFNRdQ/ll+P+H+U3NkbcStEBHIGt9ywuV5pJpuQLOW0TmdzOgfTN2SYLvqfLfAFrG+nexvMeRu6mtlN1B0/SYzPF6THd10vVrbD4E7Bs8O4/Rn2PVGTzYwIM+HlRq93utvLkmpZWI8+zpAfydpONm6h1vCfAHi1d9FU7hwad4ch6lR5gb0G7ZD0XSHV/cEFLfJfeY+UmLorvbXyIDe4xnPxKIGdw8Qe6+B8BpLD2acjqSZX8qf9H7k8HfeBv28t9lj/2JPILQR7D6K9WmST+kOitPnfrr9b8AAwBO9bdMMR/shAAAAABJRU5ErkJggg==',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNqklM2OTUEQx7vqnDF3uBOCxOfGWixtvAE7mQUbD+AZbGzsrTyCiCewk1xjgzWrsZPIYIYYg3tPV/lV9zn3+hginJP/qeqvX1d3Vx/ZvryW3DxZtpRzl6zLRTlsDtsVv6q251mXuqifVXVFs5U2/f/ToIsq8ulfYYIOorN4a4AuuMjVOcyTH8AclyRj7LJIzMgYEafc4q5QOIR/iroz9DsmIqtol/KrpLpJJ6pVzjHyJsSxNRRdM/AkFlL6qbmZu1KjOhOxzJhORLfQSNSeM+Zz27RNhHWJ5iV333Q3aAokrMRcqXxEkS0WWepKiYjTUyJknqZJaEMVBBBMD+nV+0kGBuXyflcWeaxNWUEZ/Iiar7RqH0oaph12tOycyCKyavfzfUL9VrRp5Bd59pbKN/WYPVXtcX6/VgfsLgF5BNWysdHnPPYk0A9OwQuPIyha4H3wKnSMXWeSjdiaeFqyPJLuGhF+KeAibsRA/UGD6w2il9+Rmjpz2FE6EJXtxvWpy15AiwJQrAVI+RzB3iAttqVZrLntZpkk9X103jHLybOXOxkw61XAddlKyEzut4ny2c8b2HJ539EwZVZlEE+99EU9qPdH+Mtk7y1gk70ORPkLvAd4n7/CCbQ0/C16YJz22LMdRi8BXgcw+d2FbcuS3O8x6DX2Css9zXKtwvJHnHX0gKheALI/3f52npXJHwKYAFhl4Ah/SiQ7wKd/+yv5JsAAAqqzyhQ5+KYAAAAASUVORK5CYII=',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAZCAYAAADXPsWXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAshJREFUeNqcVD1rFUEUvWdm98XggxAVCxFEwYAoqIhoaSVYC9pYCBYW/gnBIvaCjWAaGxErLUXESkHEzpSChRpFA5oX4svc67kzu3mbZxI/5r3L7OzOOffcjxnMHzslG40QgoBWZj7FILGqtOr1xJ+7o5KtRw3IOVK4QYA5EXv5m8MtCCYBzBJ8jWqmQ4w7qGCWRDN/S1ITfIPgGcSwQIIh41nh/I1ElzmDlsNyqyzpejj1c8MlqjjMXHwBPC9oLAz47UiMcYo7FwWb52Q/eS6Q5KsTAIUYhcTN07yvqqvF2KvLO1WV1syMW+UqQQOauic0BK0RtMwQzjLM6fzNlY+RzPDtUWIHEJMiAo3qRjtkme9Oc3Wfq+MlsWbSsfN8N1gXnOV/dw0TG3D7EvdfVFNUrqA4wE4JOMlNS9YAy1wWVDkypUGHmiRKElT+omE5wQ0T/Pw9o8htoQNqzJ0igVipqWKBzrUtMRDjGW77MfLoOQoFGAhUkICZSE2DmfZYpReesxIO0IfZAQKG5gl2gJe3ebbkaydAm5doISwB9ir3SZYH7GFxd9DzpzXp0OzZFeRmSW1i+S3aFB3MebkzSc4J7KBq+Ome3WMGhjJr9o5RcczqYPY5AI8SSlEqXWV6YzhEgpUsHQXoP+2Ac52oIgSbsqDX+bBS2rmE48diL6Unz3r+0HTiWghFgRPsJsEdnp35VR2dOYajPS77BGmbvKKi6bQRwS4SPObF9HD8xLmSHu+DSTJom3208puGywTRnkSJt2WsgYuSpBPM7SSRg7FuZy/wWEQSmD2IkLsSo250+VSatKbnusTfqYRJnwRsH7sZK3nm/ja7AhlOYl4tdjRs47JPGa/5fIul/CjrqrSxkggPR2Q7bYIK3vJY3WOO3zAahfx5kCQNqfkdM/ic66cEvbcYkvzD8I79wCN7hddWyqX4j/FLgAEAEYiFiCZX+e4AAAAASUVORK5CYII=',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAYAAADUUxW8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAolJREFUeNp8lL9rVEEQx2dm9/Q8jIeKSLTxH7AwjYi1/4GWFlcJ9qKkF1sFK7GxsbExhVjYaqtYGPxFEAXhxMTEHPFd8nbG77x9d777YTZMdnd2P/Nz3/HHcxfIBwehECMkHAutcCaEUEiMn2OrtRsORBIRkhCIhclUIUaR/g1mpsvEdBXLNm654hv2t3G2RnOGjEmiK5iuYd6G9GGoD+UR6O5ivzgXVg/B7LQR9bDvw4w2zgvIHs5uIYo4DUdNyXNxr0MzUhii6g8zJojtIL9TJrbMZmvQfYX2NWQQsWljseSXaARqFoUwIuOUCoRz1oItIa4Orm3ivBcR9nE2OQFPG5VXB9nqiioM5IrgqIChAuFvQ7FopkcjgC4uBVNPH16USVEtnwkp5crAGFrJ6h2gAEM/oV2PAFsA0xiEeM80cQY99cDgraoljg5D9xSLPwjbPJxQgQ4wN+qZ0xATpKL+QCRboBW/55634G2XU/UqlFIDdTDkyvvLgoMFwCt4HetVqwD/skQ/UJcOLGruT9UiMsnVZ7XaKw2R0pNRdF7tIeZVWLzoD4Lq/jo49lrlyl3II3C/jWrYD1NKz7G+5I2vnVYgjUD/KpgGzPKsWZLoeWG8T5Q+YXUSxoqRRxP3CE50AV4fw9DOxPO0/AqSGT9EuHfQxcJB8Xy9SDlk//diohGjsOsCvUXbXmJ/XkS3TKpP0kNuY36Dgm3MfBi159xSsnvo6QOAB1lsmGE9JMyvYMlmYZvQDVKZlgHeB1QCTsi5VOEP+/4YNMaXVJY3tUxdGGphbWmv3ITQtMyDfbwDdEPLsp2ylBCalv/BXoNVeL6OCAYw0oHQtETabxh9V009yz8YM+OvAAMAa97AOEdO7j0AAAAASUVORK5CYII=',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXZJREFUeNp0UUtKA0EQrd9kVCJBEjcewLVEF67cuPIM3kD34gVE3LnxCh5CvINuvYCgiCJJJGa6qn09iaCCPRRDV7+q9+oVP2zt0s8jpqxmfevYW7VUOzPP879QTJWInKrpNQrOAFLKRDlnEnenNsIZoGNR3QPwySobKqLuLlN3rUeSI6gECDZZ+ECUX1iFUDAx0/2qU0m9vFSAubQGjg+ZeEzQ1H7MY1AM8b/IOSoJD0L0oXAIOR+oajXlubbPiNj2Jg3MUwKNbIGei4QAQxQ5RXfTzjoOjYkFEuDZgYRZAZR7uFBqUhl4BcX3rD4yPBpeNjB5w0lQg0EQDp2g7maNa2jNlj3qIBqEeBMiFBgmYTSoXJOIG+QfiiWWmqaj2Xou6XWxhJYSTI/w8crUcslZmiXDS/W9KmRXYccr1ngC4JQWxRYpiUMOElroMNQdbucAjn5uF/Y4DKF1+PYMwCV636KT059jMPMdXY5AfZ9Vp/TP+RJgACFt0d6A0633AAAAAElFTkSuQmCC',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbdJREFUeNpcksFqFEEQhqt7ZjZZXVAUCV7zEh6EhBw8CV48COJJPAk+QMjJ9xCvgogiuejdN/AFvAkxGpSVbLq7qvy6ZxZXB2pmoOqr/6/qDl9uH0iMUWbzLemGgehltr0lIYZdLfpEU/5dcj7Oq/Q5rS7c1KQ+vfz7dOI+lJRnMYYjVbthylvtwN1fkX9J+CYYSOy52X2zsCDnVmTbzH+iKlbKkgYPqDkhjhtoZhIk7Gsuz+l1AqwaQs1lisQBR1i/kXlccvlE37OeGaL0/hCVr26eYxfRb6A0kJkAKmxWbKDBHZq/7hlhID+nyCJFAXDiRtBc6kK0lNpgie09mrzpsZi9s19w10OMGguKcZqcNdBd6jg2Ws58byK26Pkx7Hywzp+yyVOrcmtJngo1WCdYNfK92paDpY9B9S7nuQO0DBsz8gKuszao2u1ocmltKmH5MF+kU87wWkkpEsL/38hZqGnBZkM7x8nYGTM8EymPUL0ndVKXc1QTC7LRrlbr9cBWGzen4StW/oKqt0D7+LzlJrss7gposRG+jNXl/1duvc0fKL2j6D0zzrl0CxQXgPPpXL//EWAAgfSO+7ohlD8AAAAASUVORK5CYII=',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPhJREFUeNockDtOAzEQhsezXrISEgEEiCMgUQEF56CgIg00FJyFgkPkOLkBokZBKDzCZtfz4ndsfX5o5h//49TfzchEafX+QeFOpn4q4ziToZgM49zMljk8KO+0ND0+pP573Uopz0ieulWBXpvaQyaMqEtKbZ60Vx6+i8CKGyZmPkmJLmsSznzLTXMD6vmXEUkVThvidMbufu6qjxFhYAQU29JU9zq7DHP7ykngwWsD1QuEW+CtAZ+5bIYFSi894gBJay1iMOyuVgUdeEN33ovoEy73bnahokdI7AAqC8L+CuMJb8cP1C+o1GHfAxN0CI3/4Yu+/gUYACJeyfo1sqdUAAAAAElFTkSuQmCC',

            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNoUjEsKwkAQBd90j2bGIYJbEUQ8jgvPJIg7r+AdXHsZF+78xYQQ85lux1VBFZR5bLaoixKf+wvVs1h0TduTqkJEQURZNvF7F/zcAn9hXBI7GKwNmbE1zMHl4ZC4FJV3HKS0Pg+zoe1XEmPbfS2I6UpQvanIKb2n6XTkETe2qWqo6Dn28ZJiTcz4CTAA+1pDxlSYR4oAAAAASUVORK5CYII='

        ];

        //生成从minNum到maxNum的随机数

        const randomNum = (minNum, maxNum) => {

            if (minNum && maxNum) {

                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);

            } else if (minNum) {

                return parseInt(Math.random() * minNum + 1, 10);

            } else {

                return parseInt(Math.random() * 10, 10);

            }

        }

        // 桃花素材

        const snowflakeURl = new Array(8).fill().map((item, index) => `./images/icon_petal_${index + 1}.png`)

        // 随机六张图

        // const getImagesName = () => snowflakeURl[randomNum(8)];

        const getImagesName = () => base64Img[randomNum(8)];

        // 创建一个雪花元素

        const createSnow = () => {

            const startPositionLeft = randomNum(document.body.offsetWidth);

            let randomStart = Math.random();

            randomStart = randomStart < 0.5 ? 1 : randomStart;

            const snowboxCssText = `

            position: fixed;

            top:-10px;

            width: 25px;

            transform: rotate(0deg);

            height: 26px;

            background-repeat:no-repeat;

            opacity:${randomStart};

            background-image: url(${getImagesName()});

            left:${startPositionLeft}px;

            `;

            const snow = document.createElement('div');

            snow.style.cssText = snowboxCssText;

            return snow;

        }

        const main = () => {

            // 造新落花

            const snow = createSnow();

            document.body.appendChild(snow);

            const duration = randomNum(6, 10) * 1000; //随机下落时间

            const endPositionLeft = Number(snow.style.left.replace('px', '')) - 100 + Math.random() * 500 + 'px'; //所及下落左/右位置

            snow.animate([

                { top: 1000 + 'px', transform: `rotate(${randomNum(100, 360 * 3)}deg)`, left: endPositionLeft }

            ], {

                duration

            })

            snow.getAnimations().map((animation) => {

                animation?.finished.then(() => {

                    console.log('finished');

                    snow.remove();

                })

            })

        }

        main()

        setInterval(async () => {

            main()

        }, 300)

    </script>

</body>

</html>

css3桃花随意飘落的更多相关文章

  1. CSS3梅花三弄特效

    效果预览:http://hovertree.com/texiao/js/22/ 效果图: 代码如下: <html> <head> <meta http-equiv=&qu ...

  2. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  3. @font-face(css3属性)实如今网页中嵌入随意字体

    @font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format> ...

  4. CSS3随意记录

    1.注释 注释语法:/* 注解注释内容 */ 2.带有透明度 rgba(255,0,0,0.5);rgba(0,255,0,0.5);rgba(0,0,255,0.5); 0.5就带有透明的,介于0和 ...

  5. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  6. CSS3动画第二式--组合动画

    接第一式之后的进阶招式,加入一些组合动画,剧情.动画啥的都是随意瞎想的,纯粹是为了熟悉2D.3D和过渡等css3代码写法.效果见下图: 代码如下(有点长,折叠一下): <!DOCTYPE htm ...

  7. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  8. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  9. CSS3与页面布局学习笔记（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  10. HTML5树叶飘落动画

    查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> &l ...

随机推荐

  1. redis那些数据类型？分别在那些场景使用

    (1)string 这是最基本的类型了,没啥可说的,就是普通的set和get,做简单的kv缓存 例子:常规计数:微博数,粉丝数等 (2)hash 这个是类似map的一种结构,这个一般就是可以将结构化的 ...

  2. java基础之成员变量和局部变量区别

    1:在类中的位置不同 成员变量:类中,方法外 局部变量:方法中,或者方法声明上(形参) 2:作用范围不一样 成员变量:类中 局部变量:方法中 3:初始化值的不同 成员变量:有默认值 局部变量:没有默认 ...

  3. Sql Server数据库远程连接访问设置

    步骤一:设置sql server数据库 1.以新建一个新用户名test作为远程连接登录名.在本地登录sql server数据库,安全性->右键用户名 2.点击根目录右键,选择属性 选择安全性 选 ...

  4. 浏览器窗口之间切换的方法（Select window指令，优先使用方法2）

    Robot framework 在同一个浏览器中切换不同选项卡,通过title来定位选项卡.Title存在不唯一的情况,选择不同的选项卡有一些困难.下面的教程,通过修改selenium配置文件,来实现 ...

  5. kette介绍-Step之Merge Join

    Merge Join介绍 需要配合Sort rows使用,对关联字段进行排序 关联两个step数据,可以是两个不同的数据库表数据,也可以是一张表,一个文件,输出字段为两张表所有字段 注意将小数据集作为 ...

  6. C# 线程（一）——基础概念（线程与进程、前后台线程）

    一.基础概念 1.1线程与进程 线程--是一个可执行路径,它可以独立于其他线程执行. 进程--每个线程都在操作系统的进程(Process)内执行,而操作系统则提供了程序运行的独立环境,它提供了一个应用 ...

  7. 信息资源管理综合题之“LJ集团的知识库和员工离职客户流失问题”

    一.集团是北京的一家规模巨大的房地产投资公司,早在15年前,该公司出现了如下几个问题:每个业务员手上的客户资料,其他人无法得知,从而导致员工离职时会流失大量潜在客户:业务员繁忙的时候,无法满足客户用户 ...

  8. 鸿蒙NEXT实战教程—实现音乐歌词同步滚动

    之前写过一个音乐播放器项目,今天再给它完善一下,加一个歌词同步滚动. 先看效果图:   要做歌词同步滚动,我们首先需要的文件资源就是音乐文件和与之匹配的歌词文件.现在歌词文件不太好找,没关系,我们可以 ...

  9. ListBox横向排布Item

    <Window x:Class="TwoColumnListBox.MainWindow" xmlns="http://schemas.microsoft.com/ ...

  10. 猫映射（Arnold变换），猫脸变换介绍与基于例题脚本的爆破

    前置信息 http://www.jiamisoft.com/blog/index.php/7249-erzhituxiangjiamisuanfaarnold.html https://mp.weix ...