博客皮肤配置
页面定制css代码：
1 #loading { 2 background: #151728; 3 overflow: hidden; 4 position: fixed; 5 right: 0; 6 top: 0; 7 bottom: 0; 8 left: 0; 9 z-index: 99999; 10 } 11 12 #load { 13 position: absolute; 14 width: 600px; 15 height: 36px; 16 left: 50%; 17 top: 40%; 18 margin-left: -300px; 19 overflow: visible; 20 -webkit-user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 user-select: none; 24 cursor: default; 25 } 26 27 #load div { 28 position: absolute; 29 width: 20px; 30 height: 36px; 31 opacity: 0; 32 font-family: Helvetica, Arial, sans-serif; 33 animation: move 2s linear infinite; 34 -o-animation: move 2s linear infinite; 35 -moz-animation: move 2s linear infinite; 36 -webkit-animation: move 2s linear infinite; 37 transform: rotate(180deg); 38 -o-transform: rotate(180deg); 39 -moz-transform: rotate(180deg); 40 -webkit-transform: rotate(180deg); 41 color: #35c4f0; 42 } 43 44 #load div:nth-child(2) { 45 animation-delay: 0.2s; 46 -o-animation-delay: 0.2s; 47 -moz-animation-delay: 0.2s; 48 -webkit-animation-delay: 0.2s; 49 } 50 #load div:nth-child(3) { 51 animation-delay: 0.4s; 52 -o-animation-delay: 0.4s; 53 -webkit-animation-delay: 0.4s; 54 -webkit-animation-delay: 0.4s; 55 } 56 #load div:nth-child(4) { 57 animation-delay: 0.6s; 58 -o-animation-delay: 0.6s; 59 -moz-animation-delay: 0.6s; 60 -webkit-animation-delay: 0.6s; 61 } 62 #load div:nth-child(5) { 63 animation-delay: 0.8s; 64 -o-animation-delay: 0.8s; 65 -moz-animation-delay: 0.8s; 66 -webkit-animation-delay: 0.8s; 67 } 68 #load div:nth-child(6) { 69 animation-delay: 1s; 70 -o-animation-delay: 1s; 71 -moz-animation-delay: 1s; 72 -webkit-animation-delay: 1s; 73 } 74 #load div:nth-child(7) { 75 animation-delay: 1.2s; 76 -o-animation-delay: 1.2s; 77 -moz-animation-delay: 1.2s; 78 -webkit-animation-delay: 1.2s; 79 } 80 81 @keyframes move { 82 0% { 83 left: 0; 84 opacity: 0; 85 } 86 35% { 87 left: 41%; 88 -moz-transform: rotate(0deg); 89 -webkit-transform: rotate(0deg); 90 -o-transform: rotate(0deg); 91 transform: rotate(0deg); 92 opacity: 1; 93 } 94 65% { 95 left: 59%; 96 -moz-transform: rotate(0deg); 97 -webkit-transform: rotate(0deg); 98 -o-transform: rotate(0deg); 99 transform: rotate(0deg); 100 opacity: 1; 101 } 102 100% { 103 left: 100%; 104 -moz-transform: rotate(-180deg); 105 -webkit-transform: rotate(-180deg); 106 -o-transform: rotate(-180deg); 107 transform: rotate(-180deg); 108 opacity: 0; 109 } 110 } 111 112 @-moz-keyframes move { 113 0% { 114 left: 0; 115 opacity: 0; 116 } 117 35% { 118 left: 41%; 119 -moz-transform: rotate(0deg); 120 transform: rotate(0deg); 121 opacity: 1; 122 } 123 65% { 124 left: 59%; 125 -moz-transform: rotate(0deg); 126 transform: rotate(0deg); 127 opacity: 1; 128 } 129 100% { 130 left: 100%; 131 -moz-transform: rotate(-180deg); 132 transform: rotate(-180deg); 133 opacity: 0; 134 } 135 } 136 137 @-webkit-keyframes move { 138 0% { 139 left: 0; 140 opacity: 0; 141 } 142 35% { 143 left: 41%; 144 -webkit-transform: rotate(0deg); 145 transform: rotate(0deg); 146 opacity: 1; 147 } 148 65% { 149 left: 59%; 150 -webkit-transform: rotate(0deg); 151 transform: rotate(0deg); 152 opacity: 1; 153 } 154 100% { 155 left: 100%; 156 -webkit-transform: rotate(-180deg); 157 transform: rotate(-180deg); 158 opacity: 0; 159 } 160 } 161 162 @-o-keyframes move { 163 0% { 164 left: 0; 165 opacity: 0; 166 } 167 35% { 168 left: 41%; 169 -o-transform: rotate(0deg); 170 transform: rotate(0deg); 171 opacity: 1; 172 } 173 65% { 174 left: 59%; 175 -o-transform: rotate(0deg); 176 transform: rotate(0deg); 177 opacity: 1; 178 } 179 100% { 180 left: 100%; 181 -o-transform: rotate(-180deg); 182 transform: rotate(-180deg); 183 opacity: 0; 184 } 185 }
侧边栏：
1 <script src="https://guangzan.gitee.io/awescnb/index.js"></script> 2 <script> 3 $.awesCnb({ 4 // 默认启用皮肤 'reacg', 5 // 在这里写入配置 6 // 什么都不写代表全部使用默认配置 7 theme: { 8 name: 'reacg', 9 title:'苏唏。', 10 avatar:'https://pic.cnblogs.com/face/1932956/20201230204912.png', 11 favicon:'https://pic.cnblogs.com/face/1932956/20201230204912.png' 12 }, 13 // 图片灯箱 14 imagebox: { 15 enable: true, 16 }, 17 // 个性签名 18 signature: { 19 enable: true, 20 contents: [ 21 "欢迎来到苏唏.的博客" 22 ], 23 }, 24 // 背景图 25 bodyBackground: { 26 enable: false, 27 value: 28 '', 29 opacity: 0.85, 30 repeat: false, 31 }, 32 // 锁屏 33 lock: { 34 enable: true, 35 background: '', 36 strings: [ 37 '离开一下~', 38 ], 39 }, 40 // 音乐播放器配置 41 musicPlayer: { 42 enable: true, 43 autoplay: true, 44 lrc: { 45 enable: true, // 启用歌词 46 type: 1, // 歌词类型 1 -> 字符串 3 -> url 47 color: '#10ac84', // 颜色 48 }, 49 audio: [ 50 { 51 name: '大眠(完整版)', 52 artist: '小乐哥', 53 url: 54 'http://music.163.com/song/media/outer/url?id=1413142894.mp3', 55 cover: 56 'http://p4.music.126.net/zgDvTPDSYKjQUjkV8sQUOA==/109951164605092552.jpg?param=300x300', 57 lrc: 58 "[00:00.000] 作词 : 施人诚[00:00.007] 作曲 : 张简君伟[00:00.14]原唱：王心凌[00:00.44]编曲：明锐[00:00.85]录音：李亚男[00:01.20]配唱制作人：龚淑均[00:01.52]混音：李琰祥[00:01.87]吉他：陈柏彤[00:02.25]和声：闵成伟[00:02.62]制作人：衣睿[00:02.79]本作品经过词曲著作权利方授权[00:02.94]都快忘了怎样恋一个爱[00:04.24]我被虚度了的青春[00:06.85]也许还能活过来[00:09.57]说心疼我的更应该明白[00:12.28]我当然会沉醉个痛快[00:16.39][00:17.79]就让我陪他恋完这场爱[00:20.26]只求心花终于盛开[00:22.76]就没有别的期待[00:25.42]等梦完醒来[00:27.39]再去收拾残骸[00:32.31][00:35.11]感谢他把我 当成傻子[00:42.57]每天都哄我 上当一次[00:49.70][00:51.63]清醒一辈子 也就那样子[00:59.48]不介意用爱 来醉生梦死[01:07.46]原来被催眠 真有意思[01:13.50][01:16.03]我乐于作个 敬业人质[01:22.19][01:23.85]没空再去对谁解释[01:27.29]是我自己把自己挟持[01:30.83]不关他的事[01:37.27][01:37.66]都快忘了怎样恋一个爱[01:40.28]我被虚度了的青春[01:42.64]也许还能活过来[01:45.56]说心疼我的更应该明白[01:48.15]我当然会沉醉个痛快[01:52.79][01:53.40]就让我陪他恋完这场爱[01:56.18]只求心花终于盛开[01:58.67]就没有别的期待[02:01.63]等梦完醒来[02:03.53]再去收拾残骸[02:08.66][02:11.67]如果不失去理智[02:15.26]爱情要从何开始[02:18.10]傻傻的骗子[02:19.93]和骗人的傻子[02:22.71]才可能一生一世[02:29.09][02:29.83]都快忘了怎样恋一个爱[02:32.20]我被虚度了的青春[02:34.63]也许还能活过来[02:37.63]说心疼我的更应该明白[02:40.26]我当然会沉醉个痛快[02:45.33]就让我陪他恋完这场爱[02:48.13]只求心花终于盛开[02:50.68]就没有别的期待[02:53.67]等梦完醒来[02:55.71]再去收拾残骸[03:00.13][03:01.13]总策划：乃可/黄俊[03:02.13]企划：沈峻峻/冉启升/李莹[03:03.13]OP：华研国际音乐股份有限公司 HIM Music Publishing Inc.[99:00.01]本歌曲来自〖云上工作室〗[99:00.02]10亿现金激励，千亿流量扶持！[99:00.03]业务联系：yunmusic_2013@163.com", 59 }, 60 ], 61 }, 62 // 点击效果 63 click: { 64 enable: true, 65 auto: false, 66 colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'], 67 size: 30, 68 maxCount: 50, 69 }, 70 // 首部进度条 71 topProgress: { 72 enable: true, 73 page: 'all', 74 agent: 'pc', 75 background: '#FFB3CC', 76 height: '5px', 77 }, 78 // github 79 github: { 80 enable: true, 81 color: '#ffb3cc', 82 url: 'https://github.com/', 83 }, 84 // 人物模型 85 live2d: { 86 enable: true, 87 page: 'all', 88 agent: 'pc', 89 model: 'tororo', 90 width: 150, 91 height: 200, 92 position: 'left', 93 gap: 'default', 94 }, 95 // 按钮工具 96 tools: { 97 enable: true, 98 initialOpen: true, 99 }, 100 // 自定义链接 101 links:[ 102 { 103 name:'MY-BLOG', 104 link:'https://lp-imagine.github.io/' 105 }, 106 { 107 name:'VUE3', 108 link:'https://vue3js.cn/docs/zh/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88' 109 } 110 ] 111 }) 112 </script>
页首：
1 <div id="loading"> 2 <div id="load"> 3 <div>I</div> 4 <div>M</div> 5 <div>A</div> 6 <div>G</div> 7 <div>I</div> 8 <div>N</div> 9 <div>E</div> 10 </div> 11 </div>
