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