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

Discussion in 'Tips and Guides' started by PVS, Mar 1, 2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    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:

    Code:
    .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 Đế

    Joined:
    Mar 4, 2015
    Messages:
    17
    Likes Received:
    13
    Trophy Points:
    3
    Gender:
    Male
    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 Đế

    Joined:
    Mar 1, 2015
    Messages:
    1,463
    Likes Received:
    1,114
    Trophy Points:
    113
    Gender:
    Male
    Occupation:
    http://tuyhoaplus.com
    Location:
    http://tuyhoaplus.com
    Home Page:
    Nếu chỉ muốn lấy cái chấm chớp chớp không thôi thì sao xếp ?
     
    THB likes this.
  4. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    ý bạn là sao, là cái chỉ thị đó hả
     
    Jindo_Katori likes this.
  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 likes this.
  6. nttruong

    nttruong Thượng Đế

    Joined:
    Feb 25, 2015
    Messages:
    368
    Likes Received:
    601
    Trophy Points:
    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 Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    :))
     
    THB likes this.
  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 likes this.
  9. Jindo_Katori

    Jindo_Katori Thượng Đế

    Joined:
    Mar 1, 2015
    Messages:
    1,463
    Likes Received:
    1,114
    Trophy Points:
    113
    Gender:
    Male
    Occupation:
    http://tuyhoaplus.com
    Location:
    http://tuyhoaplus.com
    Home Page:
    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 likes this.
  10. thành lê

    thành lê Thượng Đế

    Joined:
    Mar 4, 2015
    Messages:
    82
    Likes Received:
    75
    Trophy Points:
    18
    Gender:
    Male
    Location:
    LA
    Home Page:
    Cái này hay nè :v
     
    THB likes this.
  11. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    à, 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 Đế

    Joined:
    Mar 1, 2015
    Messages:
    1,463
    Likes Received:
    1,114
    Trophy Points:
    113
    Gender:
    Male
    Occupation:
    http://tuyhoaplus.com
    Location:
    http://tuyhoaplus.com
    Home Page:
    Hóng xếp :D
     
    THB likes this.
  13. hungnpna

    hungnpna Thượng Đế

    Joined:
    Jul 1, 2015
    Messages:
    48
    Likes Received:
    28
    Trophy Points:
    18
    Gender:
    Male
    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 Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    cái này là dùng chung nên không được :)
     
  15. hungnpna

    hungnpna Thượng Đế

    Joined:
    Jul 1, 2015
    Messages:
    48
    Likes Received:
    28
    Trophy Points:
    18
    Gender:
    Male
    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 Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    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 Đế

    Joined:
    Mar 15, 2015
    Messages:
    81
    Likes Received:
    42
    Trophy Points:
    18
    Gender:
    Male
    Đã làm và không thấy hiện :D
     
  18. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    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 Đế

    Joined:
    Mar 15, 2015
    Messages:
    81
    Likes Received:
    42
    Trophy Points:
    18
    Gender:
    Male
    Chỉ chèn mỗi cái này để chuyển sang avatar tròn thôi ạ
    Code:
    .avatar img, .avatar .img, .avatarCropper {
          border-radius: 60px 60px 60px 60px;
    }
    
     
  20. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    vậy thì mình cũng bó tay ^^
     

Share This Page