復号スキャン文字Decode Scan Text
.cg-tx-decode {
position: relative;
display: inline-block;
margin: 0;
padding: 12px 18px 20px;
color: #1B1A17;
font: 800 34px/1 "IBM Plex Mono", ui-monospace, monospace;
letter-spacing: .06em;
overflow: hidden;
}
.cg-tx-decode-word { display: inline-flex; }
/* 1文字ずつ「確定」する。ばねで少しだけ大きく弾ませてから収める */
.cg-tx-decode-word i {
position: relative;
display: inline-block;
font-style: normal;
animation: cg-tx-decode-lock 4.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
animation-delay: calc(var(--i) * .1s);
}
/* 確定前に重なっている「未読の記号」 */
.cg-tx-decode-word i::before {
content: attr(data-s);
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
color: #E8590C;
animation: cg-tx-decode-scramble 4.6s ease infinite;
animation-delay: calc(var(--i) * .1s);
}
/* 読み取り光線: これが通過した文字から確定していく */
.cg-tx-decode-beam {
position: absolute;
top: 6px;
bottom: 14px;
width: 14px;
background: linear-gradient(90deg, rgba(242, 183, 7, 0), rgba(242, 183, 7, .95), rgba(242, 183, 7, 0));
filter: blur(1px);
animation: cg-tx-decode-beam 4.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* 全文字が確定したら下線が引かれる */
.cg-tx-decode-rule {
position: absolute;
left: 18px;
right: 18px;
bottom: 10px;
height: 3px;
background: #1B1A17;
transform: scaleX(0);
transform-origin: left;
animation: cg-tx-decode-rule 4.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-tx-decode-lock {
0%, 6% { opacity: .3; transform: translateY(-3px) scale(.86); }
12% { opacity: 1; transform: translateY(0) scale(1.3); }
17% { transform: translateY(0) scale(1); }
84% { opacity: 1; transform: none; }
92%, 100% { opacity: .3; transform: translateY(-3px) scale(.86); }
}
@keyframes cg-tx-decode-scramble {
0%, 8% { opacity: 1; }
13% { opacity: 0; }
88% { opacity: 0; }
94%, 100% { opacity: 1; }
}
@keyframes cg-tx-decode-beam {
0% { left: 2%; opacity: 0; }
5% { opacity: 1; }
22% { left: 94%; opacity: 1; }
30% { left: 94%; opacity: 0; }
100% { left: 2%; opacity: 0; }
}
@keyframes cg-tx-decode-rule {
0%, 26% { transform: scaleX(0); }
36% { transform: scaleX(1.03); }
42%, 86% { transform: scaleX(1); }
96%, 100% { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.cg-tx-decode-word i,
.cg-tx-decode-word i::before,
.cg-tx-decode-beam,
.cg-tx-decode-rule { animation: none; }
.cg-tx-decode-word i { opacity: 1; transform: none; }
.cg-tx-decode-word i::before { opacity: 0; }
.cg-tx-decode-beam { opacity: 0; }
.cg-tx-decode-rule { transform: scaleX(1); }
}
<p class="cg-tx-decode" aria-label="CARGO-4821"><span class="cg-tx-decode-beam" aria-hidden="true"></span><span class="cg-tx-decode-word" aria-hidden="true"><i style="--i:0" data-s="#">C</i><i style="--i:1" data-s="%">A</i><i style="--i:2" data-s="&">R</i><i style="--i:3" data-s="@">G</i><i style="--i:4" data-s="?">O</i><i style="--i:5" data-s="/">-</i><i style="--i:6" data-s="+">4</i><i style="--i:7" data-s="*">8</i><i style="--i:8" data-s="$">2</i><i style="--i:9" data-s="=">1</i></span><span class="cg-tx-decode-rule" aria-hidden="true"></span></p>