自适应css淡入悬停按钮效果

首页文章页

我不想说话

发布时间：2018-08-19 19:40:50 已阅读：　　

这篇文章是扒过来的

正常情况下的列表是这样的：

当鼠标移入后列表是这样的：

好了，代码如下：

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代码：

<a href="http://www.jianhuax.com/sucai/2018-06-14/119.html" target="_blank">建华兄个人博客</a>

<a href="http://www.jianhuax.com/sucai/2018-06-14/119.html" target="_blank">卢松松博客</a>

<a href="http://www.jianhuax.com/sucai/2018-06-14/119.html" target="_blank">卢松松博客</a>

<a href="http://www.jianhuax.com/sucai/2018-06-14/119.html" target="_blank">卢松松博客</a>

<a href="http://www.jianhuax.com/sucai/2018-06-14/119.html" target="_blank">卢松松博客</a>

</div>

好了就这些了