CSS:hover效果代码

最新推荐文章于 2024-04-03 04:43:28 发布

Coolstuz

最新推荐文章于 2024-04-03 04:43:28 发布

阅读量349

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_47900759/article/details/123303401

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

视频来源：CSS 让人惊艳的hover效果！_哔哩哔哩_bilibili

转载自： https://youtu.be/a7PHhF5Vw5whttps://youtu.be/a7PHhF5Vw5w

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: #0a3d62;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    a{
        margin: 0 20px;
        width: 80px;
        height:  80px;
        background-color: #ccc;
        display: inline-block;
        border-radius: 24px;
        box-shadow: 6px 6px 12px rgba(0, 0, 0, 15),
        -6px -6px 12px rgba(255, 255, 255, .1);
        overflow: hidden;
        font-size: 28px;
        transition: .3s linear;
        position: relative;
    }
    a:hover{
        transform: scale(1.3);
        border-radius: 50%;
    }
    a i::before{
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        background-size: 200% 200%;
        background-position: 75% 75%;
        top: 0;
        left: 0;
        line-height: 80px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: background .5s linear;
    }
    a:hover i::before{
        background-position: 0% 0%;
    }
    .fa-facebook-f::before{
        background-image: linear-gradient(135deg,#3b5998 30%,#0a3d62 50%);
    }
    .fa-twitter::before{
        background-image: linear-gradient(135deg,#1da1f2 30%,#0a3d62 50%);
    }
    .fa-instagram::before{
        background-image: linear-gradient(135deg,#c32aa3 30%,#0a3d62 50%);
    }
    .fa-youtube::before{
        background-image: linear-gradient(135deg,#d71e18 30%,#0a3d62 50%);
    }
    
</style>
<body>
    <div class="sm">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
        
    </div>
</body>
</html>

第一次看到这个视频有被花里胡哨的效果惊艳到，值得学习参考，在此将代码贴上。

Coolstuz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS:hover效果代码

视频来源：CSS 让人惊艳的hover效果！_哔哩哔哩_bilibili转载自： https://youtu.be/a7PHhF5Vw5whttps://youtu.be/a7PHhF5Vw5w<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt.
复制链接

扫一扫