本文实例为大家分享了某视频剪辑软件实现鼠标经过动画的具体代码，供大家参考，具体内容如下

详细代码：

template div class=' hello ' h1 { { msg } }/h1 div class=' box ' div class=' box child ' @鼠标输入=' flag=true ' @ mouseleave=' flag=false ' div : class=' flag '？传递： ' '/div/div/template script导出默认值{ name : ' hello world '，data () { return { msg: '欢迎使用您的Vue.js App '，flag:false } }}脚本！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅样式作用域盒子{宽度： 100%；高度： 100%;} .box子{ display : inline-block；余量： 20px宽度： 200像素；高度： 400像素；背景色： # CCC边界半径： 5px-WebKit-transit :全0.6s轻松版；-moz-transit :全0.6s轻松版；-ms-transit :所有0.6s轻松输入；-o-transit :所有0.6s轻松进入；过渡：所有0.6s轻松输入；飞越：隐藏；} .框子e :悬停{光标：指针；-web kit-transform : translate(0，-10px)；-moz-transform: translate(0，-10px)；-ms-transform: translate(0，-10px)；-o-transform: translate(0，-10px)；transform: translate(0，-10px)；} .通过{宽度： 100%；高度： 10px边框-左上角-半径： 5px边框-右上角-半径： 5px背景-颜色：红色；动画：传球_ 4500 0.8秒轻松进出0s 1交替向前；转换-原始： 50% 50%;} @关键帧传递_ 4500 { 0% { transform : translate(-100%)；opa city 33600 } 33.33333% { transform : translatex(-100%)；opa city 33600 } 66.66667% { transform : translatex(0%)；opa city 33601 } 100% { transform : translate(0%)；opa city 33601 } }/style更多关于某视频剪辑软件的精彩专题点击下方查看：

Vue.js组件学习教程

Vue.js实战教程

Vue.js前端组件学习教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。