jquery实现图标图形符号飘动落下动画效果代码-html代码-BFW代码库

jquery实现图标图形符号飘动落下动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现图标图形符号飘动落下动画效果代码

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

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
                    margin: 0px;
                    padding: 0px;
                }

                .page {
                    width: 100vw;
                    height: 100vh;
                    background: url('//repo.bfw.wiki/bfwrepo/image/630c61379ccb3.png') no-repeat;
                    background-size: cover;
                }

                .test {
                }

                .test1 {
                    position: absolute;
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text; /*背景只显示有文字的地方*/
                }
                /*
        @keyframes test{
            100%{
                opacity: 0.4
            }
        }
        @-webkit-keyframes test{
            100%{
                opacity: 0.4
            }
        }
        .animated{
            animation: 'test' 5s linear forwards;
            -webkit-animation: 'test' 5s linear both;
        }*/
    </style>
    <script type="text/javascript">
        $(function () {
            setInterval(function () {
                var content = ['✿', '♫', '❤', '✪'];//文字图案数组
                var test = $('<div class="test1"></div>').text(content[parseInt(Math.random() * 7)]);
                var pageWidth = $('.page').width();//页面宽度
                var x = Math.random() * (pageWidth) - 100;//开始横向位置
                var deg = Math.random() * 360;//开始旋转角度
                var size = 25 + Math.random() * 30;//文字图案的大小
                var duration = 5 + Math.random() * 2;//transition动画执行时间
                var colorArray = ['0', '1', '2', '3', '4', '5', '6', '.........完整代码请登录后点击上方下载按钮下载查看