SEE Conf 2021!  支付宝体验科技大会

bgmove

css3大背景运动

css3大背景运动
其实这个的大背景运用和之前背景运动的那个demo,核心点都是一样的,关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片,注意多背景图片时其层次与其书写顺序有关,其层次高低随着书写顺序依次递减,所以第一张图片在最高层,所以这个时候千万不要定义背景色啊,不然会把后面的全部覆盖了。如果要写背景色的话,请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些零散的效果,当然首先得把背景图片设计好。

css3背景运动

css3背景运动
两个css3背景运动实例,一个是图片,一个是渐变。关键点就在于定义背景的位置,使之可以循环往复,注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅,第一个就是背景的平铺,至于第二个也可以设置一个背景,或者直接设置一个border-top什么的都可以。
返回顶部