大家经常看到一些把鼠标移到图标上,然后图标动态变换成新的图标的效果,这里就是用到HTML(CSS)的<scan>功能。
这里给大家一个示例:
css:
.share-button{
width: 100px;
height: 40px;
background-color: #fff;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
/* 溢出隐藏 */
overflow: hidden;
/* 加个动画过渡 */
transition: 0.3s linear;
}
.share-button:hover{
/* 放大1.1倍 */
transform: scale(1.1);
}
.share-button span{
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
color: #fff;
font-size: 15px;
text-align: center;
line-height: 40px;
border-radius: 20px;
z-index: 1;
/* 动画过渡 */
transition: 0.6s linear;
}
.share-button:hover span{
/* 沿X轴移动 */
transform: translateX(-100%);
/* 动画延迟 */
transition-delay: 0.3s;
}
.share-button a{
flex: 1;
font-size: 10px;
color: #333;
text-align: center;
transform: translateX(-100%);
/* 不透明度 */
opacity: 0;
transition: 0.3s linear;
}
.share-button:hover a{
opacity: 1;
transform: translateX(0);
}
/* 接下来为每一个a元素(图标)分别设置动画延迟 */
/* :nth-of-type(n)选择器是匹配属于父元素的特定类型的第n个子元素的每个元素 */
.share-button a:nth-of-type(1){
transition-delay: 1s;
}
.share-button a:nth-of-type(2){
transition-delay: 0.8s;
}
.share-button a:nth-of-type(3){
transition-delay: 0.6s;
}
.share-button a:nth-of-type(4){
transition-delay: 0.4s;
}
HTML:
<link rel="stylesheet" href="22.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<div class="share-button" controls>
<span><i class="fa fa-share-alt" aria-hidden="true"></i> Kevin</span>
<a href="#"><i class="fa fa-mail-forward" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-music" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-ban" aria-hidden="true"></i></a>
</div>
上面这串代码没有加head等东东,大家只要将这个随意放在<head>或者<body>中都是可以的。
另外,这里用到了fa fa图标,给大家分享一下fa fa 库