Đây là dự án Code troll bạn gái ngày 8/3 bằng html – css đơn giản nhỏ nhỏ mình làm tặng các bạn muốn troll vui người yêu.
Chú ý: Không khuyến khích với các bạn có bạn gái học võ.
Các bạn chỉ cần copy code và cho vào 1 file lưu với tên bất kỳ và đuôi để .html là được nhé.
Hoặc file ăn liền cho các bạn không hiểu về code ở đây nhé: Tải file quaemdau.html
Nếu muốn thay câu hỏi và câu trả lời các bạn thay ở các vị trí sau:
<h4>Quà em đâu anh?</h4><label class="no" for="No">Không có đâu</label><label class="yes" for="Yes">QUà em đây bé</label>Còn nếu muốn đổi sang các hình ảnh bạo lực hoặc đáng yêu hơn thì ở đây nhé:
background-image: url("https://media.giphy.com/media/2dQ3FMaMFccpi/giphy.gif");background-image: url("https://media.giphy.com/media/QBEhpJHrv7poQ/giphy.gif");Như hiện tại mình lấy link ảnh từ trang media.giphy.com về, các bạn chỉ cần copy link ảnh thay vào đoạn "https://media.giphy.com/media/QBEhpJHrv7poQ/giphy.gif" là được nhé.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quà em đâu anh?</title>
</head>
<body>
<div class="centered">
<h4>Quà em đâu anh?</h4>
<input class="no" id="No" type="checkbox" name="answer"/>
<label class="no" for="No">Không có đâu</label>
<input class="yes" id="Yes" type="checkbox" name="answer"/>
<label class="yes" for="Yes">QUà em đây bé</label>
<div class="answer--yes"></div>
<div class="answer--no"></div>
</div>
</body>
<style type="text/css">
body {
background: radial-gradient(
circle closest-side at 60% 43%,
#323232 26%,
rgba(187, 0, 51, 0) 27%
),
radial-gradient(
circle closest-side at 40% 43%,
#323232 26%,
rgba(187, 0, 51, 0) 27%
),
radial-gradient(
circle closest-side at 40% 22%,
#373737 45%,
rgba(221, 51, 85, 0) 46%
),
radial-gradient(
circle closest-side at 60% 22%,
#373737 45%,
rgba(221, 51, 85, 0) 46%
),
radial-gradient(
circle closest-side at 50% 35%,
#373737 30%,
rgba(221, 51, 85, 0) 31%
),
radial-gradient(
circle closest-side at 60% 43%,
#323232 26%,
rgba(187, 0, 51, 0) 27%
)
50px 50px,
radial-gradient(
circle closest-side at 40% 43%,
#323232 26%,
rgba(187, 0, 51, 0) 27%
)
50px 50px,
radial-gradient(
circle closest-side at 40% 22%,
#3c3c3c 45%,
rgba(221, 51, 85, 0) 46%
)
50px 50px,
radial-gradient(
circle closest-side at 60% 22%,
#3c3c3c 45%,
rgba(221, 51, 85, 0) 46%
)
50px 50px,
radial-gradient(
circle closest-side at 50% 35%,
#3c3c3c 30%,
rgba(221, 51, 85, 0) 31%
)
50px 50px;
background-color: #323232;
background-size: 100px 100px;
font-family: "Lato", sans-serif;
}
.centered {
width: 100%;
margin: 30vh auto;
text-align: center;
}
.centered h4 {
color: #ffffff;
font-size: 3em;
font-weight: bold;
}
input[type="checkbox"] {
display: none;
}
label {
height: 40px;
width: auto;
padding: 10px 40px;
display: inline-block;
cursor: pointer;
margin: 0 20px;
border-radius: 5px;
color: #ffffff;
font-size: 1.5em;
line-height: 1.5em;
text-transform: uppercase;
transition: all 0.25s ease-in-out;
}
label:hover {
transform: scale(1.1, 1.1);
}
.no {
background-color: #d8124b;
margin-bottom: 10px;
}
.yes {
background-color: #12d890;
}
.answer--yes,
.answer--no {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.answer--yes {
background-image: url("https://media.giphy.com/media/2dQ3FMaMFccpi/giphy.gif");
background-repeat: repeat;
background-size: contain;
}
.answer--no {
background-image: url("https://media.giphy.com/media/QBEhpJHrv7poQ/giphy.gif");
background-repeat: repeat;
background-size: contain;
}
input.yes[type="checkbox"]:checked ~ .answer--yes {
visibility: visible;
opacity: 100;
}
input.no[type="checkbox"]:checked ~ .answer--no {
visibility: visible;
opacity: 100;
}
.signature {
position: absolute;
margin: auto;
bottom: 0;
top: auto;
width: 95%;
}
.signature p {
text-align: center;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.85em;
color: #ffffff;
}
.signature .much-heart {
display: inline-block;
position: relative;
margin: 0 4px;
height: 10px;
width: 10px;
background: #d8124b;
border-radius: 4px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.signature .much-heart::before,
.signature .much-heart::after {
display: block;
content: "";
position: absolute;
margin: auto;
height: 10px;
width: 10px;
border-radius: 5px;
background: #d8124b;
top: -4px;
}
.signature .much-heart::after {
bottom: 0;
top: auto;
left: -4px;
}
.signature a {
color: #d8124b;
text-decoration: none;
font-weight: bold;
}
.signature a:hover {
color: coral;
text-decoration: none;
font-weight: bold;
}
</style>
</html>
