网上下的JS特效,浏览器里显示不出来,如下雨的效果,背景颜色等,IE,Chrome,FF里都不行,请问是怎么回事

JavaScript014

网上下的JS特效,浏览器里显示不出来,如下雨的效果,背景颜色等,IE,Chrome,FF里都不行,请问是怎么回事,第1张

你先把网上有特效的网页的代码全复制过来,然后把代码中只要有包含的文件,如js,css,图片等都下载到本地,然后把代码的路劲都改成本地的,我就不信没有效果

希望能给你帮助

-----君少

<style>

* {

margin:0

padding:0

}

body {

background:black

overflow:hidden

}

.container {

width:20px

height:60px

position:absolute

}

.nav {

height:20px

width:20px

display:block

margin-top:12px

border-radius:10px

background:#33ccff

opacity:0.8

background: url(1.jpg) no-repeat center

background-size: auto 100%

}

</style>

<script>

$(function() {

var w = window.screen.width

var h = window.screen.height

var count = 0

var drop = function() {

this.v = Math.random() * 1 + 0.5

this.left = Math.random() * w

}

drop.prototype = {

constructor: drop,

create: function() {

count++

var $drop = $('<div class="container"><span class="nav"></span></div>')

$drop.appendTo('body')

},

addCss: function() {

$('.container:last').css({

left: this.left + 'px'

})

},

dropEvent: function() {

var time = Math.floor(h / this.v)//下降速度

$('.container:last').animate({

top: h + 'px',

opacity: '1'

}, time)

}

}

function updata() {

if(count >200) {

for(var i = 0i <100i++) {

$('div:first').remove()

}

count = 0

}

}

setInterval(function() {

var Drop = new drop()

Drop.create()

Drop.addCss()

Drop.dropEvent()

updata()

}, 50)

})

</script>

其实夏天过了,冬天近了,为啥不聊下雪,反而还聊下雨呢,嗯,不着急,天气的特效我们慢慢聊。只因为提起那PS怎么玩,都玩什么,除了修图磨皮加字等等,做特效也是它拿手好戏,而且很多时候只要最基本的功能,就可以满足我们脑洞大开的创意,比如本文要聊的“下雨”!

不说则已,一说咱就来两招外加一个大彩蛋,下面是三种方法的效果预览,看图感受下先,么么哒:

是的,你没看错,第三种方法是真的在“下”雨,是动态的,是动画的,而且悄悄剧透给小伙伴们,它还是最简单的,比第二种一键下雨的动作预设大法还要简单。那我们闲言少叙,马上开始“变身老龙王”,让雨下起来喽。

第一步, 如下图操作所示,在PS中将原图打开,新建一个图层,命名为“雨”。

第二步, 如下图所示,将前景色设置成黑色,按键盘快捷键Alt+删除键,将图层雨填充为黑色。

第三步, 对图层雨进行一系列的滤镜操作。选择菜单滤镜>杂色>添加杂色,如下图所示设置杂色参数,点击确定。

选择高斯模糊滤镜,按下图所示设置参数,确定。

接下来,添加动感模糊滤镜,参数如下:

第四步, 添加一个色阶调整图层,如下图设置参数后,将该层做成雨图层的剪贴蒙版。

第五步, 继续添加滤镜操作。选择菜单滤镜>扭曲>波纹滤镜,参数设置如下图:

添加高斯模糊,如下图:

第六步, 选择图层雨,将其混合模式调整为“滤色”,不透明度为60%。此时,正如下图所示,已经完成了下雨特效的绘制。

好了,看到这,可能小伙伴会觉得好烦啊,那么第二个方法就是深受喜爱的“懒人神器”动作预设大法了。

第一步,安装预设。 首先还是先来啰嗦一下PS动作预设的安装方法了,方法很多,比如直接双击预设文件,比如复制粘贴到安装目录下的预设文件夹,地址一般是C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Actions(盘符请根据安装时的安装位置选择,CC 2014仅为阿随君版本号示例,请按实际情况选择),正如下图所示的样纸。很好安装,对不对?如果您要回答不对,可以到留言区写下疑惑的地方哦,阿随君会回复的呢。

第二步,切换英文版。 PS:该动作完美支持英文版PS,中文版可能会遇到运行问题哦。所以阿随君再来啰嗦下中英文切换方法→小伙伴们只需打开自己的PS安装文件夹,按C:\Program Files\Adobe\Adobe Photoshop CC 2014\Locales\zh_CN\Support Files这个地址逐层打开,找到“tw10428.dat”这个文件,把它移除此文件夹,或者是删除,或者是改名字,这样再次打开PS时便是英文版了。(PS:一定要记得备份它,随时复制回来即可恢复中文版了。)

第三步,准备动作。 接下来就是把刚才复制粘贴过的动作预设调入到动作面板,如果没有在PS工作区找到动作面板的,可以通过菜单栏“窗口>动作”调出,或者直接按Alt+F9。然后,如图所示,点击面板上下文面板,选择“Rain Photoshop Action (ArtistMef)”载入到面板。

第四步,播放动作。 以上都是“前戏”,马上进入“高潮”,如图所示的,在选中背景图层的基础上,打开动作预设,点击“播放”即可。在动作运行的过程中,会先后弹出两个对话框,如图所示,两个参数值一个是控制雨水降落的角度,一个是控制雨疏密长短的,按照自己需要的效果来设定即可。

喜欢这枚动作的,来这里获取吧。链接: http://pan.baidu.com/s/1pKvGkht 密码: e4uu

好了,说了那么多,其实都是要介绍第三种大法:AE大法。是时候,来多玩一些AE了,此方法需要用到的是BBC特效插件,一键“下”雨。

第一步,打开AE,导入图片, 如图所示,可以通过菜单文件>导入,或者直接拖拽图片到项目面板。

第二步,新建合成。 如下图所示,用鼠标点击图片并长按,拖动它到“新建合成”按钮上,即可以此图的参数新建一个合成了。

第三步,添加特效。 在选中图片图层的基础上,选择菜单栏的“效果>BBC10 Particles>BBC Rain”,添加雨的粒子特效。:

添加完毕后,按预览播放或者新版AE直接按空格键播放,即可看到,雨下起来了。可以渲染保存成视频,也可以随便选择一帧保存成下雨图片,简单方便。嗯,好像是太简单了,哈哈哈。

第四步,更多玩法。 当然上一步的默认效果已经很好了,爱折腾的小伙伴,可以在效果面板上,继续调整参数,如图所示:雨的大小、速度、疏密、模糊度、雨滴的大小颜色等等都可以继续调节,而且可以做动画效果,简单说就是想要什么雨就下什么雨,而且可以从小雨下到大雨,棒棒哒。

当然,如果懒得调参数的话,特效本身也预设了很多不同形态的雨,只需如下图所示选择即可:

好了,这就是今天的下雨特效制作秘籍,不知道小伙伴们最喜欢哪一种呢,欢迎留言来告诉阿随君哦,么么哒。

PS:如果下雨还不爽,就来看看如何做下雪特效吧,请戳右侧 秒速制作下雪特效随时变身冰雪公主