Xem 34,947
Cập nhật nội dung chi tiết về Viết Code Tỏ Tình Với Html, Css Và Js mới nhất ngày 23/05/2022 trên website Jetstartakeontheworld.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến nay, bài viết này đã thu hút được 34,947 lượt xem.
--- Bài mới hơn ---
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
2. Code css codetotinh.cs
img{
border: 0;
}
3. Trang cuagai2.html
<text text-anchor="middle"
x="50%"
y="35%"
class="text--line"
>
TỚ LÀ
<text text-anchor="middle"
x="50%"
y="68%"
class="text--line2"
>
DÂN IT
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
4. Code JS totinh.js
//Code JS tạo tuyết rơi
var snowStorm = null;
function SnowStorm() {
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.disabled = false;
this.terrain = .active) this.flakes.active == 0) s.flakes);
}
}
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.o.style.display = 'block';
}
}
this.SnowFlake = function (parent, type, x, y) {
var s = this;
var storm = parent;
this.type = type;
this.y = (!isNaN(y) ? y : -rnd(screenY) - 12);
this.vX = null;
this.vY = null;
this.vAmpTypes = ;
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 + chúng tôi + (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 () {
s.o.style.top = (screenY + scrollY - flakeHeight - storm.terrain;
if (yDiff < flakeHeight) {
s.active = 0;
if (snowCollect && snowStick) {
var height = += height.active == 1) {
s.flakes.active == 0) {
used++;
} else {
waiting++;
}
}
if (snowCollect && !waiting) {
s.createSnow(flakesMaxActive, true);
}
if (active < flakesMaxActive) {
with(s.flakes = new s.SnowFlake(s, parseInt(rnd(flakeTypes)));
}
targetElement.appendChild(docFrag);
}
this.timerInit = function () {
s.timers = (!isWin9X ? );
}
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;
}
--- Bài cũ hơn ---
Bạn đang đọc nội dung bài viết Viết Code Tỏ Tình Với Html, Css Và Js trên website Jetstartakeontheworld.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!
