Mát Badge với CSS Hiệu ứng cho Blogger
Vì vậy, hôm nay tôi sẽ chỉ cho làm thế nào bạn có thể thêm một Huy hiệu mát mà là trong hình dạng của một vòng tròn. Khi được quét qua nó, một quá trình chuyển đổi CSS diễn ra và chúng ta có thể thấy một hiệu ứng đẹp. Những tác động này được nhìn thấy trong JavaScript và hiếm khi trong CSS. CSS là đẹp mã hóa và chuyển đổi hoạt động bởi vì các yếu tố giả ví dụ: sau: trước đây. Khác với hack trình duyệt được sử dụng trong nó. Huy hiệu này là cực kỳ hấp dẫn và sẽ buộc người dùng phải di chuột vào nó. Bạn có thể thêm tiện ích này trong giữa các bài viết hay trong thanh bên. Một thử nghiệm trực tiếp và làm việc nhanh chóng của tiện ích này có thể được nhìn thấy ngay bên dưới.
Xem ở đây:
Thêm huy hiệu này to sidebar / bài viết của bạn hoặc bất cứ nơi nào HTML được hỗ trợ chỉ cần thêm đoạn mã dưới đây.
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle"><h1><a href="http://www.lutip.com">www.lutip.com</a></h1>
</div>
Sau khi thêm sự thay đổi Mã văn bản / URL mà là ở Bold và thêm nội dung vào / URL. Bạn đang làm bây giờ. Bây giờ bạn và khách truy cập blog của bạn có thể nhìn thấy Huy hiệu mát này với CSS Hiệu ứng trong blog của blogger của bạn.