`
huanyq2008
  • 浏览: 171690 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Flex特效很酷

    博客分类:
  • Flex
阅读更多

1.旋转

效果:http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/
代码:http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

2.画布按钮

http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/

3.鱼眼工具条

效果:http://dev.getoutsmart.com/labs/dock/
代码:http://dev.getoutsmart.com/labs/dock/dockdemo.zip

4.窗口

http://www.returnundefined.com/flexmdi/explorer/

http://window.diaztorres.com/bin-release/test_window.html

5.切换效果

http://blogs.digitalprimates.net/codeSlinger/samples/carousel/CarouselTest.html

6.图片展示

效果:http://flex.diaztorres.com/samples/aladinotest/aladino_test.html
代码:http://www.madeinflex.com/img/entries/2008/01/aladino.zip

7.自定义载入进度条

http://blog.diaztorres.com/2007/05/mipreloader/mipreloaderdemo.html

8.Flex Mac弹出窗口

http://blog.xsive.co.nz/archives/244

9.果冻特效弹出窗口

http://blog.sban.com.cn/2008/04/01/jelly-effect-alert-window.html

10.Alert弹出效果

http://www.cnblogs.com/taobataoma/archive/2008/01/13/1037082.html

11.自定义ToolTip

图片:http://everythingflex.com/flex2/ImageToolTip/Index.html
视频:http://labs.flexcoders.nl/samples/ToolTip/video/002/
弹性:http://labs.flexcoders.nl/samples/ToolTip/spring/001/

12. http://flanture.blogspot.com/2008/05/simple-flex-effects-example.html

13.果冻效果: http://blog.sban.com.cn/2008/04/01/jelly-effect-alert-window.html

14.BOOK:http://www.quietlyscheming.com/blog/components/flexbook/

1:聚光灯效果:

实例:http://www.rphelan.com/flex/SpotlightDemo/SpotlightDemo.html

ambientColor - color to apply to all pixels of the image
angle - angle at which the spotlight is projected (in degrees)
azimuth - angle between the image plane and the spotlight (in degrees)
coneAngle - angle of the spotlight's "opening" (in degrees)
distance - distance from the spotlight to the center point
intensity - intensity of the spotlight
position - x, y, z position of the spotlight
spotColor - color of the spotlight
源文件:http://www.rphelan.com/flex/SpotlightDemo/srcview/index.html

2:放大镜效果:

实例:http://www.rphelan.com/flex/MagnifyDemo/MagnifyDemo.html

center ([0-2048, 0-2048]) - the center coordinates of the magnified area
outerRadius (0-500) - the radius of the magnified part of the image
innerRadius (0-500) - the radius of the fully magnified part of the image
magnification (1-50) - the amount to magnify the image by (e.g. set to 2 for a 2x magnification)
源文件:http://www.rphelan.com/flex/MagnifyDemo/srcview/index.html

3:缩放模糊效果:

实例:http://www.rphelan.com/flex/ZoomBlurDemo/ZoomBlurDemo.html

amount (0 - 0.5) - the amount of blur to apply
center ([0 - 2048, 0 - 2048]) - the focal point of the blur
源文件:http://www.rphelan.com/flex/ZoomBlurDemo/srcview/index.html

4:浮雕效果:

实例:http://www.rphelan.com/flex/SharpenDemo/SharpenDemo.html

amount (0 - 20) - the amount to sharpen the image by
radius (0 - 1) - pixel distance to sample from
源文件:http://www.rphelan.com/flex/SharpenDemo/srcview/index.html

5:水波效果:

实例:http://www.rphelan.com/flex/WaveReflectionDemo/WaveReflectionDemo.html

效果:http://blog.xsive.co.nz/flex_source/mac_popup_2/index.html

源码:http://blog.xsive.co.nz/flex_source/mac_popup_2/srcview/ 

分享到:
评论

相关推荐

    Flex酷特效集合(附源码).rar

    在这个名为"Flex酷特效集合(附源码).rar"的压缩包中,我们很显然可以期待一系列炫酷的Flex特效实现,包括3D旋转、模糊渐变和卷轴翻页等。 3D旋转是Flex中的一种视觉效果,它利用了Flex的强大力量,让元素能够在三维...

    Flex酷特效集合.swf

    flex N 种特效 页面旋转 3D切换 渐变 定位切换......... 只是效果

    flex aladino 图片展示特效

    在本文中,我们将深入探讨如何使用Flex实现一个名为"Aladino"的图片展示特效,这是一种纵向滚动的图片展示效果,具有强烈的视觉吸引力。虽然原作者未能将其转换为横向滚动,但我们可以通过理解Flex布局原理来尝试...

    flex的各种特效总结

    Flex是CSS3中的一个布局模式,全称为"Flexible Box",中文可译为“弹性盒模型”。这个模型设计的初衷是为了让复杂的网页布局在不同尺寸和方向的设备上...希望这个Flex特效总结能为你的Web开发之旅带来新的灵感和技巧。

    flex图片显示 很绚丽的图片显示

    5. 图片特效:Flex还允许开发者利用ActionScript 3.0实现自定义的图片特效,例如淡入淡出、旋转、模糊等。可以利用`BitmapData`类对图片进行像素级别的操作。 6. 案例分析:提到的“PicWatcher”可能是一个图片查看...

    flex 超炫的3d效果+源码

    通过Away3D,你可以创建旋转、缩放、平移等基本3D变换,还可以实现更复杂的3D特效,如阴影、反射、折射和粒子系统。 Flare3D则是一个更加面向设计师的3D框架,它支持导入3D模型(如3DS Max或Maya导出的模型),并...

    flex3D菜单

    Flex是Adobe公司推出的一种基于ActionScript 3.0的开源框架,主要用于构建富互联网应用程序(RIA)。这个"flex3D菜单"项目显然利用...提供的"3dtags.swf"文件很可能是最终的运行结果,通过浏览器的Flash插件即可查看。

    超酷css特效代码集锦

    这个代码集锦很可能包含以上这些特效的实例,通过研究和实践,开发者可以更好地理解和掌握这些技术,提升自己的CSS技能。无论你是初学者还是有经验的开发者,都能从中受益,为网页设计带来更酷炫的视觉体验。

    js和CSS3炫酷图片网格缩放动画特效

    4. **图片网格**:图片网格是一种常见的网页布局方式,通过CSS的`display: grid`或`display: flex`属性可以轻松实现。每个网格项在被点击时触发缩放动画,这需要结合jQuery的事件监听和anime.js的动画函数来完成。 ...

    22HTML5 SVG炫酷垂直Tabs选项卡布局特效效果

    总之,“22HTML5 SVG炫酷垂直Tabs选项卡布局特效效果”是一个很好的学习实例,它涵盖了HTML5的语义化元素、SVG的矢量图形和动画功能,以及CSS3的布局和动画特性。通过理解和实践这种特效,开发者可以提升自己的前端...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    纯CSS3炫酷圆形头像图片过滤特效

    4. **布局网格**:CSS3的`display: grid`或`display: flex`可以帮助创建灵活的网格系统,使得头像图片能以整齐的矩阵形式排列。 5. **响应式设计**:CSS3的媒体查询(media queries)确保了这个特效在不同屏幕尺寸...

    FLEX自定义ToolTips

    在Flex编程中,Tooltip是用户界面中一个...通过以上步骤,我们便能创建出拥有炫酷特效的自定义Tooltip,提高Flex应用的交互性和用户体验。记得在开发过程中,始终关注性能和可维护性,避免过度设计,使代码简洁高效。

    CSS3鼠标Hover按钮动画特效

    本教程将详细解析“CSS3鼠标Hover按钮动画特效”的实现方法,以及如何利用flex布局提升界面的响应性和可读性。 首先,我们来看“CSS3动画效果”。CSS3的动画功能主要由两个关键部分组成:transition(过渡)和...

    超酷图片画廊鼠标滑过图片动画过渡特效

    在这个案例中,图片被组织在一个具有flex布局的容器中,允许图片在不同的屏幕尺寸下自动调整位置和大小,以保持整体的美观和适应性。 当用户将鼠标悬停在图片上时,触发了CSS3的:hover伪类选择器,这个选择器用于...

    炫酷jQuery拼图照片墙图片特效

    至于“照片墙”,通常是指将多张图片以网格形式展示,可以采用CSS的`display: grid`或`display: flex`来实现灵活的布局。在jQuery中,我们可以根据窗口大小改变时触发的`resize`事件来调整照片墙的布局。 在提供的...

    jQuery炫酷鼠标滑过垂直导航菜单的特效源码.zip

    通过CSS,我们可以设置`display`属性为`inline-block`或`flex`,让菜单项排列成垂直列。为了实现炫酷的特效,可以使用jQuery的`.animate()`方法来平滑过渡菜单项的状态,例如改变其大小、位置或透明度。 在压缩包内...

    js和CSS3实现带详情页面的炫酷网格布局特效.zip

    "js和CSS3实现带详情页面的炫酷网格布局特效.zip"是一个压缩包,其中包含了一个使用JavaScript(js)和CSS3技术实现的网格布局系统,具有动态效果和详细的详情页面。下面我们将详细探讨这两个关键技术及其在实现这种...

    js和CSS3实现炫酷图片网格缩放动画特效.zip

    这可以通过CSS的`display: grid`或`display: flex`来实现。网格布局允许我们轻松地调整图片的排列方式,比如行和列的数量,以及它们之间的间距。 **CSS3动画** 接下来,我们为图片元素添加CSS3的动画属性。`...

    CSS3实现炫酷火柴燃烧Loading动画特效源码.zip

    同时,使用`display`属性(如`flex`或`grid`)可以方便地调整元素布局。 7. **响应式设计**:考虑到现代网页需要适应不同设备和屏幕尺寸,这个动画可能还包含了媒体查询(`@media`),以确保在不同分辨率下依然保持...

Global site tag (gtag.js) - Google Analytics