23/09/2018, 17:19
Ngày Và Đêm - Một ví dụ về tạo phong cảnh động hoạt hình nhờ CSS3 và HTML
Trong bài viết hôm nay, tôi sẽ cho bạn thấy, làm thế nào để tạo ra một khung cảnh "Ngày Và Đêm" có sự chuyển động rất tuyệt vời và đẹp mắt chỉ với CSS3 và HTML và một số yếu tố sắp xếp hình ảnh hợp lý. 1. HTML <div class="canvas"> <div class="cloud">< ...
Trong bài viết hôm nay, tôi sẽ cho bạn thấy, làm thế nào để tạo ra một khung cảnh "Ngày Và Đêm" có sự chuyển động rất tuyệt vời và đẹp mắt chỉ với CSS3 và HTML và một số yếu tố sắp xếp hình ảnh hợp lý.
1. HTML
<div class="canvas"> <div class="cloud"></div> <div class="cloud a"></div> <div class="cloud b"></div> <div class="cloud c"></div> <div class="land"> <div class="tree"></div> <div class="tree a"></div> <div class="tree b"></div> <div class="tree c"></div> <div class="tree d"></div> </div> <div class="star"></div> <div class="star a"></div> <div class="star b"></div> <div class="star c"></div> <div class="star d"></div> <div class="wind"></div> <div class="eclipse"> <div class="sun"></div> <div class="sun a"></div> <div class="moon"></div> <div class="moon a"></div> </div> </div>
2. CSS
Phần Css Tạo lên các vị trí và hình ảnh
.canvas {
awidth: 600px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
animation-delay: 1s;
background: #70c4c6;
animation-name: daylight;
animation-duration: 20s;
animation-iteration-count: infinite;
overflow: hidden;
animation-timing-function: linear;
}
.eclipse {
awidth: 600px;
height: 600px;
/*border: 1px solid #000;*/
position: absolute;
left:60%;
top:20%;
animation-name: time;
animation-duration: 40s;
animation-iteration-count: infinite;
z-index: 0;
animation-timing-function: linear;
}
.sun {
awidth:70px;
height:70px;
border-radius: 50%;
background-color: #ffa;
position: absolute;
top: -35px;
left: -35px;
}
.sun.a {
bottom: -35px;
right: -35px;
left: auto;
top:auto;
}
.moon {
position: absolute;
top: -35px;
right: -35px;
awidth:70px;
height:70px;
border-radius: 50%;
background-color: #fff;
}
.moon.a {
bottom: -35px;
left: -35px;
top:auto;
right: auto;
}
.cloud {
awidth: 50px;
height: 45px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top:20px;
left: -20%;
animation-name: cloud;
animation-duration: 70s;
animation-iteration-count: infinite;
z-index: 1;
}
.cloud::before {
content:';
awidth: 35px;
height: 30px;
background-color: #fff;
margin-left: -20px;
margin-top: 10px;
display: block;
border-radius: 50%;
}
.cloud::after {
content:';
awidth: 20px;
height: 20px;
background-color: #fff;
position: absolute;
right: -10px;
top: 17px;
border-radius: 50%;
}
.cloud.a {
top:150px;
animation-duration: 55s;
}
.cloud.b {
top:100px;
left:-15%;
animation-duration: 38s;
}
.cloud.c {
top:250px;
left:-10%;
animation-duration: 25s;
}
.land {
awidth: 100%;
height: 320px;
position: absolute;
left:-50px;
bottom: -120px;
background-color: #83a81c;
border-radius: 50%;
z-index: 1;
animation-name: land;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.land::before {
awidth: 100%;
height: 200px;
content: ';
position: absolute;
left: 40%;
top: 20%;
border-radius: 50%;
background-color: #96be29;
transform: rotate(-15deg);
animation-name: land1;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.tree {
awidth:10px;
height:40px;
background-color: #766257;
left: 200px;
position: absolute;
}
.tree::before {
content: ';
position: absolute;
bottom: 125%;
left: -7px;
awidth: 0;
height: 0;
border-style: solid;
border-awidth: 0 20px 43px 20px;
border-color: transparent transparent #bfde3b transparent;
z-index: 1;
animation-name: windy;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.tree::after {
content: ';
position: absolute;
bottom:100%;
left:-25px;
awidth: 0;
height: 0;
border-style: solid;
border-awidth: 0 30px 60px 30px;
border-color: transparent transparent #93ae29 transparent;
}
.tree.a {
transform: scale(0.5);
left: 250px;
}
.tree.b {
transform: scale(0.75);
left: 280px;
}
.tree.c {
transform: scale(1.5);
left:450px;
top: 100px;
}
.tree.d {
transform: scale(1.25);
left: 530px;
top: 80px;
z-index: 0;
}
.star {
awidth: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50px;
left: 100px;
animation-name: fader;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::before {
content: ';
awidth:3px;
height:3px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:20px;
top:20px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::after {
content: ';
awidth:2px;
height:2px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:-200px;
top:50px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star.a {
top:30px;
left:90%;
}
.star.b {
top:120px;
left:70%;
}
.star.c {
top:100px;
left:65%;
}
.star.d {
top:200px;
left:15%;
}
.swirly-wind {
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.swirly-wind > span {
awidth: 150px;
background-color: #eee;
height: 2px;
display: block;
position: relative;
}
.swirly-wind > span:first-child {
awidth: 200px;
}
.swirly-wind > span:nth-child(1)::before {
display: none;
}
.swirly-wind > span:nth-child(2) {
margin-top: -10px;
float: right;
}
.swirly-wind > span:nth-child(3) {
margin-top: 15px;
awidth: 75px;
float: right;
}
.swirly-wind span::before {
content: ';
position: absolute;
awidth: 30px;
height: 30px;
border-radius: 50%;
border: #fff 2px solid;
bottom: calc(100% - 2px);
right: -15px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
}
.swirly-wind > span:nth-child(3)::before {
top: calc(100% - 2px);
-webkit-clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
}
.swirly-wind.a {
top:20%;
awidth: 75px;
animation-duration: 8s;
}
.swirly-wind.b {
top:45%;
awidth: 120px;
animation-duration: 15s;
height :1px;
}
.wind {
awidth: 150px;
background-color: #eee;
height: 2px;
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Phẩn Css Tạo sư chuyển động tạo hoạt cảnh chuyển động giữa ngay và đêm
@keyframes time {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes daylight {
0% { background-color: #70c4c6; }
15% { background-color: #524b64; }
40% { background-color: #354a4a; }
70% { background-color: #354a4a; }
80% { background-color: #e2b553; }
100% { background-color: #70c4c6;}
}
@keyframes land {
40% { background-color: #4d6932; }
70% { background-color: #4d6932;}
}
@keyframes land1 {
40% { background-color: #5b793e; }
70% { background-color: #5b793e;}
}
@keyframes cloud {
0% { transform: translateX(0); }
100% { transform: translateX(850px); }
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@keyframes fader {
0% { opacity: 0; }
15% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 0.4; }
70% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes blinker {
0% { opacity: 0; }
18% { opacity: 0; }
25% { opacity: 1; }
40% { opacity: 0; }
60% { opacity: 1; }
70% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes blinker-1 {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes windy {
15% { transform: translateX(5px); transform: rotate(5deg); }
80% { transform: translateX(7px); transform: rotate(7deg);}
80% { transform: translateX(5px); transform: rotate(5deg);}
}
@keyframes wind {
0% { left: -800px; opacity: 0 }
15% { opacity: 1; }
70% { left: 800px; opacity: 1;}
80% { left: 800px; opacity: 0;}
100% { left: -1000px; opacity: 0;}
}
@keyframes snowday {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.snow {
awidth: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
}
.snow.fall {
animation-name: snowday ;
animation-duration: 5s;
}
Qua bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc sử dụng việc sắp xếp HTML CSS và cộng với CSS3 tạo lên một hoạt cảnh động thú vị. Và đây là Sản Phẩm
Tôi hy vọng bạn thích!
Xin cảm ơn.
