hello，大家好，我是拾光。
不知道大家看我发布过的文章的时候是否感觉枯燥呢？
下面我做一个调查，希望大家配合我改进哟~我会积极听取朋友们的意见，给你们更好的阅读兴趣。做开发的都知道，绝大多数都是为了用户体验；所以，为了你们的阅读感受，我决定改进自己的发布内容的质量，排版等多方面。最忠心的希望，我，也能够给大家一个良好的阅读体验；
下面给大家介绍一下今天所讲的内容吧！
1、百度黑洞的效果
2、导航的悬浮渐变效果
希望大家阅读完本篇文章之后进行评论，觉得小编写的还不错，有值得学习的内容，希望大家收藏一下，以便于下次进行查看本文章，也可以进行关注我的头条号，谢谢大家。
话就说这么多，马上开课啦~
按照上面的顺序发布代码！
代码开始：
--------华丽的分割线----------
1、图片在此：
HTML：
<body>
<img src="images/blackhole.png" id="blackhole"/>
</body>
CSS：
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#blackhole{
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -400px;
transform: scale(0);
-webkit-transform: scale(1.5);
animation: inhalation 5s forwards;
}
@keyframes inhalation {
0%{transform: scale(0);}
15%{transform: scale(1);}
75%{transform: rotate(-270deg) scale(2);}
100%{transform:rotate(90deg) scale(0);}
}
PS：大家根据自己的需要进行添加前缀
例如：-webkit-/-ms-/-moz-/-o-
2、
HTML：
<body>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</ul>
</nav>
</body>
CSS：
/*
*代表所有标签元素,通配符；
*/
/*把所有的标签元素的padding，margin都设置为0，开发时不要这么做*/
*{
padding: 0;
margin: 0;
}
body{
/*body的 宽度*/
width: 1200px;
/*高度自适应*/
height: auto;
/*整个body在网页中居中显示*/
margin: 0 auto;
}
nav{
/*nav标签的宽度是body的100%，也就是宽度也是1200px*/
width: 100%;
/*这是nav的高度*/
height: 50px;
}
nav ul{
/*ul标签的宽度是nav的100%，也就是宽度也是1200px*/
width: 100%;
/*这是ul的高度，和nav保持一致*/
height: 50px;
}
nav ul li{
/*这是li的高度，和ul保持一致*/
height: 50px;
/*由于ul的宽度是1200px，这里又有6个li便签，所以每一个都是200px*/
width: 200px;
/*浮动的代码*/
float: left;
/*去掉无序列表前的 "·" 符号*/
list-style: none;
/*背景颜色*/
background-color: #000;
/*文字居中显示 */
text-align: center;
/*行高设置50,px，与li的高度一致*/
line-height: 50px;
/*透明度设置为0.8*/
opacity: 0.8;
/*以下是过渡属性的设置以及对浏览器的兼容支持*/
-webkit-transition-property:background,opacity;
-moz-transition-property:background,opacity;
-o-transition-property:background,opacity;
transition-property:background,opacity;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
nav ul li:hover{
opacity: 1;
background-color: #f90;
}
nav ul li a{
/*为点击整个li都要显示连接的样式，所以在这里，把连接的宽度与高度设置的与li的高度与宽度相等*/
height: 50px;
width: 200px;
/*去掉下划线*/
text-decoration: none;
color: #fff;
/*由于a标签是行内元素，要转换成块级元素，这是转换的代码*/
display: block;
}
最后给大家来点段子开心一下，多笑笑~
1、
从前有一位美人鱼爱上了人类的王子，她找到了巫婆，说：”无论如何都要见到他。“巫婆给了她一瓶魔药，
说：“喝了它就会见到王子，但是你会变成泡沫。“美人鱼喝下了魔药，慢慢的她周围升起了泡沫。”
她抬起头看见王子正深情的看着她，说：”哎！水开了，这鱼再给我加点酸菜呗。“
2、
女孩生日那天，男孩蒙住她的眼睛说：“宝贝跟我来。”
辗转半小时后，男孩说：“睁开眼吧。”
女孩看着周围陌生荒凉的一切，满怀期待地问：“然后呢？”
男孩没有回答，拿出一部iphone5递给女孩。
女孩激动地说：“爱死你了，这个礼物好棒耶！”
男孩冷冷地说：“给你父母打个电话，就说你在我手上。”
大家喜欢我用什么样的风格给你们写文章呢？
在评论里写出来吧~
大家有希望我发布的相关技术文章的内容可以在下方评论，看到后悔考虑给大家发布所需要的内容知识；
希望大家转发、收藏本文章以及关注我~谢谢。
祝愿大家每天都有好心情！！！！！！！！！