使用css3 background属性制作3D易拉罐效果

来源：互联网发布：java接口测试代码编辑：程序博客网时间：2024/04/29 15:34

先记录一下css3 3d练习

本例中主要使用background-image，background-attachment，background-position属性，设计二维位移的立体效果。

如图所示，移动滚动条可以使易拉罐从左向右滚动。

background-image 属性会在元素的背景中设置一个图像。
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-position 属性设置背景图像的起始位置。

效果图如下：

在这里我们用一幅全景图片作为背景，如图：

通过55个p元素，然后进行拼接，从而设计出立体效果。定义过度对象为高度，过渡时间为0.3秒，渐显显示。在这里需要大家掌握光线的明暗以及透视的原理，掌握了这些做起来就很容易了。

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#coke {
width: 760px;
height: 400px;
overflow: auto;
}
img {
border: 0;
margin-left: -172px;
}
a {
display: block;
padding-top: 19px;
width: 194px;
}
a:hover img {
background-image: url(images/coke-title.png);
background-repeat: no-repeat;
background-position: 15px 100px;
}
div div {
padding-left: 500px;
width: 760px;
}
p {
margin: 0;
padding: 0;
float: left;
height: 336px;
width: 1px;
background-image: url(images/coke-label.jpg);
background-attachment: fixed;
background-repeat: repeat-x;

}
#x1 { background-position: 5px 30px; }
#x2 { background-position: 0px 30px; }
#x3 { background-position: -3px 30px; }
#x4 { background-position: -6px 30px; }
#x5 { background-position: -8px 30px; }
#x6 { background-position: -10px 30px; }
#x7 { background-position: -12px 30px; }
#x8 { background-position: -14px 30px; }
#x9 { background-position: -15px 30px; }
#x10 { background-position: -16px 30px; }
#x11 { background-position: -17px 30px; }
#x12 { background-position: -18px 30px; }
#x13 { background-position: -19px 30px; }
#x14 { background-position: -20px 30px; }
#x15 { background-position: -21px 30px; }
#x16 { background-position: -22px 30px; width: 2px; }
#x17 { background-position: -23px 30px; }
#x18 { background-position: -24px 30px; width: 2px; }
#x19 { background-position: -25px 30px; width: 2px; }
#x20 { background-position: -26px 30px; width: 2px; }
#x21 { background-position: -27px 30px; width: 2px; }
#x22 { background-position: -28px 30px; width: 3px; }
#x23 { background-position: -29px 30px; width: 3px; }
#x24 { background-position: -30px 30px; width: 4px; }
#x25 { background-position: -31px 30px; width: 5px; }
#x26 { background-position: -32px 30px; width: 7px; }
#x27 { background-position: -33px 30px; width: 12px; }
#x28 { background-position: -34px 30px; width: 55px; }
#x29 { background-position: -35px 30px; width: 11px; }
#x30 { background-position: -36px 30px; width: 6px; }
#x31 { background-position: -37px 30px; width: 5px; }
#x32 { background-position: -38px 30px; width: 4px; }
#x33 { background-position: -39px 30px; width: 3px; }
#x34 { background-position: -40px 30px; width: 2px; }
#x35 { background-position: -41px 30px; width: 3px; }
#x36 { background-position: -42px 30px; width: 2px; }
#x37 { background-position: -43px 30px; width: 2px; }
#x38 { background-position: -44px 30px; }
#x39 { background-position: -45px 30px; width: 2px; }
#x40 { background-position: -46px 30px; }
#x41 { background-position: -47px 30px; }
#x42 { background-position: -48px 30px; }
#x43 { background-position: -49px 30px; }
#x44 { background-position: -50px 30px; }
#x45 { background-position: -51px 30px; }
#x46 { background-position: -52px 30px; }
#x47 { background-position: -53px 30px; }
#x48 { background-position: -54px 30px; }
#x49 { background-position: -56px 30px; }
#x50 { background-position: -58px 30px; }
#x51 { background-position: -60px 30px; }
#x52 { background-position: -62px 30px; }
#x53 { background-position: -65px 30px; }
#x54 { background-position: -68px 30px; }
#x55 { background-position: -74px 30px; }
</style>
</head>
<body>
<div id="coke">
<div id="y">























































<a href="#"> <img src="images/coke-can.png" alt="Pure CSS Coke Can" /> </a> </div>
</div>
</body>
</html>

阅读全文

0 0