Prompt Title: CSS Slide-in Effect

Created 1 year ago
Votes 0
Views 220 times
0
Human: <div>tạo hiệu ứng css hiện từ từ thẻ div từ phải sang trái</div>
ChatGPT:

Để tạo hiệu ứng CSS hiện từ từ thẻ <div> từ phải sang trái, bạn có thể sử dụng thuộc tính animation kết hợp với keyframes. Dưới đây là ví dụ code CSS để tạo hiệu ứng đó:

css
/* CSS */ @keyframes slide-in { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .slide-in { animation: slide-in 1s ease-out; }
html
<!-- HTML --> <div class="slide-in">Nội dung của div</div>

Trong đoạn CSS trên, chúng ta định nghĩa keyframes slide-in để điều khiển hiệu ứng. Tại thời điểm 0%, thẻ <div> sẽ bị dịch chuyển sang phải 100% và có độ mờ (opacity) bằng 0. Tại thời điểm 100%, thẻ <div> sẽ không còn bị dịch chuyển và có độ mờ bằng 1.

Sau đó, chúng ta gán animation slide-in có thời gian 1s và hiệu ứng dễ dàng (ease-out) cho class slide-in. Khi bạn áp dụng class này cho thẻ <div>, hiệu ứng sẽ được kích hoạt và thẻ <div> sẽ hiển thị từ phải sang trái một cách mượt mà.

Chú ý: Bạn có thể tùy chỉnh thời gian và hiệu ứng của animation theo ý muốn bằng cách thay đổi các giá trị trong keyframes và animation.

avatar
Fiber
Shared 46 prompts
Created 1 year ago

Leave a Comment

Related Tag Prompts

0
0
0
0
테스트
1 year ago 2023-03-09 08:28:41 ccheol
0
0
JAVA
1 year ago 2023-03-10 06:28:43 GCOMS
0
0
Google QA Test Cases
1 year ago 2023-03-13 12:22:35 Virtual QA
0
0
CHAT GPT Features.
1 year ago 2023-03-14 04:32:28 Jace
0
0
Social Media Tips.
1 year ago 2023-03-17 06:07:49 debug
0
0
恢复ChatGPT设置
1 year ago 2023-03-18 07:17:56 111
0
0
페이스북 전환 API 구현
1 year ago 2023-03-20 06:32:19 TEST
0
0
面子书帖子简化
1 year ago 2023-03-23 13:05:52 Junn
0
0
Name not available.
1 year ago 2023-03-25 13:00:08 lena
0
0
중국어 단어 테스트
1 year ago 2023-03-25 16:42:28 ms223
0
0
Oils: Benefits and Neglect.
1 year ago 2023-03-31 00:45:44 fred
0
0
0
0
Outline Request: Title.
1 year ago 2023-04-03 17:28:40 LIM
0
0
Late Payment Reminder.
1 year ago 2023-04-04 16:01:35 Brian Gerstner
0
0
JS Console Output.
1 year ago 2023-04-07 10:22:10 Author
0
0
Skirt Styles Guide.
1 year ago 2023-04-11 07:37:42 Fiber
0
0
App Pitch Assistance
1 year ago 2023-04-11 16:49:48 test test
0
0
Luxury Product Introduction.
1 year ago 2023-04-14 02:26:52 hill_man
0
0
0
0
E-commerce in Mexico
1 year ago 2023-04-28 19:55:40 Rodrigo
0
0
Unable to Run Features.
1 year ago 2023-05-11 10:48:29 shiva
0
0
Testing Requ▋
1 year ago 2023-05-12 01:03:51 hi