这篇文章主要为大家详细介绍了vue实现鼠标经过动画的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现鼠标经过动画的具体代码，供大家参考，具体内容如下
详细代码：
<div class="hello"> <h1>{{ msg }}</h1><div class="box"> <div class="boxchilde"> <div></div></div></div></div><!-- Add "scoped" attribute to limit CSS to this component only --> .box{ width: 100%; height: 100%; } .boxchilde{ display: inline-block; margin: 20px; width: 200px; height: 400px; background-color: #ccc; border-radius: 5px; -webkit-transition: all 0.6s ease-in; -moz-transition: all 0.6s ease-in; -ms-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; overflow: hidden; } .boxchilde:hover{ cursor: pointer; -webkit-transform: translate(0,-10px); -mo<i>本文来源gaodai$ma#com搞$$代**码网</i>z-transform: translate(0,-10px); -ms-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px); } .passing { width: 100%; height: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: red; animation: passing_4500 0.8s ease-in-out 0s 1 alternate forwards; transform-origin: 50% 50%; } @keyframes passing_4500 { 0% { transform:translateX(-100%); opacity:0 } 33.33333% { transform:translateX(-100%); opacity:0 } 66.66667% { transform:translateX(0%); opacity:1 } 100% { transform:translateX(0%); opacity:1 } }
更多关于Vue的精彩专题点击下方查看：
Vue.js组件学习教程
Vue.js实战教程
Vue.js前端组件学习教程
以上就是vue实现鼠标经过动画的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现鼠标经过动画
转载请注明原文链接：vue实现鼠标经过动画
