HTML——鼠标经过圆圈放大特效

最新推荐文章于 2023-12-01 12:58:10 发布

周百万.

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量1.2k

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/m0_45142186/article/details/123295524

版权

鼠标每经过一个圆圈，圆圈都会放大和变颜色。

主要利用了transform:rotate();——2D转换放大

和transition ——过渡

再加上：hover鼠标接触转换这几个

具体代码如下：

<style>
    ul {
        width: 500px;
        height: 50px;
        margin: 100px auto;
    }
    
    ul li {
        float: left;
        margin: 10px;
        width: 40px;
        height: 40px;
        border: 1px solid greenyellow;
        list-style: none;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        transition: all .5s;
    }
    
    li:hover {
        transform: scale(1.3);
        background-color: skyblue;
    }
</style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>