vue中使用hover.css动画
介绍：一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用于您自己的元素、修改或仅用于灵感。在 CSS、Sass 和 LESS 中可用。
1.下载hover.css npm i hover.css --save 2. 全局映入css import 'hover.css' 3.使用类，加上类名 button hvr-bounce-to-left <div class="an button hvr-bounce-to-left"> 天天向上，好好学习 </div> .an { height: 100px; width: 200px; background-color: blueviolet; border-radius: 10px; float: left; margin: 10px; vertical-align: middle; } 4.拿到想要的样式类名 通过f12查看div上面的class类名 点击下面链接地址hover.css 链接地址
总结：以上四步就可以实现hover.css动画的基本使用。
页面所有代码 <template> <!-- http://ianlunn.github.io/Hover/ hover css动画网址 --> //图层左弹出 <div class="an button hvr-bounce-to-left"> 天天向上，好好学习 </div> //图层右弹出 <div class="an button hvr-sweep-to-right"> 天天向上，好好学习 </div> <div class="an button hvr-grow">天天向上，好好学习</div> </template> <script lang="ts"> import { defineComponent } from "vue"; import "hover.css"; export default defineComponent({ setup() {}, }); </script> <style scoped> .an { height: 100px; width: 200px; background-color: blueviolet; border-radius: 10px; float: left; margin: 10px; vertical-align: middle; } </style>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |