消息提醒

实现后台管理系统的消息提醒，做了一个头部效果。

 

===========================================

<div class="header">
<ul class="header-nav">
<li class="message">
<span>18</span>
<a href="https://www.baidu.com/">
消息中心
</a>
</li>
<li class="style">
<a href="#">风格切换</a>
</li>
<li class="logoout">
<a href="#">安全退出</a>
</li>
</ul>
</div>

=======================

 

.header-nav .message:before {
width: 30px;
height: 30px;
content: '';
display: block;
margin: 0 auto;
background: url(../images/lingdang.png) no-repeat;
background-size: 30px 30px;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
* -webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}

.header-nav .message:hover:before {
/*box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6),
inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6),*/
inset 0 0 20px rgba(255, 255, 255, 1);
/*图像旋转360度*/
transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
}

.header-nav .message.on:before {
/*实现阴影效果*/
/*box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6),
inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6),*/
inset 0 0 20px rgba(255, 255, 255, 1);
/*图像旋转360度*/
transform: rotate(360deg) scale(1.5) translate(50%, 50%);
-webkit-transform: rotate(360deg) scale(1.5) translate(50%, 50%);
-moz-transform: rotate(360deg) scale(1.5) translate(50%, 50%);
}

==================================

预览地址：https://files.cnblogs.com/files/leshao/%E6%B6%88%E6%81%AF%E6%8F%90%E9%86%92.rar

详解可以参考 http://www.cnblogs.com/leshao/p/5118315.html这个小项目

使用:before ,:after这样的伪元素，需要添加content: '';display:block;

当里面设置了float,absolute之后，可以去掉block

参考学习 http://www.zhihu.com/question/20979831