如果在butterfly中使用的话,需要创建一个css文件,并在butterfly主题引入,引用方法我在butterfly主题的相关修改文章已经写过。
css样式部分:
注意,下面样式只适配了butterfly主题
.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主体部分:
(只需要在source\friends路径下的md文件引入html部分)
<ul class="readers-list clearfix">
<li class="wow slideInUp animated">
<a rel="friend" target="_blank" href="https://blog.ahzoo.cn">
<div>测试友链名称</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样式:
.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);
}
作者: 十玖八柒
链接: https://blog.ahzoo.cn/p/b2210242/
来源: 轻筏
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。