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

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

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)); }

在主要的浏览器中的预览情况如下；

Mozilla Firefox 3.6

Google Chrome 6.0.4

Safari 5.02

Opera 10.63

IE9 Preview

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。