有时候想要让鼠标移入图标的时候,
当前图标能有所变化,
但是直接切换背景色的话就显得有点呆板,
所以我在无聊是写了一个很简单的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>
哦啦~~~~~
无聊时乱写的,请大家不喜勿喷哦! ^-^