仿360安全卫士首屏这个案例主要是利用多重背景和通过背景定位（css sprite）完成按钮的变化效果。布局上主要是相对和绝对定位。结合一点animation和transition动画效果完成。其中有一些细节还是只有做了才知道。

查看效果

下载地址

链接: https://pan.baidu.com/s/1c2KqGfQ 密码: m8i5

一、案例知识点

• CSS3的多重背景
  

• CSS sprite实现按钮效果

• 相对和绝对定位
  

• animation动画

二、主要代码

1、HTML部分代码

    <section>
        <div class="download">
            <h1 class="title"><span class="none">拦捆绑反欺诈 十年卫生活</span></h1>
            <a href="#" class="download-btn"><span class="none">360安全卫士下载</span></a>
            <div class="other-download">
            	<a href="#" class="offline line"><span>离线安装包</span></a>
                <a href="#" class="beta line"><span>beta版</span><span class="icon"></span></a>
                <a href="#" class="inter"><span>国际版</span></a>
            </div>
            <p class="window10">全面兼容Win10、及Win8、Win7、XP等操作系统</p>
            <div class="install-help">
            	<a href="#">安装帮助</a>
            </div>
            <div class="piece piece-top"></div>
            <div class="piece piece-bottom"></div>
      </div>
    </section>
    <footer>
       <div class="footer">
            <div class="partners">
                <a href="#" class="wanwang"></a>
                <a href="#" class="weipan"></a>
                <a href="#" class="weibo"></a>
                <a href="#" class="tweibo"></a>
                <a href="#" class="qiniu"></a>
            </div>
       </div>
    </footer>

2、CSS主要代码

.download{
	position:relative;
	height:860px;
	width:100%;
	overflow:hidden;
	z-index:1;
	background:url(images/circle.png) no-repeat right top, url(images/screen.png) no-repeat -150px 0px , url(images/shield.png) no-repeat 165px 375px,linear-gradient(180deg,#e9f7ef,#fafcfb);
	}
.download-btn{
	position:absolute;
	width:245px;
	height:70px;
	left:50%;
	margin-left:-122.5px;
	top:414px;
	background:url(images/download-btn.png) no-repeat -75px -23px;
	z-index:2;}
.download-btn:hover{
	background-position:-75px -118px;}
.download-btn:active{
	background-position:-75px -212px;}
.partners a{
	display:inline-block;
	height:24px;
	margin-right:15px;
	background:url(images/sdc_icon.png) no-repeat 0 0;
	transition:background-position 0.2s ease-out;}
.partners a.wanwang{
	width:50px;
	background-position:0 0;}
.partners a.wanwang:hover{
	background-position:0 -26px;}
.partners a.weipan{
	width:24px;
	background-position:-52px 0;}
.partners a.weipan:hover{
	background-position:-52px -26px;}
.partners a.weibo{
	width:31px;
	height:25px;
	background-position:-77px 0;}
.partners a.weibo:hover{
	background-position:-77px -25px;}
.partners a.tweibo{
	width:24px;
	background-position:-84px -51px;}
.partners a.tweibo:hover{
	width:24px;
	background-position:-84px -75px;}
.partners a.qiniu{
	width:55px;
	height:25px;
	background-position:-108px 0;}
.partners a.qiniu:hover{
	width:55px;
	height:25px;
	background-position:-108px -25px;}
@keyframes slideDown{
	0%{
		transform:translateY(-60px);}
	100%{
		transform:translateY(0);}
	}
@keyframes slideUp{
	0%{
		transform:translateY(100px);}
	100%{
		transform:translateY(0);}
	}