- UID
- 958
- 主题
- 回帖
- 0
- 精华
- 积分
- 4720
- 金币
- 枚
- 草籽
- 颗
- 鲜花
- 朵
- 注册时间
- 2024-7-4
- 最后登录
- 1970-1-1
|
本帖最后由 扬帆 于 2025-5-7 11:51 编辑
) no-repeat center/100% 100%;
position: relative;
overflow: hidden;
border-radius: 32px;
box-shadow: 3px 3px 6px gray;
z-index: 2;
animation: rod 2s linear infinite var(--state);
}
@keyframes rod {0% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #995918 100%); }
100%{ background:radial-gradient(circle farthest-corner at center center, transparent 22%, #97349E 100%); }
}
#dt{
position:absolute;
width: 100%;
height: 50%;
top:50%;
z-index: 2;
left: 0%;
mix-blend-mode: screen;
}
#dt img{width: 100%;
height: 100%;
}
#cndpt{
margin: 0px 0px ;
z-index: 2;
mix-blend-mode: screen;
cursor: pointer;
position:relative;
width: 100%;
height: 100%;
transform: rotatez(0deg)rotateX(0deg);
}
#vid1{
width: 100%;
height: 150%;
z-index: .99;
position:absolute;
top:-150px;
left:0px;
object-fit: cover;
pointer-events: none;
aspect-ratio: 16/9;
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 2.4em 华文新魏;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10 {
position: absolute;
width: 100%;
height: 100%;
left: 10%;
top: 50%;
width: 33px;
height: 3px;
border-radius: 50%;
background:#00ff00;
box-shadow: 0px 0px 10px #ff0000;
--time: .4s;
animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: 5%; top: 90%; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 78%; top: 92%; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 85%; top: 80%; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 70%; top: 93%; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 60%; top: 84%; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 50%; top: 80%; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 40%; top: 91%; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 31%; top: 85%; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 93%; top: 86%; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 22%; top: 94%; filter: hue-rotate(20deg); }
#clone_player10 { --time: 0.4s; left: 15%; top: 88%; filter: hue-rotate(60deg); }
@keyframes rotating {
from { transform: translate(0,0px) rotate(0deg)scale(1);}
to { transform: translate(0px,-80px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}
|
评分
-
2
查看全部评分
-
|
发表于 2025-5-6 18:02
发表于 2025-5-6 18:54
谢谢分享
