จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
HTML
<h1 split-by="letter" letter-animation="breath">
animated letters
</h1>
CSS
@keyframes breath {
from {
animation-timing-function: ease-out;
}
to {
transform: scale(1.25) translateY(-5px) perspective(1px);
text-shadow: 0 0 40px var(--glow-color);
animation-timing-function: ease-in-out;
}
}
@media (prefers-reduced-motion:no-preference) {
[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}
[letter-animation=breath] {
--glow-color: white;
}
[letter-animation=breath]>span {
animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;
}
}
@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme: light) {
[letter-animation=breath] {
--glow-color: black;
}
}
JS
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
const byLetter = text =>
[...text].map(span)
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
if (motionOK) {
const splitTargets = document.querySelectorAll('[split-by]')
splitTargets.forEach(node => {
let nodes = byLetter(node.innerText)
if (nodes)
node.firstChild.replaceWith(...nodes)
})
}
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2023-10-25 UTC
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"ไม่มีข้อมูลที่ฉันต้องการ"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"ล้าสมัย"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ปัญหาเกี่ยวกับการแปล"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"อื่นๆ"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"เข้าใจง่าย"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"แก้ปัญหาของฉันได้"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"อื่นๆ"
}]