前端经验

《Pennant》是一款为美国棒球职业联赛发烧友制作的软件,它可以查看1952年到2010年间的超过115000场比赛数据,这款iPad软件ui设计非常棒,超酷的数据可视化,重新审视数据图表,让你知道数据是有生命的,里面包含了动态的柱图、条图、饼图、气泡图、南丁格尔玫瑰图等生动的数据图表。

image

Pennant 界面


Pennant 视频演示

Z-blog 2.0 已经发布了正式版,为了纪念正式版的发布特别将自己制作使用的主题发布出来,主题简约而清爽!喜欢的朋友可以下载使用!ps:1225更新980px宽度版本,在主题样式里面选择default_980.css即可!

演示地址:<#ZC_BLOG_HOST#>themes/

image

主题首页截图

image

主题文章页截图

image

相关下载地址:

百度网盘  |  新浪微盘  |  来自禄's Blog

基于CSS3的动画越来越火爆,各大网站都开始尝试使用CSS3来达到更炫的用户体验,Google的logo也一次次吸引着大家的眼球,但光鲜的CSS3动画后面,可能是前端攻城师不断修改查看修改查看反复的一个过程,对时间、位置的精确把控,意味着巨大的工作量,于是,iAnimator来了!


简介

动画制作软件一般为本地客户端软件,如Sencha Animator 、EDGE等,功能非常强大,但是生成的代码过于庞大臃肿,并且收费,而iAnimator采用WEB方式来实现可视化的CSS3动画制作,轻巧、快速,可扩展性强

基于iAnimator制作动画,因为可视化,及预置的特效,及众多属性面板,可以大大提高动画制作的精确性,减轻前端开发人员工作量

主界面

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!iAnimator主界面

特色

 1、批量上传图片素材

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 2、丰富的属性面板

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 3、图层、帧的灵活控制

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 4、可视化图层编辑

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 5、丰富的特效库

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 6、快速预览

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 7、快速集成

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

后期的一些想法

1、图层将支持父层、子层,以更灵活的管理图层

2、加入 锁定、可见 快捷按钮

3、属性面板支持 更多的CSS3属性,如box-shadow、text-shadow

4、系统对firefox的支持

5、动画对IE、opera的支持

6、图层帧间的状态更多清晰的展示出来

7、加入事件驱动,如mouseover、click触发动画

8、加入场景,结合事件驱动,在不同场影之间的动画切换,将动画制作更加气势磅礴


另:

代码托管于git上,如果有兴趣的朋友,可以参与进来一起维护,谢谢

https://github.com/kundy/iAnimator

PS:该项目是组内牛人kundy开发的一个工具,已经在Qzone的一些项目中使用,很赞的说,省时省力效果好。

相关文件下载地址:

官方网站:http://ianimator.kundy.net/

目前各种终端显示设备层出不穷,手机、平板、PC等等等等,适应不同设备显示成了很关键的问题,而响应式的 WordPress 主题特点是流式风格和足够灵活,能够适应任何尺寸的显示设备。


它们为人们提供在平板电脑和智能手机以最优雅和适合的方式浏览一个网站。考虑到越来越多的人从各种各样的平板电脑和智能手机连接到互联网,因此这些主题非常受站长的欢迎。这也是我们推出这一系列主题的目的。


响应式设计是指页面可以自动响应用户的设备环境,可自动调整分辨率的功能,今天给大家推荐的就是一个 jQuery 响应式幻灯片插件 - iView

iView 是一个支持显示图片、视频、文字等内容的响应式幻灯片插件,它能够完好的支持触屏操作。此插件中内置了35种变换效果,你还可以对每一张幻灯片设置不同的效果。同时它还提供了3种进度显示方式以提醒用户下一张何时显示。您也可以用它来在位置有限的区域显示多张广告banner。另外,它也提供了丰富的API可让你对其进行控制。总之,iView不会让你失望,推荐下载!

阴影神器filter: drop-shadow

禄小伟
1220
1970年01月01日



/**
 * box-shadow vs filter: drop-shadow
 */
                          
body {
    background: #ddd;
    font: 16px/1 sans-serif;
    }
div {
    margin: 100px;
    width: 200px;
    background: #fff;
    padding: 20px;
    position: relative;
        }
div:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    margin: -10px 0 0;
    border-right: 10px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
        }
.box-shadow {
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        }
.filter-drop-shadow {
    -webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
    -moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
    -ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
    -o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
        }


<div class="box-shadow">
    box-shadow
</div>
<div class="filter-drop-shadow">
    filter: drop-shadow
</div>

网站建设请加QQ:1278846,价格优惠,品质高。

网站静态生成收录好,功能强大,方便优化排名,安全稳定,打开快。


部分作品(原创设计):

<#zc_blog_host#>themes 主题站

http://parking.x-home.com.cn 宜红智能停车场

http://www.heartcos.com 心妆国际

http://www.yksj.cn 双佳石油化工

...

查看更多作品请加QQ交流


营口双佳石油化工有限公司项目

禄小伟
1187
1970年01月01日


一汽四平专用汽车集团网站项目

禄小伟
2057
1970年01月01日

一汽四平专用汽车红色版首页

一汽四平专用汽车蓝色版首页

一汽四平专用汽车蓝色版内容页

一汽四平专用汽车红色版产品列表页


Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4