奇乐网 - 草根博客网站

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

admin 165 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

一款非常不错的自适应浏览器宽度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>

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)

选择表情