programming css

Chia sẻ css làm đổ bóng logo website kiemlua

Trong bài này mình chia sẻ css làm đổ bóng logo web của bạn cho đẹp cho chất thôi hi bạn nào thích thì có thể làm cho vui.

Bước 1: Đầu tiên bạn cần xác định css của logo để thêm hiệu ứng.

Bạn có thể nhấn f12 hoặc chuột phải kiểm tra phần tử ở trang web của bạn.

Ở đây ví dụ với Kiếm lúa thì là main-title

Bước 2: Thêm CSS thôi, bạn có thể thêm vào style.css của bạn hoặc vào chỗ tùy biến theme chổ css bổ sung nhé.

Bạn cũng có thể các thông số kích thước trong 2 css bên dưới cho phù hợp với logo của web bạn.

CSS chạy chéo:

/* CSS hiệu ứng đổ bóng #Logo WordPress */

h2.site-title a:before {
    content: "";
    position: absolute;
    width: 300px;
    height: 25px;
    background-color: rgba[255, 255, 255, 0.5];
    -webkit-transform: rotate[-45deg];
    -moz-transform: rotate[-45deg];
    -ms-transform: rotate[-45deg];
    -o-transform: rotate[-45deg];
    transform: rotate[-45deg];
    -webkit-animation: searchLights 1.5s ease-out 1s infinite;
    -o-animation: searchLights 1.5s ease-out 1s infinite;
    animation: searchLights 1.5s ease-out 1s infinite;
}

/*! CSS keyframes */
@-webkit-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@-o-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@-moz-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}

CSS chạy ngang:

/* CSS hiệu ứng đổ bóng #Logo cho WordPress */

.title-area {
	position:relative
}

.title-area:before, .title-area:after {
	content:"";
	position:absolute;
	top:50%;
	width:10px;
	height:100%;
	transform:translateY[-50%];
	background-color:rgba[255,255,255,.75];
	z-index:999999999;
}

.title-area:before{left:-5%;animation:light-left 2.5s infinite alternate linear}
.title-area:after{right:-5%;animation:light-right 2.5s infinite alternate linear}

@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}

Bước 3: Xem thành quả [demo ở Kiemlua.com]