自适应css淡入悬停按钮效果可做网址导航和友链使用

admin

一款非常不错的自适应浏览器宽度css淡入悬停按钮效果,css特效,css按钮特效,css按钮,可做网址导航和友链使用...本站友情链接页面就是用的这个样式进行简单修改

.sibling-fade { visibility: hidden; }
.sibling-fade > * { visibility: visible; }
.sibling-fade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
.sibling-fade:hover > * { opacity: 0.4; transform: scale(0.9); }
.sibling-fade > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
html { display: flex; height: 100%; }
body { 
  background: #f05555;
  padding: 10px;
  margin: auto;
}
.sibling-fade {
  display: flex;
  flex-wrap: wrap;
}
.sibling-fade > * {
  background: white;
  padding: 1em;
  flex: auto;
  margin: 0.3em;
  text-align: center;
  color: #f05555;
  font-size: 1.5em;
  text-decoration: none;
}

HTML代码

<div class="sibling-fade">
  <a href="/" target="_blank">建华兄个人博客</a>
  <a href="/" target="_blank">建华兄</a>
  <a href="/" target="_blank">杨青博客</a>
  <a href="/" target="_blank">卢松松博客</a>
  <a href="/" target="_blank">天涯社区</a>
  <a href="/" target="_blank">腾讯</a>
  <a href="/" target="_blank">建华兄</a>
  <a href="/" target="_blank">杨青博客</a>
  <a href="/" target="_blank">卢松松博客</a>
  <a href="/" target="_blank">天涯社区</a>
  <a href="/" target="_blank">腾讯</a>
  <a href="/" target="_blank">建华兄</a>
  <a href="/" target="_blank">杨青博客</a>
  <a href="/" target="_blank">卢松松博客</a>
  <a href="/" target="_blank">天涯社区</a>
  <a href="/" target="_blank">腾讯</a>
  <a href="/" target="_blank">建华兄</a>
  <a href="/" target="_blank">杨青博客</a>
  <a href="/" target="_blank">卢松松博客</a>
  <a href="/" target="_blank">天涯社区</a>
  <a href="/" target="_blank">腾讯</a>
</div>

版权协议须知!

本篇文章来源于 建华兄个人博客 ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

753 0 2019-04-27

微语程序"个人信息显示插件"

这款插件个人感觉也十分的辣鸡,胜在娱乐一下也好。前端css...

阅读全文
Veno File Manager v3.5.4 - PHP在线存储&分享源码

源码简介早期发布之后,然后看到汉化版,起名为极简网盘,好像...

阅读全文
esoTalk 中文优化版

esoTalk 可能大家不太熟悉,但她的下一代 Flaru...

阅读全文
剑鱼论坛(JianYuLunTan)开源轻论坛 v1.4.0

剑鱼论坛系统是一款轻论坛系统,由鲶鱼CMS官方开发并发布,...

阅读全文
选择表情
  • 默认
  • 护眼
  • 夜晚
  • Serif
  • Sans