消息提醒
2016-01-10 13:36
369 查看
实现后台管理系统的消息提醒,做了一个头部效果。
===========================================
<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%);
}
==================================
预览地址:http://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
===========================================
<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%);
}
==================================
预览地址:http://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
相关文章推荐
- 【mysql】count(*),count(1)与count(column)区别
- 回顾Quick Sort(Javascript 实现)
- 学习笔记:FIS3
- Android之DialogFragment
- 燕十八视频--CSS
- 小紫书 3-11 UVA 1588 POJ 3158 Kickdown
- Angularjs 数据循环
- js实现table排序
- commons-pool分析
- C++小题(十四)
- Unity多玩家游戏和网络功能
- 华为机试——整数划分
- LeetCode Word Ladder
- 【中级篇】Linux下搭建MySQL数据库系统
- 使用shell连接engine
- Ubuntu设置语言为英语
- ubuntu用户切换
- KinectV1+Ubuntu 14.04安装教程
- LeetCode - Path Sum II
- 从零开始写javaweb框架笔记10-搭建轻量级JAVAWEB框架-确定目标