首页>案例集

CSS3案例集05:飘动的云和热气球

这个案例的素材来自于htmleaf,要实现这个效果有好几种方法,在这里为了表现出CSS3的多重背景,以及可以用background-position做动画,选用了这种方法。

多重背景加动画.jpg

查看效果

下载地址

链接: https://pan.baidu.com/s/1gfy5PiN 密码: 9tp8

一、案例知识点

  • background的多重背景加position定位

  • background-size控制背景大小

  • 利用background-position完成animation动画

二、主要代码

1、HTML代码

<div id="wrap">
    <h1>CSS3多重背景结合动画打造会飘动的热气球banner</h1>
    <div class="banner"></div>
    <footer>
        <p>赵老师web前端开发教学博客</p>
        <p><a href="http://www.mrszhao.com" target="_blank">www.mrszhao.com</a></p>
  </footer>
</div>

2、主要CSS代码

.banner{
	width:100%;
	min-width:1200px;
	height:280px;
	overflow:hidden;
	background:url(images/cloud-6.png), url(images/cloud-5.png),url(images/cloud-4.png), url(images/corel.png),url(images/cloud-3.png) , url(images/cloud-2.png) ,url(images/cloud-1.png), url(images/aws-bg.jpg) ;
	background-position:180% 100px,120% 110px,-350px 50px,50px center,120% -40px,10% 10px, 90% 10px,0 0;
	background-size:70%,60%,65%,5%,40%,30%,30%,100%;
	background-repeat:no-repeat;
	animation:cloudsMove 5s ease-out forwards;
}
@keyframes cloudsMove{
	0%{
		background-position:150% 100px,120% 110px,-350px 50px,50px center,120% -40px,10% 10px, 90% 10px,0 0;
		}
	100%{
		background-position:200% 100px,150% 110px,-500px 50px,850px center,130% -40px,0% 10px, 100% 10px,0 0;
		}
	}

background-position可以实现动画效果,但是很受限制,因为必须一一对应,不能单独控制某张背景图片。

最好的办法还是使用相对和绝对定位,然后控制left/right/top/bottom的值来实现,或者使用transformtranslate来实现动画。

这里只是提供了一种方式。

点赞


2
保存到:

相关文章

Top