Hỗ Trợ
Code CSS làm logo chạy lấp lánh
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
a.liveevent { float: none; color: #f10b40; max-width: 100%; position: relative; padding: 0 0 0 40px; margin-bottom: 0; margin-left: 0; } a.liveevent #dot .ping { border-color: #f10b40; background-color: rgba(255,230,107,.2); } #dot .ping { border: 1px solid #f33; width: 10px; height: 10px; opacity: 1; background-color: rgba(238,46,36,.2); border-radius: 100%; -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-name: sonar; animation-name: sonar; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; display: block; margin: -1px 0 0 -1px; } #dot { background-color: #d81c50; left: 15px; } #dot { width: 10px; height: 10px; background-color: #f33; border-radius: 100%; position: absolute; left: 0; top: 50%; margin-top: -5px; display: block; } @keyframes sonar { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(3); transform: scale(3); opacity: 0; } } .text_ping { white-space: normal; overflow: visible; max-height: 34px; display: inline-block; text-decoration: none; color: #62bd19; line-height: 1.3; } .liveevent .text_ping { line-height: 1.4; font-size: 14px; margin-left: 19px; display: inline-block; vertical-align: middle; } /* CSS hiệu ứng bóng lướt NGANG cho logo */ /* Sửa h1.site-title thành phần tử CSS của bạn */ .logo a { position: relative; }.logo a:after,.logo a:before{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999} .logo a:before{left:-5%;animation:light-left 2.5s infinite alternate linear} .logo a:after{right:-5%;animation:light-right 2.5s infinite alternate linear} @keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}} |