我需要一个Facebook风格的通知,但是要获得跨浏览器看起来不错的东西似乎很棘手。例如,不同的浏览器似乎对填充物有不同的处理,从而导致看起来很奇怪的通知。
确保通知良好显示的最佳跨浏览器方式是什么?使用JavaScript并不不利,但是纯CSS当然是可取的
Answers:
最好的方法是使用绝对定位:
/* Create the blue navigation bar */
.navbar {
background-color: #3b5998;
font-size: 22px;
padding: 5px 10px;
}
/* Define what each icon button should look like */
.button {
color: white;
display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
position: relative; /* All 'absolute'ly positioned elements are relative to this one */
padding: 2px 5px; /* Add some padding so it looks nice */
}
/* Make the badge float in the top right corner of the button */
.button__badge {
background-color: #fa3e3e;
border-radius: 2px;
color: white;
padding: 1px 3px;
font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */
top: 0;
right: 0;
}
<!-- Font Awesome is a great free icon font. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="navbar">
<div class="button">
<i class="fa fa-globe"></i>
<span class="button__badge">2</span>
</div>
<div class="button">
<i class="fa fa-comments"></i>
<span class="button__badge">4</span>
</div>
</div>
这是一个包含动画的计数变化时的动画。
http://jsfiddle.net/rahilsondhi/FdmHf/4/
<ul>
<li class="notification-container">
<i class="icon-globe"></i>
<span class="notification-counter">1</span>
</li>
.notification-container {
position: relative;
width: 16px;
height: 16px;
top: 15px;
left: 15px;
i {
color: #fff;
}
}
.notification-counter {
position: absolute;
top: -2px;
left: 12px;
background-color: rgba(212, 19, 13, 1);
color: #fff;
border-radius: 3px;
padding: 1px 3px;
font: 8px Verdana;
}
$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})
$('button').click(function()
{
var $counter = $('.notification-counter')
var val = parseInt $counter.text();
val++;
$counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500);
});
它为地球图标使用Font Awesome,为动画使用jQuery Transit。
code
$ counter.css({opacity:0}).text(val).css({top:'-10px'})。 animate({top:'-1px',opacity:1},500); code
我确信有关绝对定位的答案是正确的。为了进行实验,我尝试制作仅SVG的解决方案。结果远非理想,也许有人知道类似svg拼图的更优雅的解决方案?:)
http://jsfiddle.net/gLdsco5p/3/
<svg width="64" height="64" viewBox="0 0 91 91">
<rect id="Artboard1" x="0" y="0" width="90.326" height="90.326" style="fill:none;"/>
<g id="Artboard11" serif:id="Artboard1">
<g id="user-circle-o" transform="matrix(2.69327,0,0,2.69327,7.45723,7.45723)">
<path d="M14,0C21.734,0 28,6.266 28,14C28,21.688 21.766,28 14,28C6.25,28 0,21.703 0,14C0,6.266 6.266,0 14,0ZM23.672,21.109C25.125,19.109 26,16.656 26,14C26,7.391 20.609,2 14,2C7.391,2 2,7.391 2,14C2,16.656 2.875,19.109 4.328,21.109C4.89,18.312 6.25,16 9.109,16C10.375,17.234 12.093,18 14,18C15.907,18 17.625,17.234 18.891,16C21.75,16 23.11,18.312 23.672,21.109ZM20,11C20,7.687 17.312,5 14,5C10.688,5 8,7.688 8,11C8,14.312 10.688,17 14,17C17.312,17 20,14.312 20,11Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
</g>
<g transform="matrix(1,0,0,1,1.36156,0)">
<circle cx="63.708" cy="18.994" r="9.549" style="fill:rgb(255,0,0);"/>
</g>
<g transform="matrix(1.66713,0,0,1.66713,-51.5278,-2.33264)">
<text id="counter" x="68.034px" y="15.637px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:7.915px;fill:white;">1</text>
</g>
</g>
</svg>