CSS3：有雪花的导航栏实例

最新推荐文章于 2023-05-06 16:36:01 发布

落花新月

最新推荐文章于 2023-05-06 16:36:01 发布

阅读量1.2k

点赞数

分类专栏： Web前端文章标签： transition过渡 perspective透视 rotate旋转 transform变化 translate移动位置

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50768683

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.CSS3中带有渐变色背景色处理：（根据不同的）

参考链接：http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html

2.带雪花的导航栏

HTML5代码：

<!DOCTYPE html>
<html lang="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 lang="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度*/
    }

}