简单的图标移入效果(css缩放)

最新推荐文章于 2022-05-18 17:11:14 发布

卡布达0311

最新推荐文章于 2022-05-18 17:11:14 发布

阅读量1.5k

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/kabuda0311/article/details/79205448

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有时候想要让鼠标移入图标的时候,

当前图标能有所变化,

但是直接切换背景色的话就显得有点呆板,

所以我在无聊是写了一个很简单的css demo ,

让变化更好看一点,

就像下面这样(类似于腾讯新闻,网易新闻分享按钮)

这样的效果就是通过css 的动画特性实现的, 废话不多说,直接上代码

<!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>hoverCircle</title>
</head>

<body>
    <div id="container">
        <div>
            <i></i>
            <img src="./images/QQ.png" alt="QQ">
        </div>
        <div>
            <i></i>
            <img src="./images/weibo.png" alt="weibo">
        </div>
        <div>
            <i></i>
            <img src="./images/weixin.png" alt="weixin">
        </div>
    </div>
</body>

</html>

<style>
    /* 用 flex 布局*/
    #container {
        margin: 0 auto;
        width: 600px;
        display: flex;
        justify-content: space-around;
        padding-top: 40%;
    }

    #container div {
        background: #ada;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
    }
    /* 图片的背景必须是透明的, 以下代码是为了图片居中 */
    #container div img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

    #container div i {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(179, 235, 168);
        /* i 默认缩小为 0 倍 */
        transform: scale(0);
        /* 动画效果时间设置 */
        transition: all .3s;
    }
    /* 鼠标移入时, i 放大到原始大小 */
    #container div:hover i {
        transform: scale(1)
    }
</style>

哦啦~~~~~

无聊时乱写的,请大家不喜勿喷哦! ^-^

卡布达0311

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的图标移入效果(css缩放)

有时候想要让鼠标移入图标的时候,当前图标能有所变化,但是直接切换背景色的话就显得有点呆板,所以我在无聊是写了一个很简单的css demo ,让变化更好看一点,就像下面这样(类似于腾讯新闻,网易新闻分享按钮)这样的效果就是通过css 的动画特性实现的, 废话不多说,直接上代码 hoverCircle
复制链接

扫一扫