+ Mục Đích:
- Trang trí blog
- Tương hợp với các code khác
...
+ Các Bước Làm:
Chèn đoạn này ở bất cứ đâu bạn muốn nó hiển thị:
<div class="container container-bird">
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
Chèn đoạn này trên ]]></b:skin>
@import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");Chúc các bạn thành công.
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container-bird {
-webkit-perspective: 2000px;
perspective: 2000px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bird {
position: absolute;
z-index: 1000;
left: 50%;
top: 50%;
height: 40px;
width: 50px;
-webkit-transform: translate3d(-100vw, 0, 0) rotateY(90deg);
transform: translate3d(-100vw, 0, 0) rotateY(90deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bird-container {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(50px, 30px, -300px);
transform: translate3d(50px, 30px, -300px);
}
.wing {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 3px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
z-index: 300;
}
.wing-left {
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
-webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
transform: translate3d(0, 0, 0) rotateX(-30deg);
-webkit-animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-right {
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
-webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
transform: translate3d(0, 0, 0) rotateX(-30deg);
-webkit-animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-right-top,
.wing-left-top {
border-right: 25px solid transparent;
border-left: 25px solid transparent;
top: -20px;
width: 100%;
position: absolute;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.wing-right-top {
border-bottom: 20px solid #b8a5d1;
-webkit-transform: translate3d(0, 0, 0) rotateX(60deg);
transform: translate3d(0, 0, 0) rotateX(60deg);
-webkit-animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-left-top {
border-bottom: 20px solid #7979a8;
-webkit-transform: translate3d(0, 0, 0) rotateX(-60deg);
transform: translate3d(0, 0, 0) rotateX(-60deg);
-webkit-animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.bird-anim:nth-child(1) {
-webkit-animation: bird1 30s linear infinite forwards;
animation: bird1 30s linear infinite forwards;
}
.bird-anim:nth-child(2) {
-webkit-animation: bird2 30s linear infinite forwards;
animation: bird2 30s linear infinite forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
z-index: -1;
}
.bird-anim:nth-child(3) {
-webkit-animation: bird3 30s linear infinite forwards;
animation: bird3 30s linear infinite forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.bird-anim:nth-child(4) {
-webkit-animation: bird4 30s linear infinite forwards;
animation: bird4 30s linear infinite forwards;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bird-anim:nth-child(5) {
-webkit-animation: bird5 30s linear infinite forwards;
animation: bird5 30s linear infinite forwards;
-webkit-animation-delay: 14s;
animation-delay: 14s;
}
.bird-anim:nth-child(6) {
-webkit-animation: bird6 30s linear infinite forwards;
animation: bird6 30s linear infinite forwards;
-webkit-animation-delay: 10s;
animation-delay: 10s;
z-index: -1;
}
@-webkit-keyframes rotate {
0%, 100% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotate {
0%, 100% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes snore {
0%, 100% {
-webkit-transform: scale(1) rotate(30deg);
transform: scale(1) rotate(30deg);
}
50% {
-webkit-transform: scale(0.5) rotate(30deg);
transform: scale(0.5) rotate(30deg);
border-bottom-left-radius: 50%;
}
}
@keyframes snore {
0%, 100% {
-webkit-transform: scale(1) rotate(30deg);
transform: scale(1) rotate(30deg);
}
50% {
-webkit-transform: scale(0.5) rotate(30deg);
transform: scale(0.5) rotate(30deg);
border-bottom-left-radius: 50%;
}
}
@-webkit-keyframes twinkle {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.3;
}
}
@keyframes twinkle {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.3;
}
}
@-webkit-keyframes wingLeft {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
transform: translate3d(0, 0, 0) rotateX(-50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
transform: translate3d(0, -20px, 0) rotateX(-130deg);
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
}
}
@keyframes wingLeft {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
transform: translate3d(0, 0, 0) rotateX(-50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
transform: translate3d(0, -20px, 0) rotateX(-130deg);
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
}
}
@-webkit-keyframes wingLeftTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
transform: translate3d(0, 0, 0) rotateX(-10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
transform: translate3d(0px, 0px, 0) rotateX(-40deg);
border-bottom: 20px solid #b8a5d1;
}
}
@keyframes wingLeftTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
transform: translate3d(0, 0, 0) rotateX(-10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
transform: translate3d(0px, 0px, 0) rotateX(-40deg);
border-bottom: 20px solid #b8a5d1;
}
}
@-webkit-keyframes wingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
transform: translate3d(0, 0, 0) rotateX(50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
transform: translate3d(0, -20px, 0) rotateX(130deg);
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
}
}
@keyframes wingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
transform: translate3d(0, 0, 0) rotateX(50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
transform: translate3d(0, -20px, 0) rotateX(130deg);
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
}
}
@-webkit-keyframes wingRightTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
transform: translate3d(0, 0, 0) rotateX(10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
transform: translate3d(0px, 0px, 0px) rotateX(40deg);
border-bottom: 20px solid #7979a8;
}
}
@keyframes wingRightTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
transform: translate3d(0, 0, 0) rotateX(10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
transform: translate3d(0px, 0px, 0px) rotateX(40deg);
border-bottom: 20px solid #7979a8;
}
}
@-webkit-keyframes bird1 {
0% {
-webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
}
}
@keyframes bird1 {
0% {
-webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
}
}
@-webkit-keyframes bird2 {
0%,
15% {
-webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
}
}
@keyframes bird2 {
0%,
15% {
-webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
}
}
@-webkit-keyframes bird3 {
0% {
-webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
100% {
-webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
}
@keyframes bird3 {
0% {
-webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
100% {
-webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
}
@-webkit-keyframes bird4 {
0% {
-webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
}
@keyframes bird4 {
0% {
-webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
}
@-webkit-keyframes bird5 {
0%,
5% {
-webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
100% {
-webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
}
@keyframes bird5 {
0%,
5% {
-webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
100% {
-webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
}
@-webkit-keyframes bird6 {
0%, 10% {
-webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
}
}
@keyframes bird6 {
0%, 10% {
-webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
}
}
@media screen and (max-width: 580px) {
.container-404 {
width: 100%;
}
.number {
font-size: 100px;
}
.subtitle {
font-size: 20px;
padding: 0 1em;
}
.moon {
width: 100px;
height: 100px;
}
.face {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
=> Bài viết được viết bởi admin blog S2TopVN
=> Vui lòng để lại nguồn nếu đăng tải lại bài viết này.
Nguồn code: Chiase78
Không có nhận xét nào