1.CSS3中带有渐变色背景色处理：（根据不同的）
参考链接：http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html
2.带雪花的导航栏
HTML5代码：
<!DOCTYPE html> <html en"> <head> <meta charset="UTF-8"> <title>nav with Snow Flake</title> <link rel="stylesheet" href="style.css"> </head> <body> <!--快捷输入以下内容的方法：nav>ul>(li>a{金陵十二钗}*6+Tab)--> <nav> <ul> <li><a href="#">金陵十二钗</a></li> <li> <a href="#">金陵十二钗</a> <ul class="subnav"> <li><a href="#">林黛玉</a></li> <li><a href="#">林黛玉</a></li> <li><a href="#">林黛玉</a></li> <li><a href="#">林黛玉</a></li> <li><a href="#">林黛玉</a></li> <li><a href="#">林黛玉</a></li> </ul> </li> <li> <a href="#">金陵十二钗</a> <ul class="subnav"> <li><a href="#">薛宝钗</a></li> <li><a href="#">薛宝钗</a></li> <li><a href="#">薛宝钗</a></li> <li><a href="#">薛宝钗</a></li> <li><a href="#">薛宝钗</a></li> <li><a href="#">薛宝钗</a></li> </ul> </li> <li><a href="#">金陵十二钗</a></li> <li><a href="#">金陵十二钗</a></li> <li><a href="#">金陵十二钗</a></li> </ul> </nav> </body> </html>CSS3样式代码：
/*清空所有的margin与padding*/ *{ margin:0; padding:0; } /*在body中设定整个页面的背景色和字体样式*/ body{ background-color: #cccccc; font: 16px "微软雅黑"; } /*去掉ul的列表样式，主要是去掉list前面的小黑点*/ ul{ list-style: none; } /*给定a标签的颜色以及去掉下划线*/ a{ color: #8c8c8c; text-decoration: none; } /* *弹性盒子布局，使得所有的list都显示在同一行上面去 有了弹性盒子，我们就不用float:left的方式去处理浮动了 */ nav>ul{ display:-webkit-box; } nav>ul>li{ -webkit-box-flex: 1; /*平均分配*/ text-align: center; /*水平方向居中对齐*/ height: 100%; /*高度是完全填充nav*/ line-height: 50px; /*垂直方向居中对齐*/ position: relative; /*根据子绝父相来定位*/ } /*给定导航栏的基本样式*/ nav{ width:80%; /*用百分比的方式给定导航条的宽度，实现响应式的效果*/ height: 50px; /* *背景色用线性渐变，-webkit-linear-gradient（渐变方向，开始颜色，结束颜色） 如果觉得渐变还是不够明显的话，可以给导航一个上边框和一个下边框，加强颜色比对 */ background: -webkit-linear-gradient(top,#121212,#333333); margin:100px auto; min-width: 500px; /*给一个最小的宽度，防止导航上面的字竖着下来*/ } nav li:hover{ background: -webkit-linear-gradient(top,#1d1d1d,#1a1b1b); } /*下拉菜单要用定位的方式显示*/ .subnav { position: absolute; /*子类按照绝对定位*/ width:100%; top:50px; left: 0; /*防止浏览器的兼容性问题，给它添加上-webkit*/ -webkit-perspective: 400px; /*按照近小远大的原则，给父类添加透视效果*/ max-height: 0; /*用来解决鼠标放到导航底下的区域也会出现翻转的现象*/ } .subnav li{ background: -webkit-linear-gradient(top,#121212,#333333); opacity: 0; /*opacity表示透明度，当透明度为0的时候就看不见了*/ transform: rotateY(90deg); /*按照Y轴旋转*/ transition: opacity 0.4s,transform 0.5s; /*transition用来表示过渡*/ } / .subnav li:nth-child(1){ /*表示li的父元素（subnav）的第n个子元素*/ -webkit-transition-delay: 250ms; /*第一个li的过渡延迟250ms*/ } .subnav li:nth-child(2){ /*表示li的父元素（subnav）的第n个子元素*/ -webkit-transition-delay: 200ms; /*第二个li的过渡延迟200ms*/ } .subnav li:nth-child(3){ -webkit-transition-delay: 150ms; } .subnav li:nth-child(4){ -webkit-transition-delay: 100ms; } .subnav li:nth-child(5){ -webkit-transition-delay: 50ms; } .subnav li:nth-child(6){ -webkit-transition-delay: 0ms; } /*当鼠标经过导航上面的li到时候，subnav里面的li显示出来*/ nav li:hover .subnav li{ opacity: 1; transform: none; /*不旋转，其实是相当于转回到了正常*/ } nav li:hover .subnav li:nth-child(1){ -webkit-transition-delay: 0ms; } nav li:hover .subnav li:nth-child(2){ -webkit-transition-delay: 50ms; } nav li:hover .subnav li:nth-child(3){ -webkit-transition-delay: 100ms; } nav li:hover .subnav li:nth-child(4){ -webkit-transition-delay: 150ms; } nav li:hover .subnav li:nth-child(5){ -webkit-transition-delay: 200ms; } nav li:hover .subnav li:nth-child(6){ -webkit-transition-delay: 250ms; }
<!DOCTYPE html> <html en"> <head> <meta charset="UTF-8"> <title>雪花</title> <link rel="stylesheet" href="xuehua.css"> </head> <body> <div></div> </body> </html>
body{ background: #000000; } div{ width: 8px; height: 8px; background: #ffffff; margin:100px; border-radius: 50%; /*改变中心点的位置*/ transform-origin: 60px 0; /*通过修改中心点，使得雪花不是直线下落，而是弧度的下落*/ -webkit-animation: snowflake 5s linear infinite; /*linear实现匀速，infinite实现无限循环*/ } @-webkit-keyframes snowflake { 0%{ /*此处的旋转度数可以是任意值，但是不能跟后面的那个一样，不然修改中心点是不起作用的，因为度数一致中心点始终能保持不变*/ -webkit-transform: translate3d(0,0,0) rotate(0deg); } 100%{ -webkit-transform: translate3d(0,400px,0) rotate(360deg); /*让雪花在下落的过程中旋转360度*/ } }运行效果：（动图没法截取到，只取其中的一部分用来提示）
