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

代码语言:html

所属分类:其他

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

代码标签: 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:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0