html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画

使用animate动画库添加鼠标经过动画

蓝叶网站设计 2016-11-27 11679 4评论

animate是一个css3动画库，使用它简单几步就能很轻松的为网站增加各种动画效果；今天蓝叶讲的是如何使用animate动画库添加鼠标经过动画，首先需要站长下载animate动画库文件，通过FTP上传到网站主机里，然后在页面模版上引用，演示可以用鼠标悬停在本站的LOGO上面看效果。

在模版文件头部添加animate.min.css的调用。

或者也可以直接使用七牛静态库的地址。

然后在css文件里写上鼠标经过的样式，举个例子，比如.logo是你的logo层样式名，代码如下，swing为动画库动画的名称：

.logo:hover{-webkit-animation-name:swing;animation-name:swing;}

最后在需要的地方调用，例如在样式名为.logo的层上面设置鼠标经过效果，要记住加上animated样式名，示例代码如下：

评论一下

赞助蓝叶

赞助蓝叶X

版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《蓝叶博客》。

本文网址：https://lanyes.org/web/animate.html

html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画相关推荐

react-native系列(13)动画篇：Animated动画库和LayoutAnimation布局动画详解
动画概念了解流畅.有意义的动画对于APP户体验来说是非常重要的,用RN开发实现动画有三种方法: requestAnimationFrame:称为帧动画,原理是通过同步浏览器的刷新频率不断重新渲染界面 ...
#前端开发# 【一】之Animate动画库的安装及详细用法
#前端开发# 之Animate动画库的安装及详细用法在前端的开发过程中,我们免不了需要动画来实现更多酷炫效果, 下面主要是介绍Animate这款强大的动画库,以及其安装及使用相信大家也已经了解过A ...
php magic模版插件,magic-带64种动画效果的CSS3动画库
magic.css是一款带64种动画效果的CSS3动画库.magic.css中的动画分为12大类,全部使用CSS3 animation动画来完成.各种效果使用非常简单,只需要为元素添加和移除相应的cl ...
Winform中怎样设置ContextMenuStrip右键菜单的选项ToolStripMenuItem添加照片
场景怎样在Winform程序中添加鼠标右键时使子选项显示图片. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编 ...
android动画帧率_Android动画进阶—使用开源动画库nineoldandroids
前言 Android系统支持原生动画,这为应用开发者开发绚丽的界面提供了极大的方便,有时候动画是很必要的,当你想做一个滑动的特效的时候,如果苦思冥想都搞不定,那么你可以考虑下动画,说不定动画轻易就搞定 ...
Vue（动画、过渡、动画库）
一.动画 1.使用场景在插入.更新或者移除DOM元素时候,在合适的时候给元素添加样式类型. 2. 使用首先在组件style创建出现和离开的动画然后对动画进行处理(命名注意是v-enter-act ...
动画延迟以及Animista动画库
怎么设置animate的动画延迟在里面加入animate_delay-1s即可这里的1s根据自己的需求进行改变推荐一个动画库Animista 这个库的地址是: Animista - CSS An ...
安装使用Animate动画库【Animate.css下载安装教程】
Animate.css官网地址 1.npm安装Animate.css npm install animate.css --save 2.在入口文件main.js中导入 // 导入动画库 import ...
React Native 炫酷的动画库实现任何AE动画 lottie-react-native
lottie-react-native 传送门 1.npm i --save lottie-react-native 2.react-native link lottie-ios 3.react-na ...

html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画

html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画相关推荐

最新文章

热门文章