一、前言

在网页设计中,为了避免网站整体过于单调,设计师们会为各个页面进行别出心裁的设计,例如之前长沙网站制作分享的对文字增加效果等.而除了对页面内容花心思做特效外,我们还可以对网页的背景进行调整,为其添加一些动态的效果.

二、效果简介

本次介绍的页面背景动画效果是一个非常简单并且实用的效果,实现的方法也非常简单.

首先在页面上设置几个div当做背景层,每个背景层中都放置一张svg图片,由于svg图片是可以制作成任意形状的,我们可以将其制作成水波、山峦等等形状.

然后长沙网站建设为它们添加Css代码,首先将背景层叠在同一个位置,并设置不同的透明度.这样可以让里面的图片看起来更有层次感,最后给每层添加不同的动画属性:

@keyframes bgd1{
    0%{transform:translateX(0) scaleY(1);}
    50%{transform:translateX(-20%) scaleY(0.7);}
    100%{transform:translateX(-50%) scaleY(1);}
}
@keyframes bgd2{
    0%{transform:translateX(0) scaleY(1);}
    50%{transform:translateX(-20%) scaleY(1.1);}
    100%{transform:translateX(-50%) scaleY(1);}
}
@keyframes bgd3{
    0%{transform:translateX(0) scaleY(1);}
    50%{transform:translateX(-20%) scaleY(0.85);}
    100%{transform:translateX(-50%) scaleY(1);}
}

最终,在Css代码的控制下,由于变化速度的不同,这几张叠在一起的背景图片看起来像一阵阵波浪在不断被激起向远处扩散.

三、效果展示

(上为效果截图,页面底部泛起的波浪,来源于:长沙网站设计)

四、视频展示

五、效果扩展

本效果非常的简单与实用,可以使用在任何场合.例如各类购物网站,产品展示区域,在线小说首页等等,通过流畅美观的页面效果增加用户的好感度.

扩展方面,本效果资源消耗非常小,由于效果主体是svg图片,所以可以将图片做成更多的样式,并搭配不同的动画属性,展示出更多的效果.

这就是长沙网站开发整理的页面背景动画效果的制作方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.