创新路
我们一直在努力

CSS3鼠标经过动画 transition

    在H5中经常会有一些地方要用到很炫的动画,比如鼠标移动上去慢慢展开,慢慢变大或者飞出,只需要修改css,不需要写js就可以实现。

   

  先看个DIV变大的案例:

<style> 
.ceshi{
width:100px;
height:100px;
background:blue;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}

.ceshi:hover{width:300px;height:300px;}

</style>

<div class='ceshi'></div>

image.png

鼠标放上去:

1559618326752566.png

使用方法:

首先给div定义 css属性:

比如宽度100px:

width:100px;

并添加

transition

-moz-transition    /* Firefox 4 */

-webkit-transition    /* Safari and Chrome */

-o-transition    /* Opera */

再给DIV的hover激活属性 添加目标css值,比如300px

width:300px;

这样就可以实现div过度效果

transition参数说明:

transition: 参数1  参数2   参数3  参数4

参数1: 动画属性

参数2: 持续时间(s)

参数3: 过度方式

参数4: 延时(s)

例如:transition: all 2s ease-in 1s;

动画属性参考:

1.颜色类: background-color,border-color,color,outline-color等css属性;

2.数字类:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position,word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性;

4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;

5、浮点型数值,如:zoom,opacity,font-weight,等属性;

6、transform list:

7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop

8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility

9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow

10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image

11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化

13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

过度方式参考:

ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0).

cubic-bezier:(该值允许你自定义一个时间曲线) 特定的cubic-bezier曲线  (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

参考参数太多,需自己试验下,找到适合自己使用的。

未经允许不得转载:天府数据港官方信息博客 » CSS3鼠标经过动画 transition

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机