CSS是前端开发中非常重要的技能之一，它不仅可以美化网页，还可以让网页更加交互性和可视化。今天我们来学习一下如何用CSS仿微信弹出。

首先，我们需要创建一个弹出框。我们可以使用一个div元素并将其设置为固定定位，然后隐藏起来。

.pop-up {
position: fixed;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display: none;
}

接下来，我们需要添加一个按钮，使弹出框出现。我们可以使用CSS动画使它平稳地弹出。

.btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #4ad;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3);
color: #fff;
font-size: 30px;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 999;
animation: pop-up .5s ease;
}
@keyframes pop-up {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}

最后，我们需要用JavaScript添加按钮的点击事件，使弹出框出现或消失。

var btn = document.querySelector('.btn');
var popUp = document.querySelector('.pop-up');
btn.addEventListener('click', function() {
popUp.style.display = 'block';
setTimeout(function() {
popUp.style.bottom = '20px';
}, 10);
});
popUp.addEventListener('click', function() {
popUp.style.bottom = '-20px';
setTimeout(function() {
popUp.style.display = 'none';
}, 500);
});

完成了以上步骤，我们就成功地用CSS仿微信弹出了。这样的效果不仅可以增加网页的交互性，还可以让用户更加舒适和方便地使用网站。