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> <h1>jquery文字洗牌排序效果</h1> <div class="letters-wrapper"> <ul class="letters"> <li>a</li> <li>e</li> <li>g</li> <li>i</li> <li>l</li> <li>n</li> <li>r</li> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0