您的位置：首页 > Web前端 > CSS

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

2017-08-18 17:13 751 查看

先记录一下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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航