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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 01/03/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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: bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365.com​
     
  2. kimchihanquoc

    kimchihanquoc Thượng Đế

    Tham gia:
    04/03/2015
    Bài viết:
    17
    Đã được thích:
    13
    Điểm thành tích:
    3
    Giới tính:
    Nam
    cái này mình làm hình vuông. nên ko cần dùng.o_O
     
  3. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Nếu chỉ muốn lấy cái chấm chớp chớp không thôi thì sao xếp ?
     
    THB thích bài này.
  4. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    ý bạn là sao, là cái chỉ thị đó hả
     
    Jindo_Katori thích bài này.
  5. Lê Thanh Giảng

    Lê Thanh Giảng Khách VNXF

    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ỉ
     
    THB thích bài này.
  6. nttruong

    nttruong Thượng Đế

    Tham gia:
    25/02/2015
    Bài viết:
    368
    Đã được thích:
    601
    Điểm thành tích:
    93
    Avatar từ vuông sang tròn thì phải css nha bạn. Cứ border-radius: 50% phang vào là ok!
     
    THB and Lê Thanh Giảng like this.
  7. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    :))
     
    THB thích bài này.
  8. Lê Thanh Giảng

    Lê Thanh Giảng Khách VNXF

    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 ạ
     
    THB thích bài này.
  9. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Là làm cái dấu màu xanh hiện thị user đang "online" chớp chớp á (mà vẫn để avatar mặc định)
     
    THB thích bài này.
  10. thành lê

    thành lê Thượng Đế

    Tham gia:
    04/03/2015
    Bài viết:
    82
    Đã được thích:
    75
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Nơi ở:
    LA
    Web:
    Cái này hay nè :v
     
    THB thích bài này.
  11. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    à, sẽ có 1 bài hướng dẫn riêng nha :D
     
    THB and Jindo_Katori like this.
  12. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Hóng xếp :D
     
    THB thích bài này.
  13. hungnpna

    hungnpna Thượng Đế

    Tham gia:
    01/07/2015
    Bài viết:
    48
    Đã được thích:
    28
    Điểm thành tích:
    18
    Giới tính:
    Nam
    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.
     
  14. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    cái này là dùng chung nên không được :)
     
  15. hungnpna

    hungnpna Thượng Đế

    Tham gia:
    01/07/2015
    Bài viết:
    48
    Đã được thích:
    28
    Điểm thành tích:
    18
    Giới tính:
    Nam
    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ỉ?
     
  16. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    mình cũng không rõ ^^, bài gốc nó nói vậy thì note lại vậy ^^
     
  17. Minh Đức

    Minh Đức Thượng Đế

    Tham gia:
    15/03/2015
    Bài viết:
    81
    Đã được thích:
    42
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Đã làm và không thấy hiện :D
     
  18. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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
     
  19. Minh Đức

    Minh Đức Thượng Đế

    Tham gia:
    15/03/2015
    Bài viết:
    81
    Đã được thích:
    42
    Điểm thành tích:
    18
    Giới tính:
    Nam
    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;
    }
    
     
  20. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    vậy thì mình cũng bó tay ^^
     

Chia sẻ trang này