用css3和html实现创建 Christmas Tree Ornaments（baubles）

最新推荐文章于 2024-12-20 11:28:18 发布

iteye_3606

最新推荐文章于 2024-12-20 11:28:18 发布

阅读量125

点赞数

css3的出现让我们在实现一些功能效果上变得更简洁，更方便。今天用css3实现圣诞树的一些装饰品，但是支持的浏览器有限，如ie6/7/8不能很好的支持这些css3属性，但是在其他浏览器上看起来效果还挺炫的。

html代码如下：

css代码如下

* {
margin:0;
padding:0;
}
html {
background:#f2f5f6;
background:-moz-linear-gradient(top, #f2f5f6, #c8d7dc);
background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #c8d7dc), color-stop(1, #f2f5f6));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f5f6', endColorstr='#c8d7dc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f5f6', endColorstr='#c8d7dc')"; /* IE8 */
height:100%;
}
#bauble-container {
list-style:none;
width:568px;
margin:150px auto;
padding:0;
}
#bauble-container li {
margin:0 20px;
float:left;
}
#bauble-container li:before {
content:"";
background:#dadada;
background:-moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0));
background:-webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height:50px;
width:2px;
display:block;
margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#9c9c9c'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#9c9c9c')"; /* IE8 */
}
#bauble-container li:nth-child(odd) {
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
}
#bauble-container li:nth-child(even) {
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
}
.bauble {
-moz-border-radius:100px;
border-radius:100px;
-moz-box-shadow:0 0 5px #777777;
box-shadow:0 0 5px #777777;
-webkit-box-shadow:0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before {
content:"";
background:#fff;
background:-moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background:-webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
-moz-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
-webkit-box-shadow:0 1px 0 ragba(0, 0, 0, 0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
box-shadow:0 1px 0 ragba(0, 0, 0, 0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border:1px solid #dadada;
height:10px;
width:20px;
position:absolute;
left:50%;
top:-12px;
margin-left:-10px;
}
.bauble:after {
content:"";
-moz-border-radius:100px;
border-radius:100px;
background-color:#fff;
background:-moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1));
background:-webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position:absolute;
top:0;
left:50%;
margin-left:-40px;
height:80px;
width:80px;
opacity:0.15;
}
.red-bauble {
background:#c8171f;
background:-moz-radial-gradient(center, circle cover, #f9d0be, #c8171f);
background:-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble {
background: #00a1ee; /* Fallback */
background: -moz-radial-gradient(center 45deg, circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble {
background:#fcb83d;
background:-moz-radial-gradient(center 45deg, circle cover, #fcf3a6, #fcb83d);
background:-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble {
background:#4d8d00;
background:-moz-radial-gradient(center 45deg, circle cover, #d1e5b2, #4d8d00);
background:-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}