photoshop制作星星闪烁动画

这里主要记录动画的部分哦,下载笔刷和新建画布的部分就不说了。

前段时间想在自己的页面里做一个星星闪烁的动画,网上找了一下, 有很多类似的教程,很多讲得非常详细,我这里记录一下自己制作过程遇到的问题和一些关键点。

1.下载星星笔刷,新建一个300×300的画布,拉了一个黑白的渐变做背景色并且画上星星。

新建画布

新建画布

2.打开动画面板,并且保证动画面板处于帧动画模式。

打开动画面板

打开动画面板

3.新建一个帧,把星星的透明度调成40%,当然这个值可以根据自己的需要调整。

新建帧

新建帧

4.当点击播放的时候,基本的动画已经有了,但是这个动画是没有过渡的,接下来要创建过渡。注意设置的值,要添加的帧的值根据需要修改,数字越大,动画的速度越慢

创建过渡

创建过渡

5.选中最后的一帧,再按一下动画过渡帧按钮,设置过渡为第一帧。动画就可以从头到尾平缓地过渡了。动画做好后ctrl+shift+alt+s储存为web所用格式,选gif格式。

最后一个过渡

最后一个过渡

6.效果图:

star

star

 

做星星闪烁的效果需要注意一点,因为图像保存为GIF格式,质量会下降,有时甚至到了没法用的地步。例如,如果一个透明背景的PNG格式图片或是一个透明背景的图层用来修改透明度实现动画,导出的gif图片上的星星会像素化,变成颗粒状,非常不自然。所以建议制作时做一个完整的带背景的图片。

像素化

像素化

jquery实现的mouseover效果

虽然CSS很容易实现a标签以及其他标签的mouseover效果,用:hover这个伪类就可以,但是工作当中发现还是有不方便之处,先不说IE6不支持除了a标签的伪类,如果一个网站很多个页面,并且每个页面上有很多个按钮需要mouseover的效果,那么需要写很多次css。

后来朋友给写了一个jquery插件,直接调用就可以实现mouseover,可用在html各种标签上。

插件代码:

(function($){
    $.fn.overButton = function() {
        return this.each(function(){
            var over_height = $(this).height();
            var over_img =  $(this).css('background-image') != 'none'?$(this).css('background-image')+' no-repeat':'url('+$(this).attr('over-img')+') no-repeat'
            $(this).css({
                height:over_height,
                background:over_img
            }).hover(function(){
                $(this).css({
                    backgroundPosition:'0 -' + over_height + 'px'
                });
            },function(){
                $(this).css({
                    backgroundPosition:'0 0'
                });
            });
        });
    }
})(jQuery);

只要给需要效果的元素上加一个 class=”hover”, 调用方法:

$(function(){
	$(".hover").overButton();
})