《潇洒走一回》 - (跟着红影学习黑黑老师的代码)
本帖最后由 亦是金 于 2023-12-28 23:32 编辑 <br /><br /><style>#papa {
margin: 80px 0 0 calc(50% - 681px);
width: 1280px;
height: 680px;
box-shadow: 4px 8px 28px gray;
background: url('https://z4a.net/images/2023/12/28/ppGfC4gss2.jpg') no-repeat center/cover;
overflow: hidden;
z-index: 1;
position: relative;
--state: paused;
}
#player, #clone_player0 {
position: absolute;
left: 0px;
top: -300px;
width: 1380px;
height: 680px;
cursor: pointer;
--time: .4s;
animation: rotating 0s var(--time) infinite alternate linear var(--state);
}
#player, #clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8 {
position: absolute;
left: 702px;
top: 415px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255,182,193,.7);
box-shadow: inset 0 0 20px white;
cursor: pointer;
--time: .4s;
animation: rotating .7s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: -100px; top: 0px; filter: hue-rotate(30deg); }
#clone_player1 { --time: 3.4s; left: 500px; top: 452px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 544px; top: 448px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 586px; top: 454px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 614px; top: 468px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 753px; top: 441px; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 816px; top: 454px; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 864px; top: 468px; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 893px; top: 471px; filter: hue-rotate(10deg); }
li-zi {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: navy;
opacity: .75;
animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
position: absolute;
bottom: -60px;
width: 1280px;
height: 800px;
mix-blend-mode: screen;
object-fit: cover;
pointer-events: none;
opacity: .4;
}
@keyframes moving {
from { transform: translate(var(--x0),var(--y0)); }
to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating {
from { transform: translate(0,0) rotate(0deg); }
to { transform: translate(0,-120px) rotate(360deg); }
}
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/77/5e60b7f986b97_10s_big.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2035173787" autoplay loop></audio>
<div id="player" title="播放/暂停"></div>
<div id="clone_player0"></div>
<div id="clone_player1"></div>
<div id="clone_player2"></div>
<div id="clone_player3"></div>
<div id="clone_player4"></div>
<div id="clone_player5"></div>
<div id="clone_player6"></div>
<div id="clone_player7"></div>
<div id="clone_player8"></div>
</div>
<script>
let r = player.offsetWidth / 2 - 2, total = 10;
Array.from({length: total}).forEach((item,key) => {
let rad0 = (Math.PI / 180) * 360 / total * key,
rad1 = (Math.PI / 180) * (180 + (360 / total * key));
item = document.createElement('li-zi');
item.style.cssText += `
--x0: ${r + r * Math.cos(rad0)}px;
--y0: ${r + r * Math.sin(rad0)}px;
--x1: ${r + r * Math.cos(rad1)}px;
--y1: ${r + r * Math.sin(rad1)}px;
--duration: ${2 + Math.random() * 3}s;
--delay: -${Math.random() * 5}s;
background: #${Math.random().toString(16).substr(-6)};
`;
player.appendChild(item);
});
let mState = () => {
aud.paused ?
(papa.style.setProperty('--state','paused'), vid.pause()) :
(papa.style.setProperty('--state','running'), vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick = clone_player0.onclick =clone_player1.onclick = clone_player2.onclick= clone_player3.onclick = clone_player4.onclick = clone_player5.onclick = clone_player6.onclick = clone_player7.onclick = clone_player8.onclick = () => aud.paused ? aud.play() : aud.pause();
clone_player0.innerHTML = clone_player1.innerHTML = clone_player2.innerHTML = clone_player3.innerHTML = clone_player4.innerHTML = clone_player5.innerHTML= clone_player6.innerHTML= clone_player7.innerHTML= clone_player8.innerHTML = player.innerHTML;
</script>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
font-size: 26px;
color: #ff0000;
position: relative;
text-align:center;
transform: translate(0%,35%);
font-weight: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
-webkit-animation:loop 3s linear 1000000;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
.tit {
position: relative;
width: 700px;
top: -660px;
left: -300px;;
font-family:迷你简细圆;
font-size: 40px;
text-shadow: 2px 2px #ff00ff;
font-weight:bold;
color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span>《潇洒走一回》 - 新时代乐队</span>
<span > </span></div>
<div style="position: relative;width: 500px;height: 50px;top:-90px;LEFT: 900px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
</style>
这个跳跃的小球好玩{:5_150:} 亦是金老师好制作{:5_150:}{:5_150:}{:5_150:} 欣赏前辈的精美制作，小球制作真漂亮 liumang 发表于 2023-12-30 16:48
这个跳跃的小球好玩
谢谢管理欣赏！{:5_116:} liumang 发表于 2023-12-30 16:49
亦是金老师好制作
谢谢点赞！{:5_116:} 小辣椒 发表于 2024-1-1 14:58
欣赏前辈的精美制作，小球制作真漂亮
谢谢点赞捧场！{:5_116:} 试贴。。。。。？
不是正式贴吗？
页:
[1]