前端特效-HTML+CSS - 4种图标hover动画

最新推荐文章于 2024-06-07 16:01:04 发布

khan97z

最新推荐文章于 2024-06-07 16:01:04 发布

阅读量683

点赞数 1

分类专栏：前端特效文章标签：前端特效 HTML+CSS

本文链接：https://blog.csdn.net/SunKKkKK/article/details/89763287

版权

前端特效专栏收录该内容

8 篇文章 1 订阅

订阅专栏

实现的效果

4种图标hover动画

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)
    }
}

khan97z

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端特效-HTML+CSS - 4种图标hover动画

实现的效果html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
复制链接

扫一扫

专栏目录