HTML——鼠标经过圆圈放大特效
时间：03-09来源：作者：点击数：
鼠标每经过一个圆圈，圆圈都会放大和变颜色。
主要利用了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>
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:html的代码书写顺序
下一篇:怎样用html写出三角形
湘公网安备 43102202000103号