jquery+animate实现文字多种多行文字飞入动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery+animate实现文字多种多行文字飞入动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img {
    	margin:0;
    	padding:0;
    }
    body,html {
    	font-size:16px;
    	font-family:"微软雅黑";
    	height:100%;
    	width:100%;
    	box-sizing:border-box;
    	overflow:hidden;
    	background-size:100% 100%;
    	background-color:#1F1F1F;
    	color:#FFFFFF;
    }
    a {
    	color:#3e3e3e;
    	text-decoration:none;
    }
    img,input,button,textarea {
    	border:none;
    	padding:0;
    	margin:0;
    	outline-style:none;
    }
    ul {
    	list-style:none;
    }
    input {
    	padding-top:0;
    	padding-bottom:0;
    	font-family:"SimSun","宋体";
    }
    /*去掉行内替换元素空白缝隙*/img {
    	border:0;
    	vertical-align:middle;
    }
    h1,h2,h3,h4,h5,h6 {
    	text-decoration:none;
    	font-weight:normal;
    	font-size:100%;
    }
    s,i,em,u {
    	font-style:normal;
    	text-decoration:none;
    }
    .fl {
    	float:left;
    }
    .fr {
    	float:right;
    }
    /*清除浮动*/.clearfix:before,.clearfix:after {
    	content:"";
    	display:table;
    }
    .clearfix:after {
    	clear:both;
    }
    .clearfix {
    	*zoom:1;
    	/*IE/7/6*/
    }
    #btnBox {
    	text-align:center;
    	margin-top:30px;
    }
    #btnBox .speed {
    	font-size:18px;
    	color:#ff4747;
    	font-weight:bold;
    }
    #btnBox ul {
    	display:inline-block;
    }
    #btnBox ul li {
    	float:left;
    	padding:14px 0;
    	background-color:rgba(93,207,255,0.7);
    	width:18%;
    	margin:5px;
    	border-radius:5px;
    	-webkit-box-shadow:2px 2px 2px 2px rgba(64,116,153,0.7);
    	-moz-box-shadow:2px 2px 2px 2px rgba(57,114,148,0.7);
    	box-shadow:2px 2px 2px 2px rgba(59,127,157,0.7);
    	cursor:pointer;
    }
    #btnBox ul .effF {
    	background-color:rgba(26,187,255,0.9);
    }
    #btnBox .speedF {
    	color:#c15404;
    }
    #btnBox .speedBtn {
    	position:absolute;
    	left:50%;
    	-webkit-transform:translate(-50%,0%);
    	-moz-transform:translate(-50%,0%);
    	-ms-transform:translate(-50%,0%);
    	-o-transform:translate(-50%,0%);
    	transform:translate(-50%,0%);
    }
    #btnBox .speedBtn i {
    	padding:6px 10px;
    	cursor:pointer;
    }
    @media screen and (max-width:1430px) {
    	#btnBox {
    	top:14px;
    }
    }
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        var arr;
    var obj;
    
    function text(c) {
        var d = {
            str: c.str || "土地是以它的肥沃和收获而被估价的。才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。",
            effect: c.effect || "upBig",
            speed: c.speed || 200,
        };
        arr = [];
        for (var a = 0; a < d.str.length; a++) {
            arr[a] = d.str[a]
        }
        console.log(arr);
        var b = 0;
        obj = setInterval(function() {
            var f = Math.floor(Math.random() * 4) + 1;
            var e = null;
            if (f === 1) {
                e = "fadeInRightBig"
            }
            if (f === 2) {
                e = "fadeInLeftBig"
            }
            if (f === 3) {
                e = "fadeInUpBig"
            }
            if (f === 4) {
                e = "fadeInDownBig"
            }
            if (d.effect === "normal") {
                $("#text").append('<span style="display: inline-block;" class="tip">' + arr[b] + "</span>")
            } else {
                if (d.effect === "rightBig") {
                    $("#text").append('<span style="display: inline-block;" class="tip animated fadeInRightBig">' + arr[b] + "</span>")
                } else {
                    if (d.effect === "right") {
                        $("#text").append('<span style="display: inline-block;" class="tip animated fadeInRight">' + arr[b] + "</span>")
                    } else {
                        if (d.effect === "leftBig") {
                            $("#text").append('<span style="display: inline-block;" class="tip animated fadeInLeftBig">' + arr[b] + "</span>")
                        } else {
                            if (d.effect === "left") {
                                $("#text").append('<span style="display: inline-block;" class="tip animated fadeInLeft">' + arr[b] + "</span>")
                            } else {
                                if (d.effect === "downBig") {
                                    $("#text&qu.........完整代码请登录后点击上方下载按钮下载查看