百度空间怎么做下雨的特效。CSS编辑的那种。

html-css040

百度空间怎么做下雨的特效。CSS编辑的那种。,第1张

楼主你好,很高兴为您解答!

如果您想要将下雨的图片放在空间头部图片位置,就在头部图片代码中加入此代码

/*标题栏*/

#header{height:508pxbackground:url(图片地址) no-repeat}这是模板头部图片

#header DIV.lc {}头部图片左边图片

#header div.rc{BACKGROUND: url(图片地址) repeat:} 头部图片右边图片

在这里的一左一右插入下雨的图片都可以

如果你是要在模板背景插入图片,这一句就可以了

body{background:url(图片地址) repeat}

Web开发的时候,有些交互特效比较复杂,想要使用视频实现,但是有一个问题就是视频的背景色呀,它不能是透明的,导致设计师在制作视频的时候必须跟背景融合在一起,开发成本还是蛮高的,维护起来也比较头疼,那有没有什么好办法,可以让MP4 video视频背景色变成透明呢?

有!

我们可以借助CSSmix-blend-mode混合模式属性曲线救国。

mix-blend-mode混合模式中有一种混合模式名为滤色,单词是screen,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。

于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:

例如:

下面有一张底图:

然后还有一个下雨的视频(不播放请点击):

此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):

就这么简单!

在所有不需要兼容IE浏览器的项目中都可以使用。

相信你一定学到了这个技能TIPS!

二、结语

关于滤色screen的深入理解,可以参见这篇文章:“深入理解CSS mix-blend-mode滤色screen混合模式”。

预告,接下来两个星期文章会爆更,请做好准

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

希望能给你帮助

-----君少