jquery文字洗牌重新排序动画效果代码-html代码-BFW代码库

jquery文字洗牌重新排序动画效果代码

代码语言：html

所属分类：其他

代码描述：jquery文字洗牌重新排序动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
	padding:10px;
	font-family:"trebuchet MS";
}
.letters-wrapper {
	position:relative
}
.letters li {
	font-weight:bold;
	display:block;
	float:left;
	padding:9px 10px 11px 10px;
	margin:0 5px 0 0;
	width:30px;
	height:30px;
	text-align:center;
	text-transform:uppercase;
	border-radius:2px;
	font-size:28px;
	color:#4e3a10;
	border:1px solid #a78f5e;
	background:#ebd19a;
	background:-moz-linear-gradient(top,#ebd19a 0,#e3c083 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ebd19a),color-stop(100%,#e3c083));
	background:-webkit-linear-gradient(top,#ebd19a 0,#e3c083 100%);
	background:-o-linear-gradient(top,#ebd19a 0,#e3c083 100%);
	background:-ms-linear-gradient(top,#ebd19a 0,#e3c083 100%);
	background:linear-gradient(to bottom,#ebd19a 0,#e3c083 100%);
	-webkit-box-shadow:1px 4px 7px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 4px 7px rgba(0,0,0,0.2);
	box-shadow:1px 4px 7px rgba(0,0,0,0.2);
	text-shadow:0 0 8px #f5deaf
}
.btn {
	display:inline-block;
	padding:10px;
	color:#fff;
	cursor:pointer;
	border-radius:2px;
	border:1px solid #0e7580;
	background:#18a2ae;
	background:-moz-linear-gradient(top,#00c0d1 0,#18a2ae 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00c0d1),color-stop(100%,#18a2ae));
	background:-webkit-linear-gradient(top,#00c0d1 0,#18a2ae 100%);
	background:-o-linear-gradient(top,#00c0d1 0,#18a2ae 100%);
	background:-ms-linear-gradient(top,#00c0d1 0,#18a2ae 100%);
	background:linear-gradient(to bottom,#00c0d1 0,#18a2ae 100%)
}

    </style>
</head>

<body>

    <!-- partial:index.partial.html -->
    <h1>jquery文字洗牌排序效果</h1>
    <div class="letters-wrapper">
        <ul class="letters">
            <li>a</li>
            <li>e</li>
            <li>g&l.........完整代码请登录后点击上方下载按钮下载查看