Sau bài viết về hiệu ứng mây trôi trong CSS đã thu hút khá nhiều lượt view và like, bài viết này tôi tiếp tục chia sẻ cho các bạn cách làm tranh treo tường đung đưa theo gió bằng CSS dùng để trang trí cho blog cá nhân hoặc phần notice khá cool
Cũng giống như bài hiệu ứng mây trôi trong CSS, bài viết này sẽ không có demo, và phần download code, tất cả những gì bạn cần làm để chiêm ngưỡng thành quả của mình là phải bắt tay vào làm thử. OK?
Xem qua demo bằng ảnh thôi cho dễ hình dung:
Cái khung tranh của chúng ta sẽ đung đưa theo gió, còn cái chữ bên trong cũng đung đưa theo, tạo hiệu ứng như thật luôn nhé.
Để làm cái này, chúng ta cần 1 thẻ div nồng trong thẻ span như sau
|
1 |
<span><div>Hello World!</div></span> |
Chữ “Hello world!” bạn có thể thay bằng chữ của bạn, nếu không có thể bỏ trống.
Tiếp theo tới phần CSS. Phần đầu tiên, là tạo nền cho body và thẻ div cũng như các style về chữ.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
body { background: lightblue; padding-top: 30px; } div { background: #fff url(https://www.telescopes-astronomy.com.au/world_map_wallpaper2.jpg); background-size: cover; font-size: 50px; width: 400px; padding: 90px 0px; text-align: center; border-radius: 5px; box-shadow: 0px 1px 3px rgba(0,0,0,0.2), 0 0 1px 5px #FFF inset; text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF; position: absolute; border: 1px solid #AAA; transform: translate(-100px,-20px) rotate(-45deg); } |
Tiếp theo là style cho thẻ span
|
1 2 3 4 5 6 7 8 9 10 11 12 |
span { margin: 0 auto; display: block; position: relative; width: 30px; height: 30px; background: transparent; border-radius: 3px; border: 1px solid black; animation: infinite swing 3s ease-in-out; transform-origin: 0 0; } |
các bạn chú ý thuộc tính “animation: infinite swing 3s ease-in-out” có giá trị swing, giá trị này chúng ta sẽ khai báo kiểu keyframes dạng rotate tạo hiệu ứng đung đưa
|
1 2 3 4 5 |
@keyframes swing { 0%{ transform: rotate(35deg); } 50%{ transform: rotate(55deg); } 100%{ transform: rotate(35deg); } } |
Vậy là xong, cùng chiêm ngưỡng đi nào, bạn có thể thay cái ảnh nền trong thẻ div bằng ảnh của bạn nhé.
hay thầy gửi 1 bản code để demo luôn vậy !!
cho em hỏi phần
@keyframes swing {
0%{ transform: rotate(35deg); }
50%{ transform: rotate(55deg); }
100%{ transform: rotate(35deg); }
}
mình viết ở đâu?
vì e là ng mới… mong thầy giúp
Viết ở trong file css nhé bạn