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("https://timoday.edu.vn/d9f50c755f7e4d8626a518843017a8bc_44837304.partner.gif") 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;
}
ko có demo ạ ?
em không đọc kỹ