Share code web tỏ tình mới nhất

Đây là code mình tự vẽ ảnh và tự viết. Mình sử dụng HTML5, CSS3, BS 4 và Javascript để làm. Vì mình dùng Bootstrap 4 vì vậy có tính năng thích hợp đa thiết bị. Có nghĩa là nó sẽ hoạt động giải trí tốt trên giao diện điện thoại cảm ứng .

Giao diện website

Mình code 3 trang chính theo thứ tự trang trình làng, thông tin và ở đầu cuối là trang chính với một bức thư tình. Mình chọn font chữ dạng script ( viết tay ) để cho nó giống một bức thư thật sự. Dưới đây là hình ảnh minh họa cho 3 trang chính của mình.

Trang giới thiệu

Trang ra mắt khi mới vào sẽ có hiệu ứng vẽ tim bằng svg và nhấp nháy rất đáng yêu và dễ thương. Hai nút bấm xấp xỉ với hai tính năng khác nhau. Mình sẽ để bạn tự mày mò nhé ! ! Khi bạn rê chuột lên chữ Click Here cũng sẽ có hiệu ứng .
Khi bạn ấn vào chữ Click Here thì sẽ chuyển sang trang 2 và đưa thông tin cho cô ấy .

Lá thư sẽ nhảy nhảy đáng yêu và dễ thương lắm. Trang này là trang có hiệu ứng nhiều nhất và cũng mất nhiều sức lực lao động của mình lắm đấy. Khi bạn rê chuột vào lá thư sẽ được chuyển sang trang 3. Nơi đó sẽ có một lá thư tình ! ! !

Đây chỉ là bức thư tình đơn thuần tất cả chúng ta sẽ tự viết. Nhưng mình chắc bất kể cô gái nào nhận lá thư như thế này cũng cảm động lắm.

Hướng dẫn sử dụng Code web tỏ tình

Trước khi tải về, mình sẽ hướng dẫn bạn sử dụng và chỉnh sửa nội dung theo ý bạn. Xin nhắc lại đây là web tỏ tình do mình tự code. Mong bạn tôn trọng bản quyền của mình để mình không tuyệt vọng nhé !

Hãy chắc chắn tải đủ các file như ảnh trên nhé ! Giao diện được code trong 2 file index.html và index2.html, bạn sẽ chỉnh giao diện trong hai file này.

Chỉnh sửa giao diện trang 1 và trang 2

Bạn nên dùng phím tắt Ctrl + F trong trình chỉnh sửa của bạn để tìm những chỗ mình nói cho nhanh. Mình đang sử dụng Sublime Text 3 để code và chỉnh sửa các file code. Bây giờ hãy vào file index.html để chỉnh sửa nội dung.

Bạn có thể chỉnh sửa tên hiển thị trên Tab (thẻ của trình duyệt) theo ý bạn mong muốn. Hãy tìm thẻ

Thẻ div có chứa class “ firstclk ” sẽ là nơi bạn chỉnh sửa nội dung của chữ Click Here. Tuy nhiên, đáng buồn là Font chữ của chữ Click Here không tương hỗ tiếng việt. Cho nên mình mới để tiếng anh cho đẹp luôn và chữ này cũng không khó hiểu với bất kỳ ai .

Phần nhịp tim của anh do có hoạt động đếm cho nên vì thế mình viết bên file myscript.js trong thư mục javascript. Bạn mở lên và tìm chữ “ Nhịp tim của anh ” và chỉnh lại nhé .

Để chỉnh sửa nhạc nền thì kéo xuống cuối file index.html và tìm thẻ audio và đổi thành tên tương ứng trong Folder music nhé. Bạn hoàn toàn có thể tải bài nhạc bạn muốn về và để trong thư mục ( thư mục ) music. Sau đó đổi tên mySong. mp4 thành tên bài nhạc bạn đã tải .

Ở trang tỏ tình thứ hai này do mình thiết kết hiệu ứng vẽ Javascript khá ngặt nghèo và khắc nghiệt. Nên bạn chỉ hoàn toàn có thể chỉnh lại dòng chữ “ Tớ có điều muốn nói … ”. Để tránh bị bể giao diện Bootstrap nên bạn chỉ nên chỉnh dòng chữ này thôi .

Hãy tìm kiếm bằng phím tắt cho nhanh bạn nhé !

Chỉnh sửa nội dung trang 3 của code web tỏ tình

Trang 3 thì mình phong cách thiết kế mục tiêu chính của việc tỏ tình. Cho nên làm đơn thuần, dễ chỉnh sửa cho bạn thuận tiện đổi khác nội dung lại. Bây giờ, bạn hãy mở file index2.html để chỉnh sửa trang thứ 3 của web tỏ tình .

Vừa vào là bạn sẽ thấy luôn toàn bộ nội dung trong file index2.html nhé. Hãy chỉnh lại theo ý bạn muốn. Lưu ý là chỗ class something có code javascript hiệu ứng, do đó không nên ghi dài quá dễ bị bể khi qua điện thoại thông minh nhé !

Vậy là xong, sau khi chỉnh sửa thì chỉ còn upload hàng loạt code web tỏ tình lên host và gửi cho bạn nữ kia thôi. Chúc các bác niềm hạnh phúc nhé !

Download hàng loạt Soure Code Web tỏ tình