:doodle {
@grid: 2 / 500px 100px;
color: var(--color);
bottom: 70px;
left: 370px;
z-index: 999;
--prog: 0%;
--size: 60px;
--ttmsg1: '00:00';
--ttmsg2: '00:00';
--color: #edeb1d;
position:absolute;
}
/* 時間信息 : 左 */
@nth(1) {@place: 5% 100%; :after { content: var(--ttmsg1); } }
/* 控制器 */
@nth(2) {
@size: 60px;
@shape: windmill;
@place: 50% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
}
/* 時間信息 : 右 */
@nth(3) {
@place: 95% 100%;
:after { content: var(--ttmsg2); }
}
/* 進度條 */
@nth(4) {
@place: 50% 80%;
@size: 100% 2px;
background: Silver;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
:doodle {
@size: 1150px 680px;
}
position: absolute;
left: @r(255)%;
top: -10%;
:after {
position: absolute;
content: '@p( ♬, ♪, ♩, ♫, ∮,歸途, 倔強, ✲, ❤, ☺, 回家,出發, ★, ☆,love, ❄)';
color: @p(#ff0000,#ff0ff1,#f8a21b,#2bff0f,#1cdcf8,#5445ea,#faa615);
font-size: @r(15, 30)px;
}
animation: fall 40s @r(-6, 36)s infinite var(--state);
@keyframes fall {
from { transform: rotate(0deg) translate(0px); }
to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
}
:doodle {@size: 1200px 700px;margin: 0% 0%;} @grid: 50x1 / 1200px 700px;
:container { perspective: 10vmin; }
pointer-events: auto;
background: @m( @r(30, 30), radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%, transparent 20% )
@r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat );
@size: 30%; @place-cell: center;
border-radius: 50%;
transform-style: preserve-3d; animation: scale-up 15s linear infinite var(--state); animation-delay: calc(@i * -.6s);
@keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
