代码
<div className='kuang'></div>
css代码
.kuang {
height: 500px;
width: 400px;
// background-color: #fff;
position: absolute;
z-index: 10;
bottom: 0;
transform: translateX(-390px)
}
.kuang:hover {
animation: myanimation 3s linear 1;
animation-fill-mode:forwards;
background-color: #fff;
}
@keyframes myanimation {
0%{
transform: translateX(-400px);
}
100%{
transform:translateX(0);
}
}
实现效果
文章来源地址https://www.toymoban.com/news/detail-620362.html文章来源:https://www.toymoban.com/news/detail-620362.html
到了这里,关于css实现鼠标滑动左下角弹框带动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!