纯css实现可乐罐子3D转场特效

纯css写，利用background-attchment：fixed的特点

---

首先看看实现的效果

易拉罐随之滚动条的滚动而变化；

用到的图片：

                                  

HTML代码

    <!-- 第一个盒子用来展示窗口 -->
	<div class="box">
		<!-- 第二个盒子和第三个盒子用来掩盖第一个盒子的背景 -->
		<div class="sbox"></div>
		<img src="img/coke_can.png">
		<div class="sbox1"></div>			
	</div>

css代码：

<style>
		.box{
			width: 600px;
			height: 400px;
            //设置视口的宽高
			border: 1px solid;
            //添加上可乐罐子的背景图片，使其固定在视口中，可随着滚动条的滚动而变化
			background: url(img/coke_bg.jpg);
			background-attachment: fixed;
            //调整好背景图与罐子的位置，让其刚好覆盖在罐子上	
			background-position: 0px 18px;
            //背景图片x轴平铺重复
			background-repeat:repeat-x;
			overflow-x: scroll;		
			position: relative;	
		}
		.sbox{
			width:300px;
            //设置一个宽度，并使其背景颜色为白色（遮盖住.box的背景）
			height: 340px;
			position: absolute;
			left:582px;
			background-color: #fff;		
		}
		.sbox1{
			width:388px;
             //设置一个宽度，并使其背景颜色为白色（遮盖住.box的背景）
			height: 340px;
			position: absolute;
			background-color: #fff; 
		}
		img{
			position: absolute;
			left:388px;
		}
//.sbox .sbox1 img 三者的宽度大于视口盒子的宽度，出现滚动条，微调图片的位置和两个空白
盒子的位置，保证三者不会出现缝隙，漏出.box的背景。
	</style>