flash鼠标经过代码

发布时间:2017-05-26 16:26

现在就教一个简单的flash鼠标代,主要的原理是当经过图标或触发其伪元素时,利用css的transitions和animations属性,来实现的一些互动动画效果。怎么做的呢?为此小编为大家整理推荐了,希望大家喜欢。

flash鼠标经过代码

flash鼠标经过代码

构建HTML基本结构

在本示例当中用到的HTML结构极其简单,在一个大的div容器中放了几个描文本,通过css的样式控制就可以制作出多种效果出来,如下:

Mobile Desktop Partners Support Security

简单的动画效果示例

这只是本文章中的其中一个示例(6),主要的效果是旋转动画。

.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px rgba(255,255,255,1); transition: background 0.2s, color 0.2s; }

.no-touch .hi-icon-effect-6 .hi-icon:hover { background: rgba(255,255,255,1); color: #64bb5d;}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: spinAround 2s linear infinite;}

@keyframes spinAround { from { transform: rotate(0deg) } to { transform: rotate(360deg); }}

上面的代码,只要你熟悉transitions和animations这两个标签,那就很容易理解。当鼠标经过.hi-icon-effect-6 .hi-icon时背景变成白色rgba(255,255,255,1),然后附带动画旋转transform: rotate()360度。其他的示例,大家可以下载附件,好好的看看其中的代码。

代码下载:http://www.webjx.com/files/soft/1_130710104925.zip

其实css3的动画效果就是这么简单,只需要给他相对应的属性值以及变换规则。接下来好好的欣赏这组简单的鼠标经过时动画效果吧。希望可以给你们带来启示。

flash鼠标经过代码的评论条评论