美好的一天!我正在尝试使用Font Awesome 5做一个固定的浮动动作按钮,当用户单击大按钮时,它将把Font Awesome转换或转换为另一个Font Awesome徽标。
这是https://jsfiddle.net/4eLq3dj0/的小提琴,它具有我到目前为止已经尝试过的方法。我还希望它围绕底部旋转,所以我使用了另一个线程。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body>
<div class="button">
<div class="icons">
<button href="#" class="floating-btn">
<i class="fas fa-plus icon-default "></i>
<i class="fas fa-times icon-hover"></i>
</button>
</div>
</div>
</body>
</html>
CSS
.floating-btn{
width: 80px;
height: 80px;
background: #f5af09;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 50%;
color: #ffffff;
font-size: 40px;
box-shadow: 2px 2px 5px (0,0.25);
position: fixed;
right: 20px;
bottom: 20px;
transition: background 0.25s;
outline: blue;
border: none;
cursor: pointer;
}
.button .icons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 2.3rem 0 0;
width: 1.25rem;
height: 2.6rem;
}
.button .icons i {
position: absolute;
top: 5;
left: 5;
display: block;
}
.floating-btn:active{
background:#007D63;
}
.button .icons .icon-hover {
transition: opacity 0.3s,transform 0.3s;
transform: rotate(-180deg) scale(0.5);
opacity: 0;
}
.button:active {
transform: scale(1.2);
box-shadow: 20px 15px rgba(0,0.15);
}
.button:active .icon-hover {
transform: rotate(0deg) scale(1);
opacity: 1;
}
.button:active .icon-default {
transform: rotate(180deg) scale(0.5);
opacity: 0;
}