Viết Code Tỏ Tình Với HTML, CSS Và JS | Tìm ở đây

Trang chủ » Tải Code Web Tỏ Tình » Viết Code Tỏ Tình Với HTML, CSS Và JS | Tìm ở đây

Có thể bạn quan tâm

Skip to content
  • CSS / HTML / JavaScript / Thư giãn
  • 2
Viết code Tỏ tình với HTML, CSS và JS

Hướng dẫn các bạn cách viết code tỏ tình cực ngầu của dân IT chỉ với HTML, CSS và JavaScript.

1. Trang cuagai.html

<!DOCTYPE html> <html> <head> <title>Gửi lời yêu thương</title> <link rel="stylesheet" href="codetotinh.css" /> </head> <body bgcolor="#000000"> <center> <img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love1.gif" width="300" height="25"> </center> <h1 align="center"> <span style="background: url(&quot;https://timoday.edu.vn/d9f50c755f7e4d8626a518843017a8bc_44837304.partner.gif&quot;) repeat scroll 0% 0% transparent; color:#fff; text-shadow: 0pt 0pt 0.3em LightYellow, 0pt 2pt 0.3em LightYellow;"><b>GỬI LỜI YÊU THƯƠNG</b></span> </h1> <center> <img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love2.gif" width="300" height="25"> </center> <center> <p><img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love3.gif" width="460" height="433"></p> <img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love4.gif" alt="" width="220" border="0"> </center> <center> <img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love4.gif" width="700" height="8"><br> <font style="font-size: 11pt"> <font color="#FF0000" face="Comic Sans MS"></font> <font color="white" face="Comic Sans MS"></font> <marquee behavior="scroll" direction="left" scrollamount="2" scrolldelay="20" width="50%"><font face="Tahoma" size="2" color="#ffffff"> Bạn cho mình làm quen nhé hihi!</font></marquee><br> <img src="https://timoday.edu.vn/wp-content/uploads/2020/06/love5.gif" width="700" height="8"> </font> </center> <div style="left: 0pt; position: fixed; top: 0pt; z-index: 0;"> <!--<embed align="center" height="900px" width="2000px" src="images/chuot.swf" wmode="transparent"></embed>--></div> </body> </html>

2. Code css codetotinh.cs

img{ border: 0; }

3. Trang cuagai2.html

<!DOCTYPE > <html > <head> <script src="totinh.js"></script> <title>Gửi lời yêu thương</title> <link rel="stylesheet" type="text/css" href="totinh2.css"> </head> <body> <div> <div> <div style="left: 0pt; position: fixed; top: 0pt; z-index: 0;"> <!--<embed align="center" height="900px" width="2000px" src="images/chuot.swf" wmode="transparent"></embed>--> </div> <div> <p> <svg viewBox="0 0 800 600"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="35%" class="text--line" > TỚ LÀ </text> <text text-anchor="middle" x="50%" y="68%" class="text--line2" > DÂN IT </text> </symbol> <g class="g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg> </p> </div> </div> </body> </html>

4. Code JS totinh.js

//Code JS tạo tuyết rơi var snowStorm = null; function SnowStorm() { var imagePath = 'https://timoday.edu.vn/wp-content/uploads/2020/06/'; var flakesMax = 45; var flakesMaxActive = 45; var vMaxX = 2; var vMaxY = 2; var usePNG = false; var flakeBottom = null; var snowStick = false; var snowCollect = false; var targetElement = null; var followMouse = true; var flakeTypes = 4; var flakeWidth = 6; var flakeHeight = 6; var zIndex = 10; var flakeLeftOffset = 0; var flakeRightOffset = 0; var addEvent = function (o, evtName, evtHandler) { typeof (attachEvent) == 'undefined' ? o.addEventListener(evtName, evtHandler, false) : o.attachEvent('on' + evtName, evtHandler); } var removeEvent = function (o, evtName, evtHandler) { typeof (attachEvent) == 'undefined' ? o.removeEventListener(evtName, evtHandler, false) : o.detachEvent('on' + evtName, evtHandler); } var classContains = function (o, cStr) { return (typeof (o.className) != 'undefined' ? o.className.indexOf(cStr) + 1 : false); } var s = this; var storm = this; this.timers = []; this.flakes = []; this.disabled = false; this.terrain = []; this.active = false; var isIE = navigator.userAgent.match(/msie/i); var isIE6 = navigator.userAgent.match(/msie 6/i); var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i))); var isWin9X = navigator.appVersion.match(/windows 98/i); var isiPhone = navigator.userAgent.match(/iphone/i); var isOpera = navigator.userAgent.match(/opera/i); if (isOpera) isIE = false; var screenX = null; var screenX2 = null; var screenY = null; var scrollY = null; var vRndX = null; var vRndY = null; var windOffset = 1; var windMultiplier = 2; var pngSupported = (!isIE || (isIE && !isIE6 && !isOldIE)); var docFrag = document.createDocumentFragment(); this.oControl = null; if (flakeLeftOffset == null) flakeLeftOffset = 0; if (flakeRightOffset == null) flakeRightOffset = 0; function rnd(n, min) { if (isNaN(min)) min = 0; return (Math.random() * n) + min; } this.randomizeWind = function () { vRndX = plusMinus(rnd(vMaxX, 0.2)); vRndY = rnd(vMaxY, 0.2); if (this.flakes) { for (var i = 0; i < this.flakes.length; i++) { if (this.flakes[i].active) this.flakes[i].setVelocities(); } } } function plusMinus(n) { return (parseInt(rnd(2)) == 1 ? n * -1 : n); } this.scrollHandler = function () { scrollY = (flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || document.body.scrollTop)); if (isNaN(scrollY)) scrollY = 0; if (!flakeBottom && s.flakes) { for (var i = 0; i < s.flakes.length; i++) { if (s.flakes[i].active == 0) s.flakes[i].stick(); } } } this.resizeHandler = function () { if (window.innerWidth || window.innerHeight) { screenX = window.innerWidth - (!isIE ? 16 : 2) - flakeRightOffset; screenY = (flakeBottom ? flakeBottom : window.innerHeight); } else { screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - flakeRightOffset; screenY = flakeBottom ? flakeBottom : (document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight); } screenX2 = parseInt(screenX / 2); } this.resizeHandlerAlt = function () { screenX = targetElement.offsetLeft + targetElement.offsetWidth - flakeRightOffset; screenY = flakeBottom ? flakeBottom : targetElement.offsetTop + targetElement.offsetHeight; screenX2 = parseInt(screenX / 2); } this.freeze = function () { if (!s.disabled) { s.disabled = 1; } else { return false; } for (var i = 0; i < s.timers.length; i++) { clearInterval(s.timers[i]); } } this.resume = function () { if (s.disabled) { s.disabled = 0; } else { return false; } s.timerInit(); } this.toggleSnow = function () { if (!s.flakes.length) { s.start(); s.setControlActive(true); } else { s.active = !s.active; if (s.active) { s.show(); s.resume(); s.setControlActive(true); } else { s.stop(); s.freeze(); s.setControlActive(false); } } } this.setControlActive = function (bActive) {} this.stop = function () { this.freeze(); for (var i = this.flakes.length; i--;) { this.flakes[i].o.style.display = 'none'; } removeEvent(window, 'scroll', s.scrollHandler); removeEvent(window, 'resize', s.resizeHandler); if (!isIE) { removeEvent(window, 'blur', s.freeze); removeEvent(window, 'focus', s.resume); } } this.show = function () { for (var i = this.flakes.length; i--;) { this.flakes[i].o.style.display = 'block'; } } this.SnowFlake = function (parent, type, x, y) { var s = this; var storm = parent; this.type = type; this.x = x || parseInt(rnd(screenX - 20)); this.y = (!isNaN(y) ? y : -rnd(screenY) - 12); this.vX = null; this.vY = null; this.vAmpTypes = [2.0, 1.0, 1.25, 1.0, 1.5, 1.75]; this.vAmp = this.vAmpTypes[this.type]; this.active = 1; this.o = document.createElement('img'); this.o.style.position = 'absolute'; this.o.style.width = flakeWidth + 'px'; this.o.style.height = flakeHeight + 'px'; this.o.style.fontSize = '1px'; this.o.style.zIndex = zIndex; this.o.src = imagePath + this.type + (pngSupported && usePNG ? '.png' : '.gif'); docFrag.appendChild(this.o); this.refresh = function () { s.o.style.left = s.x + 'px'; s.o.style.top = s.y + 'px'; } this.stick = function () { if (isIE6 || isiPhone || (targetElement != document.documentElement && targetElement != document.body)) { s.o.style.top = (screenY + scrollY - flakeHeight - storm.terrain[Math.floor(s.x)]) + 'px'; } else { s.o.style.display = 'none'; s.o.style.top = 'auto'; s.o.style.bottom = '0px'; s.o.style.position = 'fixed'; s.o.style.display = 'block'; } } this.vCheck = function () { if (s.vX >= 0 && s.vX < 0.2) { s.vX = 0.2; } else if (s.vX < 0 && s.vX > -0.2) { s.vX = -0.2; } if (s.vY >= 0 && s.vY < 0.2) { s.vY = 0.2; } } this.move = function () { s.x += s.vX * windOffset; s.y += (s.vY * s.vAmp); s.refresh(); if (s.vX && screenX - s.x < flakeWidth + (s.vX * windOffset)) { s.x = 0; } else if ((s.vX < 0 || windOffset < 0) && s.x - flakeLeftOffset < 0 - flakeWidth) { s.x = screenX - flakeWidth; } var yDiff = screenY + scrollY - s.y - storm.terrain[Math.floor(s.x)]; if (yDiff < flakeHeight) { s.active = 0; if (snowCollect && snowStick) { var height = [0.75, 1.5, 0.75]; for (var i = 0; i < 2; i++) { storm.terrain[Math.floor(s.x) + i + 2] += height[i]; } } s.o.style.left = (s.x / screenX * 100) + '%'; if (!flakeBottom) { if (snowStick) { s.stick(); } else { s.recycle(); } } } } this.animate = function () { s.move(); } this.setVelocities = function () { s.vX = vRndX + rnd(vMaxX * 0.12, 0.1); s.vY = vRndY + rnd(vMaxY * 0.12, 0.1); } this.recycle = function () { s.o.style.display = 'none'; s.o.style.position = 'absolute'; s.o.style.bottom = 'auto'; s.setVelocities(); s.vCheck(); s.x = parseInt(rnd(screenX - flakeWidth - 20)); s.y = parseInt(rnd(screenY) * -1) - flakeHeight; s.o.style.left = s.x + 'px'; s.o.style.top = s.y + 'px'; s.o.style.display = 'block'; s.active = 1; } this.recycle(); this.refresh(); } this.snow = function () { var active = 0; var used = 0; var waiting = 0; for (var i = s.flakes.length; i--;) { if (s.flakes[i].active == 1) { s.flakes[i].move(); active++; } else if (s.flakes[i].active == 0) { used++; } else { waiting++; } } if (snowCollect && !waiting) { s.createSnow(flakesMaxActive, true); } if (active < flakesMaxActive) { with(s.flakes[parseInt(rnd(s.flakes.length))]) { if (!snowCollect && active == 0) { recycle(); } else if (active == -1) { active = 1; } } } } this.mouseMove = function (e) { if (!followMouse) return true; var x = parseInt(e.clientX); if (x < screenX2) { windOffset = -windMultiplier + (x / screenX2 * windMultiplier); } else { x -= screenX2; windOffset = (x / screenX2) * windMultiplier; } } this.createSnow = function (limit, allowInactive) { for (var i = 0; i < limit; i++) { s.flakes[s.flakes.length] = new s.SnowFlake(s, parseInt(rnd(flakeTypes))); if (allowInactive || i > flakesMaxActive) s.flakes[s.flakes.length - 1].active = -1; } targetElement.appendChild(docFrag); } this.timerInit = function () { s.timers = (!isWin9X ? [setInterval(s.snow, 20)] : [setInterval(s.snow, 75), setInterval(s.snow, 25)]); } this.init = function () { for (var i = 0; i < 2048; i++) { s.terrain[i] = 0; } s.randomizeWind(); s.createSnow(snowCollect ? flakesMaxActive : flakesMaxActive * 2); addEvent(window, 'resize', s.resizeHandler); addEvent(window, 'scroll', s.scrollHandler); if (!isIE) { addEvent(window, 'blur', s.freeze); addEvent(window, 'focus', s.resume); } s.resizeHandler(); s.scrollHandler(); if (followMouse) { addEvent(document, 'mousemove', s.mouseMove); } s.timerInit(); } var didInit = false; this.start = function (bFromOnLoad) { if (!didInit) { didInit = true; } else if (bFromOnLoad) { return true; } if (typeof targetElement == 'string') { targetElement = document.getElementById(targetElement); if (!targetElement) throw new Error('Snowstorm: Unable to get targetElement'); } if (!targetElement) { targetElement = (!isIE ? (document.documentElement ? document.documentElement : document.body) : document.body); } if (targetElement != document.documentElement && targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt; s.resizeHandler(); if (screenX && screenY && !s.disabled) { s.init(); s.active = true; } } if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { s.start(true) }, false); window.addEventListener('load', function () { s.start(true) }, false); } else { addEvent(window, 'load', function () { s.start(true) }); } } snowStorm = new SnowStorm();

5. Code CSS totinh2.css

body{ background-image: url("images/anhnen2.jpg"); background-repeat: no-repeat; background-position: center center; background-size: 100%; font: 16em/1 Arial; } .text--line { font-size: .5em; } svg { position: absolute; width: auto; height: 250px; padding:2px; border-radius: 20px; } .text-copy { fill: none; stroke: white; stroke-dasharray: 7% 28%; stroke-width: 3px; animation: stroke-offset 4s infinite linear; } .text-copy:nth-child(1) { stroke: #360745; stroke-dashoffset: 7%; } .text-copy:nth-child(2) { stroke: #D61C59; stroke-dashoffset: 14%; } .text-copy:nth-child(3) { stroke: #E7D84B; stroke-dashoffset: 21%; } .text-copy:nth-child(4) { stroke: #EFEAC5; stroke-dashoffset: 28%; } .text-copy:nth-child(5) { stroke: #F8F8FF; stroke-dashoffset: 35%; } @keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; } } p{ padding-top: 300px; padding-left: 170px; }

Tags: Thiết kế webthủ thuật

  • Next story Bài 2: Google Classroom: Tạo và gửi thông báo, tài liệu học tập, bài tập thực hành
  • Previous story Bài1: Hướng dẫn tạo Lớp học Online với Google Classroom

You may also like...

  • Khoá học về html5 1

    Bài 40: Audio trong HTML

    05/10/2016

    by Trịnh Hồng · Published 05/10/2016

  • funny, hài 0

    Khi nam IT kết hôn với nữ IT

    07/08/2016

    by Phan Tiến · Published 07/08/2016 · Last modified 25/09/2019

  • Khoá học về HTML 0

    Bài 16: Bảng trong HTML

    27/01/2016

    by Trịnh Hồng · Published 27/01/2016

2 Responses

  • Comments2
  • Pingbacks0
  1. lê đức mạnh viết: 17/07/2020 lúc 8:58 chiều

    ko có demo ạ ?

    Đăng nhập để bình luận
    • lê đức mạnh viết: 17/07/2020 lúc 8:59 chiều

      em không đọc kỹ

      Đăng nhập để bình luận

Để lại một bình luận Hủy

Bạn phải đăng nhập để gửi bình luận.

Follow:

  • Recent Posts
  • Popular Posts
  • Recent Comments
  • Tags
  • sqlite

    Khoá học / SQLite

    Bài 2: Cài đặt công cụ và Làm quen với DB Browser for SQLite

    17/12/2025

  • sqlite

    Khoá học / SQLite

    Bài 1: Tổng quan về SQLite – Cơ sở dữ liệu nhỏ gọn nhưng mạnh mẽ

    14/12/2025

  • Học Python

    Khoa học dữ liệu

    Hướng dẫn tạo môi trường ảo Python trên Windows và MacOs

    06/12/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 7: Nhập/Xuất trong Java

    28/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 6: Chuyển đổi kiểu dữ liệu

    25/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 5: Biến và kiểu dữ liệu trong Java

    22/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 4: Tạo dự án Java đầu tiên bằng IntelliJ

    19/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 3: Cài đặt IntelliJ – IDE tốt nhất cho Java

    19/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 2: Cài đặt JDK – Java Development Kit

    18/11/2024

  • Lập trình Java căn bản

    Lập trình Java

    Bài 1: Giới thiệu về ngôn ngữ lập trình Java

    18/11/2024

  • python pyqt

    PyQt6 và Qt Designer

    Tìm hiểu về QLineEdit trong PyQt6

    04/11/2024

  • python pyqt

    PyQt6 và Qt Designer

    Tìm hiểu về QPushButton trong PyQt6

    21/10/2024

  • python pyqt

    PyQt6 và Qt Designer

    Tìm hiểu về QLabel trong PyQt6

    17/10/2024

  • python pyqt

    PyQt6 và Qt Designer

    Giới thiệu Signals và Slots trong PyQt

    12/09/2024

  • Trò chơi Hamster Kombat

    Tin tức

    Với 250 triệu người chơi, Hamster Kombat đang là mục tiêu tấn công của phần mềm độc hại

    24/07/2024

  • Màn hình xanh chết chóc

    Tin tức

    Màn hình xanh chết chóc (Blue Screen) là gì?

    21/07/2024

  • Cách bảo vệ an toàn trên Internet

    Tin tức

    Khuyến nghị để đảm bảo an toàn thông tin khi truy cập Internet

    19/07/2024

  • python pyqt

    PyQt6 và Qt Designer

    PyQt6 Hello World

    15/07/2024

  • python pyqt

    PyQt6 và Qt Designer

    Giới thiệu về công cụ Qt Designer

    11/07/2024

  • python pyqt

    PyQt6 và Qt Designer

    Giới thiệu về thư viện PyQt6

    04/07/2024

  • Phan Tiến says: Em search thư viện này trên google rồi tải về, để...
  • [email protected] says: Bản 64bit bị thiếu file MTCH.dll thầy ơi
  • bichhuynh says: dạ anh ơi cho em hỏi chức năng doubleclick ở form...
  • Giới thiệu về thư viện PyQt6 | Tìm ở đây says: […] Trước khi bắt đầu lập trình xây dựng giao diện...
  • Xác thực Password với biểu thức chính quy (Regular Expression) trong Python | Tìm ở đây says: […] bài viết trước, ta được tìm hiểu về cách Xác...
  • Minh Nguyen says: Cho em hỏi là em code giống vs mẫu sao lúc...
  • zsaka2003 says: còn mục hàng tồn và doanh thu đâu ạ??
  • zsaka2003 says: thưa thầy em gặp phải lỗi như bên dưới thì sửa...
  • Phan Tiến says: Theo em số nào số lẻ? Nếu em kiểm tra được...
  • nha says: Dạ em chào thầy em đang làm đề tài này,thầy cho...
  • viet5121198 says: Thầy ơi em bị ntn làm cách nào để sửa ạ...
  • Phan Tiến says: Mình đang hiểu bạn đang hỏi về hệ quản trị cơ...
  • Bài 9: Biến và câu lệnh khai báo biến | Tìm ở đây says: […] kiểu dữ liệu cho biến sao cho phù hợp. <tên...
  • NinhAql says: Cho em hỏi là bài này mình sử dụng cấu trúc...
  • Bài 5: Cấu trúc chung của chương trình C++ | Tìm ở đây says: […] Xét lại chương trình đầu tiên được nhắc đến trong...
  • thinhbsua123 says: gán hết rồi vẫn bị ạ
  • sondinh03 says: EM muốn đăng ký thì phải làm gì ạ?
  • kuchiba123 says: Dạ anh ơi cho em hỏi lỗi lúc e chạy thử...
  • thanhlam212 says: Bài giảng rất đầy đủ và dễ hiểu ạ, mong thầy...
  • tien_tx1210 says: thầy ơi, thầy xem giúp em lỗi này là bị gì...
  • .NET C# Computer Graphic CSS Công nghệ phần mềm GIS Google Classroom google maps html html5 học css Học lập trình học python Java JavaScript kiểm thử cho thiết bị di động Kiểm thử phần mềm lap trinh lập trình C# lập trình C/C++ lập trình cơ sở dữ liệu Lập trình Java Lập trình phân tán lập trình python lập trình scratch Lập trình đồ hoạ máy tính MS Excel ngôn ngữ C OpenGL PHP phát triển phần mềm Phần mềm học trực tuyến python Sharepoint SQL SQL Server Sử dụng mảng CSharp T-SQL testing application testing mobile thủ thuật Excel tin học ứng dụng Tính toán song song xử lý số liệu Đồ hoạ máy tính

More

Danh mục

  • .Net (39)
  • Access (1)
  • Android (2)
  • API (1)
  • Bài báo (2)
  • Bài tập C/C++ (9)
  • Bài tập Java (43)
  • Bài tập Python (24)
  • Cấu trúc dữ liệu và giải thuật (1)
  • CSS (49)
  • Demo (1)
  • Excel (31)
  • GIS (14)
  • Google Maps (7)
  • Học lập trình Python (2)
  • Học Lập trình qua Project (5)
  • HTML (55)
  • JavaScript (4)
  • Khoá học (218)
  • Khoa học dữ liệu (1)
  • Kiểm thử phần mềm (15)
  • Kiểm thử ứng dụng di động (3)
  • Lập trình C (26)
  • Lập trình C++ (9)
  • Lập trình Java (7)
  • Lập trình Mobile (2)
  • Lập trình Scratch (15)
  • Learning English (1)
  • Nghiên cứu (5)
  • Phát triển ứng dụng (2)
  • Phát triển ứng dụng WEB (1)
  • PHP (12)
  • PowerPoint (4)
  • PyQt6 và Qt Designer (7)
  • Python (6)
  • Sách, bài giảng (25)
  • SEO (1)
  • Sharepoint (4)
  • SQL (22)
  • SQLite (2)
  • Tài liệu (24)
  • Thư giãn (8)
  • Thủ thuật (33)
  • Tin học văn phòng (44)
  • Tin học đại cương (9)
  • Tin tức (31)
  • Tính toán phân tán (3)
  • Tính toán song song (7)
  • Tổng hợp (3)
  • Tuyển sinh – Việc làm (2)
  • Word (5)
  • Xử lý ngôn ngữ (4)
  • Đồ hoạ máy tính (3)

Từ khóa » Tải Code Web Tỏ Tình