純div+css優雅友鏈樣式
阿新 • • 發佈:2020-07-16
正文
偷了別人的一個友鏈樣式,感覺挺不錯的,分享一下。
因為使用的環境不一樣,做了一些改動。我是直接拿出一個頁面作為分享連結頁面,寫在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