- Xin chào các bạn, hôm này mình sẽ đăng bài về thủ thuật blog để hướng dẫn các bạn cách thêm intro hiệu ứng hover đẹp , hiệu ứng này mình lấy từ codepen.io và chia sẻ lại cho các bạn nên bạn nào có copy code ghi nguồn codepen.io nhé.
Nguồn : StarNhanBlog
Hướng dẫn cách làm
- Bạn cho toàn bộ code sau vào nơi cần đặt intro hoặc chữ , thường là dưới menu hoặc footer.
<b:if cond='data:blog.url == data:blog.homepageUrl'>Vậy là xong, chúc các bạn thành công !
<style class="cp-pen-styles">.center {
display: flex;
width: 100vw;
height: 40vh;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.center__text {
margin: auto;
font-family: 'Montserrat', sans-serif;
font-size: 120px;
text-transform: uppercase;
}
.glitch {
position: relative;
color: white;
mix-blend-mode: lighten;
}
.glitch:before, .glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
width: 100%;
background: black;
clip: rect(0, 0, 0, 0);
}
.glitch:before {
left: -1px;
text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}
.glitch:after {
left: 1px;
text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}
.glitch:hover:before {
text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}
.glitch:hover:after {
text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}
@-webkit-keyframes glitch-loop-1 {
0% {
clip: rect(36px, 9999px, 9px, 0);
}
25% {
clip: rect(25px, 9999px, 99px, 0);
}
50% {
clip: rect(50px, 9999px, 102px, 0);
}
75% {
clip: rect(30px, 9999px, 92px, 0);
}
100% {
clip: rect(91px, 9999px, 98px, 0);
}
}
@keyframes glitch-loop-1 {
0% {
clip: rect(36px, 9999px, 9px, 0);
}
25% {
clip: rect(25px, 9999px, 99px, 0);
}
50% {
clip: rect(50px, 9999px, 102px, 0);
}
75% {
clip: rect(30px, 9999px, 92px, 0);
}
100% {
clip: rect(91px, 9999px, 98px, 0);
}
}
@-webkit-keyframes glitch-loop-2 {
0% {
top: -1px;
left: 1px;
clip: rect(65px, 9999px, 119px, 0);
}
25% {
top: -6px;
left: 4px;
clip: rect(79px, 9999px, 19px, 0);
}
50% {
top: -3px;
left: 2px;
clip: rect(68px, 9999px, 11px, 0);
}
75% {
top: 0px;
left: -4px;
clip: rect(95px, 9999px, 53px, 0);
}
100% {
top: -1px;
left: -1px;
clip: rect(31px, 9999px, 149px, 0);
}
}
@keyframes glitch-loop-2 {
0% {
top: -1px;
left: 1px;
clip: rect(65px, 9999px, 119px, 0);
}
25% {
top: -6px;
left: 4px;
clip: rect(79px, 9999px, 19px, 0);
}
50% {
top: -3px;
left: 2px;
clip: rect(68px, 9999px, 11px, 0);
}
75% {
top: 0px;
left: -4px;
clip: rect(95px, 9999px, 53px, 0);
}
100% {
top: -1px;
left: -1px;
clip: rect(31px, 9999px, 149px, 0);
}
}
</style>
<div class="center">
<h1 class="center__text glitch is-glitching" data-text="Star Nhân IT">Star Nhân IT</h1>
</div></b:if>
Nguồn : StarNhanBlog
BÌNH LUẬN (0)
Một số lưu ý khi bình luận
Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)