css样式部分:
引入css样式部分:
(下面样式已适配了butterfly主题)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| .readers-list { list-style: none; width: 100%; }
.readers-list li:nth-of-type(2n + 1) a { border-left-color: #ff002b; }
.readers-list li:nth-of-type(2n + 2) a { border-left-color: #ffa900; }
.readers-list li a div { padding: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; }
.readers-list li a div:first-child { border-bottom: 1px dashed #eee; font-size: 1em; color: var(--font-color); }
.readers-list li a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--card-hover-box-shadow); }
a { text-decoration: none !important; }
.readers-list li { font-size: 14px; width: 28%; }
.readers-list li { position: relative !important; float: left; margin-top: 20px !important; padding: 0 10px; }
.readers-list li a { display: block !important; border-left: 3px solid #ff002b; border-radius: 7px; padding-left: 12px; transition: all 0.3s; background-color: var(--card-bg); box-shadow: var(--card-box-shadow); }
|
html主体部分:
(butterfly只需要在source\friends
路径下的md文件引入html部分)
1 2 3 4 5 6 7 8 9 10 11
| <ul class="readers-list clearfix"> <li class="wow slideInUp animated"> <a rel="friend" target="_blank" href="https://blog.ahzoo.cn"> <div>ahzoo</div> <div>测试友链简介</div></a> </li> <li class="wow slideInUp animated"><a rel="friend" target="_blank" href="https://ahzoo.cn"> <div>十玖八柒</div> <div>内容</div></a> </li> </ul>
|

如果想要达到下面图片中的新拟态样式,需要引入下面的css样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| .readers-list { list-style: none; width: 100%; }
.readers-list li:nth-of-type(2n + 1) a { border-left-color: #ff002b; }
.readers-list li:nth-of-type(2n + 2) a { border-left-color: #ffa900; }
.readers-list li a div { padding: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; }
.readers-list li a div:first-child { border-bottom: 1px dashed #eee; font-size: 1em; color: var(--font-color); }
.readers-list li a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); }
a { text-decoration: none !important; }
.readers-list li { font-size: 14px; width: 28%; }
.readers-list li { position: relative !important; float: left; margin-top: 20px !important; padding: 0 10px; }
.readers-list li a { display: block !important; border-left: 3px solid #ff002b; border-radius: 7px; padding-left: 12px; transition: all 0.3s; background-color: white; box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.1), -9px -9px 15px rgba(255, 255, 255, 1); }
|
