實現的效果
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4 種不同的圖標hover動畫效果</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="s1">
<a href="javascript:;" class="iconbtn fas fa-laptop"></a>
<a href="javascript:;" class="iconbtn fas fa-mobile-alt"></a>
<a href="javascript:;" class="iconbtn fas fa-cog"></a>
<a href="javascript:;" class="iconbtn fas fa-link"></a>
</div>
<div class="s2">
<a href="javascript:;" class="iconbtn fas fa-laptop"></a>
<a href="javascript:;" class="iconbtn fas fa-mobile-alt"></a>
<a href="javascript:;" class="iconbtn fas fa-cog"></a>
<a href="javascript:;" class="iconbtn fas fa-link"></a>
</div>
<div class="s3">
<a href="javascript:;" class="iconbtn fas fa-laptop"></a>
<a href="javascript:;" class="iconbtn fas fa-mobile-alt"></a>
<a href="javascript:;" class="iconbtn fas fa-cog"></a>
<a href="javascript:;" class="iconbtn fas fa-link"></a>
</div>
<div class="s4">
<a href="javascript:;" class="iconbtn fas fa-laptop"></a>
<a href="javascript:;" class="iconbtn fas fa-mobile-alt"></a>
<a href="javascript:;" class="iconbtn fas fa-cog"></a>
<a href="javascript:;" class="iconbtn fas fa-link"></a>
</div>
</body>
</html>
css部分
body {
padding: 0;
margin: 0;
}
div {
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
}
.s1 {
background: #2980b9;
}
.s2 {
background: #9b59b6;
}
.s3 {
background: #f1c40f;
}
.s4 {
background: #e74c3c;
}
.iconbtn {
width: 80px;
height: 80px;
text-decoration: none;
margin: 20px;
position: relative;
font-size: 30px;
border-radius: 50%;
}
.iconbtn::before {
/* content: ""; */
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.iconbtn::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
box-sizing: border-box;
border-radius: 50%;
z-index: 0;
}
.s1 .iconbtn,.s2 .iconbtn {
color: #fff;
}
.s1 .iconbtn::after {
border: 4px dashed;
}
.s1 .iconbtn:hover::after {
animation: ro 7s linear infinite;
}
.s2 .iconbtn {
border: 4px solid
}
.s2 .iconbtn:hover {
animation: ro 2s linear infinite;
}
.s3 .iconbtn {
border: 4px solid #fff;
color: #1abc9c;
}
.s3 .iconbtn::after {
background: #fff;
transition: 0.2s;
}
.s3 .iconbtn:hover::after {
transform: scale(0.9);
}
.s4 .iconbtn{
border: 4px solid #fff;
color: #ff7675;
}
.s4 .iconbtn::after {
background: #fff;
transition: 0.4s;
}
.s4 .iconbtn:hover::after {
transform: scale(1.3);
opacity: 0;
}
.s4 .iconbtn:hover {
color: #fff;
}
@keyframes ro {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}