css3两种hover动画

1.先定义动画，再调用动画。这类似javascript的函数调用。

1.1/*先命名css动画，此处我随意命名为hover-zoom,*/
@-webkit-keyframes hover-zoom{
50%{
-webkit-transform:scale(0.8);
transform:scale(0.8);
-webkit-filter:brightness(60%)
}
100%{
-webkit-transform:scale(1);
transform:scale(1);
/*css3滤镜亮度百分比*/
-webkit-filter:brightness(100%)
}
}

1.2/*调用CSS3动画,并设置动画参数（名称、持续时间、线性函数、执行次数）*/
.hover-zoom:hover{
-webkit-animation-name:hover-zoom;
animation-name:hover-zoom;
-webkit-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}

2.直接用transform设置动画，用transition定义动画，类似于上面第一种的步骤。

2.1/*原动画对象，注意此处的transition是用于动画结束后有线性还原效果*/
.item{
   padding:20px;
   text-align: center;
   background-color: #f0f0f0;
   margin-bottom: 20px;
   box-shadow: 0px 0px 15px #cdcdcd;
   transition: all 0.5s ease-in-out;
}

2.2/*动画和调用可以写在一起，transition设置动画参数（属性对象、时间、线性）*/
.item:hover{
   -webkit-transform:translateY(-6px);
   transform: translateY(-6px);
   background-color: #fff;
   transition: all 0.5s ease-in-out;
}

小伙伴们可以根据实际情况使用这两种方式，第一种适合大型项目，类似JS函数，先定义全局变量和函数，再按需调用。

css3两种hover动画相关推荐

html hover 效果,8种css3技术的hover动画效果
hover动画,简言之就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画! 1.简单动画 html bigsmall css .ech-big,.ech-small { trans ...
css3两种渐变（gradients）
css3的常用线性渐变和径向渐变两种渐变方式: 线性渐变(Linear Gradients):上下.左右.对角径向渐变(Radial Gradients):内外示例代码: <!DOCTYP ...
css3 两种背景色,CSS3 / 实例改变背景色和位置 - 汇智网
实例实例改变背景色和位置 @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; ...
CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
css卷轴动画小程序,微信小程序动画两种实现方式
开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做: JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例anima ...
html5生日福利页面,福利到！HTML5实现动画两种方式
该楼层疑似违规已被系统折叠隐藏此楼查看此楼正在学习或者自学html5的小伙伴,是不是有的已经让video动画整疯掉了呢?哈哈!下面华清远见的小编就为大家两种实现方式!好好学习哦! (1) canv ...
两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
android旋转动画的两种实现方式
在android开发,我们会常常使用到旋转动画,普通情况下旋转动画有两种实现方式,一种是直接通过java代码去实现,第二种是通过配置文件实现动画.以下是两种动画的基本是用法: 纯Java代码实现: / ...

css3两种hover动画

css3两种hover动画相关推荐

最新文章

热门文章