Animated chỉ thị trực tuyến (có vẻ tốt nhất trên avatar dạng tròn) 1.1

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
Bạn không ưa thích các chỉ số trực tuyến chuẩn? Và cố gắng sửa đổi nhanh chóng, chỉ có CSS, không có hình ảnh cần thiết:

Thêm vào EXTRA.css:

Mã:
.messageUserBlock div.avatarHolder .onlineMarker
{
	display: inline-block;
	width: 16px;
	height: 16px;
/*	margin: 9px 0 0 9px; <- if you'd like it on top left */
	margin: 79px 0 0 79px;
	background: #fff;
	border: none!important;
	border-radius: 50%!important
}
  
.messageUserBlock div.avatarHolder .onlineMarker:before
{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	margin: 3px 0 0 3px;
	background: #7fb900;
	border-color: #7fb900;
	border-radius: 50%
}
 
 
 
 
.messageUserBlock div.avatarHolder .onlineMarker:after
{
	content: '';
	position: absolute;
	width: 32px;
	height: 32px;
	margin: -9px 0 0 -9px;
	border: 1px solid #7fb900;
	border-radius: 50%;
	box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
	-webkit-transform: scale(0);
	-webkit-animation: online 2.5s ease-in-out infinite;
	animation: online 2.5s ease-in-out infinite
}
 
 
 
 
@-webkit-keyframes online
{
	  0% {opacity: 1;-webkit-transform: scale(0)}
	 50% {opacity: .7}
	100% {opacity: 0;-webkit-transform: scale(1)}
}
 
 
 
 
@keyframes online
{
	  0% {opacity: 1;transform: scale(0)}
	 50% {opacity: .7}
	100% {opacity: 0;transform: scale(1)}
}

Điều này được kết quả cuối cùng như sau:

online-indicator2.gif

Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.

Nguồn: xenforo.com​
 
Bạn không ưa thích các chỉ số trực tuyến chuẩn? Và cố gắng sửa đổi nhanh chóng, chỉ có CSS, không có hình ảnh cần thiết:

Thêm vào EXTRA.css:

Mã:
.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}
 
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}




.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}




@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}




@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}

Điều này được kết quả cuối cùng như sau:

Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.

Nguồn: xenforo.com​
anh ơi làm sau để thành viên chỉ dùng được ảnh tỉnh không ạ em thấy nó tốn vi sử lí khiến web nặng quá host bình thường hơi mệt
ah mà làm sau để cho avatar từ hình vuôn sang hình tròn được nhỉ
 
  • Like
Reactions: THB
thế cái dẩu hiệu nhận biết là đang online từ bên gióc sang dấu chấm làm sau ạ
 
  • Like
Reactions: THB
Có cách nào để phân biệt thành viên thường với thành viên VIP ko nhỉ? Tức là chỉ có VIP mới dùng cái này, còn bt thì ko.
 
Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.
Cho mình hỏi tại sao nó lại ảnh hưởng đến load CPU? Nó chỉ là CSS chứ có phải jquery hay ajax gì đâu nhỉ?
 
mình cũng không rõ ^^, bài gốc nó nói vậy thì note lại vậy ^^
 
vậy là trong extra.css của bạn hoặc là có tồn tại 1 code tương tự hoặc là sai gì đó chứ mình vừa test lại trên 4rum mình và ok nha
 
vậy là trong extra.css của bạn hoặc là có tồn tại 1 code tương tự hoặc là sai gì đó chứ mình vừa test lại trên 4rum mình và ok nha
Chỉ chèn mỗi cái này để chuyển sang avatar tròn thôi ạ
Mã:
.avatar img, .avatar .img, .avatarCropper {
      border-radius: 60px 60px 60px 60px;
}
 
Back
Top