CSS3中有许多特殊的效果,其中一个很有趣的效果就是鼠标移上去弹跳的效果。.box { position: relative; width: 200px; height: 200px; backgro
CSS3中有许多特殊的效果,其中一个很有趣的效果就是鼠标移上去弹跳的效果。
.box { position: relative; width: 200px; height: 200px; background-color: #000; border-radius: 50%; transition: all 0.5s ease; } .box:hover { transform: translate(0, -50px); animation: bounce 0.5s linear; } @keyframes bounce { 0% { transform: translate(0, -50px); } 50% { transform: translate(0, -75px); } 100% { transform: translate(0, -50px); } }
在这个例子中,我们创建了一个圆形的div,并给它加上了黑色背景和圆形的边框。当鼠标移动到这个div上面时,我们会让它向上移动50px,并且添加一个动画效果模拟弹跳的感觉。
我们使用了transition属性来实现鼠标移上去平滑过渡的效果,在:hover伪类中添加了一个translate属性,使div向上移动50px。
为了实现弹跳的动画效果,我们使用了CSS3的@keyframes关键字来建立一个动画,分别设置了起始、中间和结束位置。我们在:hover伪类中使用了animation属性,将bounce动画应用到这个div上。
通过这样的方式,我们可以轻松地实现一个鼠标移上去弹跳的效果,增加网页的互动性和趣味性。
粉丝
0
关注
0
收藏
0