純div+css優雅友鏈樣式

正文

偷了別人的一個友鏈樣式，感覺挺不錯的，分享一下。

因為使用的環境不一樣，做了一些改動。我是直接拿出一個頁面作為分享鏈接頁面，寫在markdown文檔中即可生效。使用的時候可能不同的主題顯示略微差別，自己修改下就好了。

<div class="page-friends page-common">
<div class="link-title wow rollIn animated" style="visibility: visible; animation-name: rollIn;">博客友鏈</div>
<ul class="readers-list clearfix">

<li class="wow slideInUp animated" style="visibility: visible; animation-name: slideInUp;"><a rel="colleague" title="創造獅，一個創意工作者的導航" target="_blank" href="https://liujunzhou.top/"><div>Junzhou Liu</div><div>Happy Coding , Happy Life</div></a></li>

</ul>

<div class="link-title wow rollIn animated" style="visibility: visible; animation-name: rollIn;">學習教程</div>
<ul class="readers-list clearfix">

<li class="wow slideInUp animated" style="visibility: visible; animation-name: slideInUp;"><a rel="" title="學的不僅是技術，更是夢想" target="_blank" href="http://www.runoob.com/"><div>菜鳥教程</div><div>學的不僅是技術，更是夢想</div></a></li>

<li class="wow slideInUp animated" style="visibility: visible; animation-name: slideInUp;"><a rel="" title="經典模塊化前端框架" target="_blank" href="http://www.layui.com/"><div>Layui</div><div>經典模塊化前端框架</div></a></li>

<li class="wow slideInUp animated" style="visibility: visible; animation-name: slideInUp;"><a rel="" title="在線學習教程" target="_blank" href="http://www.w3school.com.cn/"><div>w3school</div><div>在線學習教程</div></a></li>

<li class="wow slideInUp animated" style="visibility: visible; animation-name: slideInUp;"><a rel="" title="有編程實戰訓練" target="_blank" href="https://www.w3cschool.cn/"><div>w3cschool</div><div>有編程實戰訓練</div></a></li>

</ul>

</div>

<style>
    .clearfix {zoom:1;}
    .clearfix:after {content:'.';display:block;visibility:hidden;height:0;clear:both;}
    .readers-list {list-style:none;}
    .readers-list *{margin:0;padding:0;}
    .readers-list li{position:relative;float:left;margin-top:20px!important;padding:0 10px;}
    .readers-list li a{display:block;border:1px solid #eee;border-left: 3px solid #FF002B;border-radius:7px;padding-left:15px;transition:all .3s;color: white;}
    .readers-list li:nth-of-type(6n+1) a{border-left-color:#FF002B;}
    .readers-list li:nth-of-type(6n+2) a{border-left-color:#FFA900;}
    .readers-list li:nth-of-type(6n+3) a{border-left-color:#00CC00;}
    .readers-list li:nth-of-type(6n+4) a{border-left-color:#00CCFF;}
    .readers-list li:nth-of-type(6n+5) a{border-left-color:#0089FA;}
    .readers-list li:nth-of-type(6n+6) a{border-left-color:#404040;}
    .readers-list li a div{padding:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#999;}
    .readers-list li a div:first-child{border-bottom:1px dashed #eee;font-size:1.3em;color:#666;}
    .readers-list li a:hover {
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	box-shadow: 0 26px 40px -24px rgba(0,0,0,0.3);
}
    .link-title {
	position: relative;
	left: -19px;
	display: inline-block;
	margin: 20px 0;
	font-size: 15px;
	padding: 0 30px 0 25px;
	height: 45px;
	line-height: 45px;
	border-radius: 0 35px 35px 0;
	background: #404040;
	color: #fff;
    }
    @media(min-width:768px){
        .readers-list li{width:50%;}
    }
    @media(max-width:767px){
        .readers-list li{width:100%;}
    }

    .page-common ul li, .page-common ol li {
        margin-bottom: 12px;
    }
    .page-friends ul {
        padding: 0;
        margin: 0;
    }
</style>

添加完之后就是這個效果，點擊我查看

參考鏈接

友情鏈接參考頁面

原文鏈接

https://srcrs.top 是我的個人博客,原文鏈接：https://srcrs.top/posts/202007161.html