Từ lâu rồi, mình thấy các bạn muốn có một website tỏ tình mà tìm trên mạng toàn code cũ. Không thích hợp với điện thoại thông minh và đã có nhiều người biết rồi. Cho nên ngày hôm nay, mình share cho bạn code web tỏ tình .
Đâ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 .

Lưu ý

Các Iphone cũ có hệ quản lý và điều hành IOS 9.1 trở xuống sẽ không chạy được tính năng vẽ hình. Vì Ios chưa tương hỗ javascript nhiều trên IOS 9. Bạn nào dùng IOS 10 thì tự do nhé ! ! Code này sẽ đẹp và nét nhất khi chạy trên trình duyệt Chrome .
Các trình duyệt khác vẫn chạy nhưng mình thấy không nét bằng Chrome .
Xem demo tại đây
Video ra đời

Giaodiệ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

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

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

Khi mở trên điện thoại Xiaomi A1 của mình.

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

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

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 .

Trang 2

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

Trang 2 trên giao diện điện thoại

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

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 ! ! !

Trang 3

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

Trang 3 trên điện thoại

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

Đâ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 AnonyViet

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é !

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

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.

Đối với trang 1

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

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

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ẻ và chỉnh sửa lại nội dung bạn muốn.

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

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

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 .

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

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é .

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

Để 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 .

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

Đối với trang 2

Ở 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 .

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

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

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

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 .

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

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é !

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

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

Drive| Fshare

Nhớ bỏ lỡ quảng cáo để ủng hộ mình nha .
Bản quyền thuộc về Lmint – anonyviet. Bạn nào có vướng mắc thì liên hệ Facebook của mình nhé !

Chúc bạn thành công
Lmint.