鼠标每经过一个圆圈，圆圈都会放大和变颜色。
主要利用了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>
湘公网安备 43102202000103号
