ใฏใใใซ
ใใใซใกใฏใHรHใฎใปใณใชใๅคงๅฅฝใใจใณใธใใขใงใใ๏ผๅๆ OKใงใ๐๏ผ
ๆฏๆฅๆฅญๅใงๆไผใใใใจๆใใพใใใใใกใทใชใใผใฟใผๅบๅฎใใใคใพใใชใใงใใใญ๐
ใใใใๆใใ่ณๆฑๅๆณใงใใใๆฐๆใกใใ็กใใงใใ๏ผ๐
ใใใชๅคๆ ใชๆนใธ้ใใใกใทใชใใผใฟใผใใๅผใใใตใฏใใจไฝใใพใใ
ๅฎๆใใใใฎ
ใใกใใซใชใใพใใ
ๆฏๅๆไผใฎใฏใใใซๅใใฆใใใใๆฌกๅใฎใใกใทใชใใผใฟใผใๆฑบใใ้็จใซใใพใใ
ใใใใใฉใณใๆฐๆใกใใใใ๏ผ๏ผ๏ผ
็ขบๅฎๆผๅบๆฐๆใกใใใใใ๏ผ๏ผ๏ผ
ๆใใใใใชใซๆฐๅใไธใใใใๅผใใใใฃใใงใใใใ๏ผ๐
ในใฟใผใใใฟใณใๆผใใใณใซๆฝ้ธใ่กใใใไธๅฎใฎ็ขบ็ใง่น่ฒ๏ผใใใฉใณใๆผๅบใ็บ็ใใพใ๏ผ๐คฉ
ใพใใใใใชๅคงๅฑคใชใใจใฏใใฆใชใใฎใงใใใฃใใฃใฃใจ็ดนไปใใพใใ
ใฝใผในใณใผใ
ๅบๆฌ็ใชHTMLใCSSใJavaScriptใฎ3ใคใฎใใกใคใซใฎใฟใง็ฐกๅใซไฝใฃใฆใใพใใ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ใใกใทใชใใผใฟใผใใๅผใ</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<h1><span>ๆฌกๅใฎใใกใทใชใใผใฟใผ</span></h1>
<div class="container">
<div id="result-container">
<div id="gifContainer"></div>
<h2><span id="result"></span> ใใ</h2>
</div>
<div class="btn-border-gradient-wrap btn-border-gradient-wrap--gold">
<a onclick="getResult()" class="btn btn-border-gradient"
><span class="btn-text-gradient--gold">ในใฟใผใ</span></a
>
</div>
</div>
</body>
</html>
ๆง้ ็ใซใฏใใใชๅคใใใชใใงใใญใheadใงstyle.cssใจindex.jsใใคใใงใซjqueryใๅผใณๅบใใฆๅพใฏใฏใฉในใ้ฉๅฝใซใใคใใคใใคใ
* {
background: #000;
}
h1 {
font-family: "ใใฉใฎใๆๆ Pro W3", "Hiragino Mincho Pro",
"Hiragino Mincho ProN", "HGSๆๆE", "๏ผญ๏ผณ ๏ผฐๆๆ", serif;
padding: 1rem 2rem;
color: #fff;
text-align: center;
font-size: 60px;
}
h1 span {
background-image: -webkit-linear-gradient(
315deg,
#b8751e 0%,
#ffce08 37%,
#fefeb2 47%,
#fafad6 50%,
#fefeb2 53%,
#e1ce08 63%,
#b8751e 100%
);
background-image: linear-gradient(
135deg,
#b8751e 0%,
#ffce08 37%,
#fefeb2 47%,
#fafad6 50%,
#fefeb2 53%,
#e1ce08 63%,
#b8751e 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container {
margin: 40px 0px;
}
h2 {
color: white;
}
#result {
font-size: 50px;
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
/*่ๆฏ*/
body {
padding: 30px;
text-align: center;
background: #000;
}
.btn-border-gradient-wrap {
display: inline-block;
padding: 0.2rem;
border-radius: 0.5rem;
}
.btn-border-gradient-wrap--gold {
background-image: -webkit-linear-gradient(
315deg,
#704308 0%,
#ffce08 37%,
#fefeb2 47%,
#fafad6 50%,
#fefeb2 53%,
#e1ce08 63%,
#704308 100%
);
background-image: linear-gradient(
135deg,
#704308 0%,
#ffce08 37%,
#fefeb2 47%,
#fafad6 50%,
#fefeb2 53%,
#e1ce08 63%,
#704308 100%
);
}
.btn-border-gradient-wrap--gold:hover a.btn {
text-shadow: 0 0 15px rgba(250, 250, 214, 0.5),
0 0 15px rgba(250, 250, 214, 0.5), 0 0 15px rgba(250, 250, 214, 0.5),
0 0 15px rgba(250, 250, 214, 0.5);
}
a.btn-border-gradient {
font-size: 2rem;
background: #000;
}
.btn-text-gradient--gold {
font-family: "ใใฉใฎใๆๆ Pro W3", "Hiragino Mincho Pro",
"Hiragino Mincho ProN", "HGSๆๆE", "๏ผญ๏ผณ ๏ผฐๆๆ", serif;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#ffffdb),
to(#a16422)
);
background: -webkit-linear-gradient(bottom, #ffffdb, #a16422);
background: linear-gradient(to top, #ffffdb, #a16422);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes rainbow {
0% {
background-position: 0%;
}
50% {
background-position: 100%;
}
100% {
background-position: 0%;
}
}
.rainbow-text {
background: linear-gradient(
to right,
red,
orange,
yellow,
lime,
blue,
indigo,
violet,
red
);
background-size: 200%;
-webkit-background-clip: text;
color: transparent;
animation: rainbow 2s linear infinite;
}
#result-container {
display: flex;
align-items: center;
justify-content: center;
}
CSSใงใฏใฉใคโซ๏ธใใใฟใใใช้ป้ใจใ็ขบๅฎๆผๅบๆใซๅบใใฌใคใณใใผใขใใกใผใทใงใณใไฝๆใใฆใใพใใ
classใจidใใใฃใกใใใกใใซใชใฃใฆใใใฎใฏ่ฆ้ใใฆใใ ใใ๐ฅฒ
// ใใๅผใ็ตๆ
const results = [
"ใปใณใชใ",
"ใดใฌใคใ",
"ใใณใ",
"ใกใฌใชใญใณ",
"ๆใใใๆฉใๆๅ",
];
function getResult() {
var random = Math.floor(Math.random() * results.length);
var result = results[random];
if (Math.random() < 0.3) {
// 30%ใฎ็ขบ็ใง่น่ฒใขใใกใผใทใงใณใ้ฉ็จ
$("#result").addClass("rainbow-text");
$("#gifContainer").append(
'<img src="https://4boom.jp/blog/wp-content/uploads/2015/08/A4_PDF%E8%A1%A8%E3%80%90%EF%BC%A7%EF%BC%A9%EF%BC%A6%E3%80%91%E3%83%91%E3%83%88%E3%83%A9%E3%83%B3%E3%83%975.gif" width="100px">'
);
$("#result").html(result).hide().fadeIn(3000);
} else {
$("#result").removeClass("rainbow-text");
$("#gifContainer img").remove();
$("#result").html(result).hide().fadeIn(1000);
}
}
resultsใซใใผใ ใกใณใใผใฎๅๅใ้
็ฝฎใใฆใMath.random()ใงใฉใณใใ ใซ่กจ็คบใใใใ ใใงใใญ๐
ๅพใฏใDOM่ฆ็ด ใซ็ตๆใๆธกใใใใ30%ใฎ็ขบ็ใงใฌใคใณใใผ่กจ็คบ๏ผใใใฉใณใใฎgifใ่ฟฝๅ ใใใ ใใงใใญ๏ผ
ใจใฃใฆใ็ฐกๅใงใใใ๐
ๆฏ้ๆไผใงไฝฟใฃใฆใฟใฆใใ ใใ๐
่ฒฌไปปใฏ่ฒ ใใพใใใใใใ
ใใใใซ
ใใใใงใใใงใใใใ๏ผ
ใใ ใใตใใใงไฝใฃใใ ใใงใใใๆกๅคใใใใใใฎใฏไฝฟใใใใจๆใใพใ๐ฅน
ใใใ่ฆใฆๆๅใใใๆนใฏใใใผใ ใฎใใใซไฝใใใตใใใใผใซใไฝๆใใฆใฟใฆใฏใใใใงใใใใ๐
ๆๅพใพใงใ่ฆงใใใ ใใใใใจใใใใใพใใ๏ผ
ไปฅไธใใปใณใชใใงใใใ๐ค
Comments
3ๅนดใใใๅใซ็งใ
linear-gradientใๅฉ็จใใWEBใขใใชใฑใผใทใงใณใไฝใฃใๆ็นใงใใงใซlinear-gradientใซwebkitๆฅ้ ญ่พใๅฟ ่ฆใชใใฉใฆใถใฏใขใใคใซๅซใใฆใปใผใใใพใใใงใใใใไปใงใๅฟ ่ฆใชใใฉใฆใถใฃใฆใใใพใใ๏ผLet's comment your feelings that are more than good