I
M
A
G
I
N
E

博客皮肤配置

页面定制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>

 

posted @ 2021-01-06 14:01  Imagine、  阅读(78)  评论(0编辑  收藏  举报