一天一代码之CSS3动画scale

最新推荐文章于 2024-08-13 11:46:19 发布

Now_Sprouting

最新推荐文章于 2024-08-13 11:46:19 发布

阅读量217

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Now_Sprouting/article/details/105103383

版权

CSSx新增的scale属性可以做出不错的动态按钮效果图如下
在这里插入图片描述
源代码如下

ul {
            margin: 200px auto;
            list-style: none;
        }
        
        ul li {
            float: left;
            margin-right: 20px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            text-align: center;
            background-color: #FF577B;
            color: #FFDB47;
        }
        
        ul li:hover {
            transform: scale(1.5);
        }