4
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Tôi đang hoạt hình dòng với CSS3 từ chiều rộng: 0 đến chiều rộng: 100%. Hiện tại đang di chuyển từ trái sang phải, nhưng tôi muốn làm cho nó bắt đầu từ phải sang trái. Đây có phải là tất cả với các khung chính?
Đây là mã của tôi
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; -webkit-animation: dude .75s 1 forwards; -moz-animation: dude .75s 1 forwards; -o-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @-moz-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @-o-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }<div class="content"> <div class="line"></div> </div>
Jinu Kurian
8,5373 Huy hiệu vàng23 Huy hiệu bạc34 Huy hiệu đồng3 gold badges23 silver badges34 bronze badges
Đã hỏi ngày 2 tháng 6 năm 2016 lúc 11:38Jun 2, 2016 at 11:38
1
Xem fiddle nàyFIDDLE
cộng
.content .line { right: 0; }.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }<div class="content"> <div class="line"></div> </div>
Mistermansam
23.8K11 Huy hiệu vàng68 Huy hiệu bạc88 Huy hiệu đồng11 gold badges68 silver badges88 bronze badges
Đã trả lời ngày 2 tháng 6 năm 2016 lúc 11:46Jun 2, 2016 at 11:46
Jinu Kurianjinu KurianJinu Kurian
8,5373 Huy hiệu vàng23 Huy hiệu bạc34 Huy hiệu đồng3 gold badges23 silver badges34 bronze badges
1
Đã hỏi ngày 2 tháng 6 năm 2016 lúc 11:38
@keyframes dude { 0% { left: 100%; } 100% { left: 0; } }Xem fiddle này
cộngJun 2, 2016 at 11:44
Mistermansamtszarzynski
23.8K11 Huy hiệu vàng68 Huy hiệu bạc88 Huy hiệu đồng7 silver badges15 bronze badges
1
Đã trả lời ngày 2 tháng 6 năm 2016 lúc 11:46
animation: dude .75s 1 reverse;Jinu Kurianjinu KurianJun 2, 2016 at 13:03
Cố gắng làm động thuộc tính "trái" thay vì chiều rộng vì phần tử của bạn đã có vị trí được đặt thành tuyệt đối.devellopah
VĨ CẦM2 silver badges15 bronze badges
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Đọc
Bàn luận The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.
Chuyển động tuyến tính của một đường thẳng có nghĩa là đường sẽ bắt đầu từ một điểm, đi đến điểm thứ hai, và sau đó quay trở lại điểm bắt đầu. Đó là một loại chuyển động. Chúng tôi sẽ chỉ sử dụng CSS. In HTML, we have created a div element that is used to make a straight line.
<!DOCTYPE html>
Cách tiếp cận: Cách tiếp cận là trước tiên tạo ra một đường thẳng và sau đó làm động nó bằng cách sử dụng các khung chính. Nó sẽ được thực hiện trong một bước. Đầu tiên để chuyển tiếp chuyển động và thứ hai cho chuyển động lạc hậu. Mã dưới đây sẽ tuân theo cách tiếp cận tương tự.
<div class="content"> <div class="line"></div> </div>0<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
HTML: Trong HTML, chúng tôi đã tạo ra một phần tử div được sử dụng để tạo một đường thẳng.
____10<div class="content"> <div class="line"></div> </div>1 <div class="content"> <div class="line"></div> </div>2<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>4<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content .line { right: 0; } 1 .content .line { right: 0; } 2<div class="content"> <div class="line"></div> </div>3.content .line { right: 0; } 4 .content .line { right: 0; } 5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }9<div class="content"> <div class="line"></div> </div>0.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }9<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>0<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content .line { right: 0; } 1 .content .line { right: 0; } 9<div class="content"> <div class="line"></div> </div>3.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }1 .content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }2<div class="content"> <div class="line"></div> </div>3
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>1<div class="content"> <div class="line"></div> </div>5
CSS:
- .content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }5 .content .line { right: 0; } 5
- Các
- Tạo một đường thẳng bằng cách cung cấp chiều cao và chiều rộng tối thiểu của sở thích của bạn.
animation: dude .75s 1 reverse; 4
<div class="content"> <div class="line"></div> </div>9animation: dude .75s 1 reverse; 6
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation: dude .75s 1 reverse; 8animation: dude .75s 1 reverse; 9animation-direction0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation-direction3animation: dude .75s 1 reverse; 9animation-direction0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation-direction8animation: dude .75s 1 reverse; 9reverse0animation-direction1
<div class="content"> <div class="line"></div> </div>9reverse3
<div class="content"> <div class="line"></div> </div>9reverse5
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse7animation: dude .75s 1 reverse; 9reverse9animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<!DOCTYPE html>2animation: dude .75s 1 reverse; 9<!DOCTYPE html>4animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation-direction8animation: dude .75s 1 reverse; 9<!DOCTYPE html>9animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>02animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>04animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>07animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>09animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>12animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>09animation-direction1
Phúc âm đường thẳng này bằng cách sử dụng trước khi chọn và cung cấp cho nó một hình ảnh động tuyến tính với định danh KeyFrames có tên là Animate.
<div class="content"> <div class="line"></div> </div>9reverse3
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>25
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }2animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>29animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>02animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>04animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>07animation: dude .75s 1 reverse; 9animation-direction0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>12animation: dude .75s 1 reverse; 9animation-direction0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse7animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>49animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<!DOCTYPE html>2animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>49animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation-direction8animation: dude .75s 1 reverse; 9reverse0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>62<div class="content"> <div class="line"></div> </div>63<div class="content"> <div class="line"></div> </div>64
<div class="content"> <div class="line"></div> </div>9reverse3
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>68
Hoạt hình cho KeyFrames rất đơn giản. Đối với nửa khung đầu tiên tạo ra chiều rộng 100%(chuyển động chuyển tiếp) và sau đó giảm xuống 0%(chuyển động ngược) cho nửa khung tiếp theo.
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>17<div class="content"> <div class="line"></div> </div>18<div class="content"> <div class="line"></div> </div>19<div class="content"> <div class="line"></div> </div>18<div class="content"> <div class="line"></div> </div>21
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>70 <div class="content"> <div class="line"></div> </div>71
<div class="content"> <div class="line"></div> </div>72<div class="content"> <div class="line"></div> </div>12animation: dude .75s 1 reverse; 9<div class="content"> <div class="line"></div> </div>49animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
Hoạt hình cho KeyFrames rất đơn giản. Đối với nửa khung đầu tiên tạo ra chiều rộng 100%(chuyển động chuyển tiếp) và sau đó giảm xuống 0%(chuyển động ngược) cho nửa khung tiếp theo.
<div class="content"> <div class="line"></div> </div>72<div class="content"> <div class="line"></div> </div>12animation: dude .75s 1 reverse; 9animation-direction0animation-direction1
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
<div class="content"> <div class="line"></div> </div>9reverse3
.content .line { right: 0; } 01
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>17<div class="content"> <div class="line"></div> </div>18<div class="content"> <div class="line"></div> </div>19<div class="content"> <div class="line"></div> </div>18<div class="content"> <div class="line"></div> </div>21 In this section, we will combine both HTML and CSS code to make a straight line animation effect.
<!DOCTYPE html>
Cách tiếp cận: Cách tiếp cận là trước tiên tạo ra một đường thẳng và sau đó làm động nó bằng cách sử dụng các khung chính. Nó sẽ được thực hiện trong một bước. Đầu tiên để chuyển tiếp chuyển động và thứ hai cho chuyển động lạc hậu. Mã dưới đây sẽ tuân theo cách tiếp cận tương tự.
<div class="content"> <div class="line"></div> </div>0<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
HTML: Trong HTML, chúng tôi đã tạo ra một phần tử div được sử dụng để tạo một đường thẳng.
____10<div class="content"> <div class="line"></div> </div>1 <div class="content"> <div class="line"></div> </div>2<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>4<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content .line { right: 0; } 1 .content .line { right: 0; } 2<div class="content"> <div class="line"></div> </div>3.content .line { right: 0; } 4 .content .line { right: 0; } 5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }9<div class="content"> <div class="line"></div> </div>5
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4.content .line { right: 0; } 35
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4.content .line { right: 0; } 37
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>3.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }9<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content .line { right: 0; } 44<div class="content"> <div class="line"></div> </div>5
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4animation: dude .75s 1 reverse; 6
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 49
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>0.content .line { right: 0; } 1 .content .line { right: 0; } 9<div class="content"> <div class="line"></div> </div>3.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }1 .content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }2<div class="content"> <div class="line"></div> </div>3
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 53
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse5
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 59
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 61
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 63
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 65
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 67
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 69
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 71
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4<div class="content"> <div class="line"></div> </div>25
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 77
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 65
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 81
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 83
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 85
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 87
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 53
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 91
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }5 .content .line { right: 0; } 5
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 97
.content .line { right: 0; } 98.content .line { right: 0; } 83
<div class="content"> <div class="line"></div> </div>72reverse3
<div class="content"> <div class="line"></div> </div>72.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }03
.content .line { right: 0; } 98.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }05
<div class="content"> <div class="line"></div> </div>72reverse3
<div class="content"> <div class="line"></div> </div>72.content .line { right: 0; } 97
.content .line { right: 0; } 98.content .line { right: 0; } 83
<div class="content"> <div class="line"></div> </div>72reverse3
.content { width: 400px; height: 200px; color: white; cursor: pointer; text-transform: uppercase; padding-bottom: 20px; position: relative; background: #333; } .content .line { height: 2px; background: white; position: absolute; top: 10px; right: 0; -webkit-animation: dude .75s 1 forwards; animation: dude .75s 1 forwards; } @-webkit-keyframes dude { 0% { width: 0; } 100% { width: 100%; } } @keyframes dude { 0% { width: 0; } 100% { width: 100%; } }4reverse3
<div class="content"> <div class="line"></div> </div>9<div class="content"> <div class="line"></div> </div>3.content .line { right: 0; } 44<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>0<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
Các
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>7<div class="content"> <div class="line"></div> </div>5
<div class="content"> <div class="line"></div> </div>3<div class="content"> <div class="line"></div> </div>1<div class="content"> <div class="line"></div> </div>5
Output: