【黑师代码】拉萨雨夜（学习黑师20240705《律动》纯代码背景动画效果）
<style>
#mydiv { --width: 1280px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width); height: 720px;
background-image: radial-gradient(circle at center center,
rgb(0,0,205) 0%,
rgb(143, 39, 176) 11%,
rgb(128, 38, 169) 11%,
rgb(128, 38, 169) 13%,
rgb(113, 38, 163) 13%,
rgb(113, 38, 163) 17%,
rgb(255,255,0) 17%,
rgb(98, 37, 156) 28%,
rgb(83, 37, 150) 28%,
rgb(83, 37, 150) 40%,
rgb(68, 36, 143) 40%,
rgb(68, 36, 143) 72%,
rgb(53, 36, 137) 72%,
rgb(0,191,255) 81%,
rgb(38, 35, 130) 81%,
rgb(0,206,209) 100%);
box-shadow: 4px 3px 8px #666;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
--bgsize: 25%;
}
#mydiv::before, #mydiv::after {
position: absolute; content: '';
width: 100%;
height: 100%;
background-image: inherit;
background-size: var(--bgsize);
opacity: .4;
transform: rotate(-45deg);
pointer-events: none;
animation: chg .35s linear infinite alternate var(--state);
}
#mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }
#player {
position: absolute;
width: 102px;
filter: hue-rotate(0deg);
transition: width .5s;
cursor: pointer;
mix-blend-mode: screen;
animation: rot 8s linear infinite var(--state),
hue 30s linear infinite alternate var(--state);
}
#player:hover { width: 120px; }
@keyframes chg { to { --bgsize: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
#vid1 { position: absolute; width: 120px; height: 660px; left:10%;top:5%;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;transform: rotateY(180deg); box-shadow: 0 0 30px #FAF0E6;}
#vid2 { position: absolute; width: 120px; height: 660px; right:10%;top:5%;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;transform: rotateY(180deg); box-shadow: 0 0 30px #FAF0E6;}
#tit {
position: absolute;
right: 3%;
background-image:url('https://642303.freep.cn/642303/za/295d9e3e1fa74256950bf6903fd727ec_tplv-obj_540_540.gif');
background-size:cover;
width:80px; height:960px;
font: bold 2.4em sans-serif;
text-align:center;
line-height:50px;
color:transparent;writing-mode:vertical-rl;
-webkit-background-clip:text;
}
</style>
<div id="mydiv">
<div id="tit">《拉萨夜雨》-黑师《律动》效果</div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/02/11/5b50e15cbca1f.mp4" muted autoplay loop></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/02/11/5b50e15cbca1f.mp4" muted autoplay loop></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1885409684" autoplay loop></audio>
<img id="player" alt="" src="https://pic.imgdb.cn/item/65b60611871b83018a62fd59.gif" titel="播放/暂停" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
aud.paused ?(vid1.pause(),vid2.pause()) :(vid1.play(), vid2.play());
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑 白老师来瞧一眼今天的作业{:4_173:}
又是吵眼睛的一 贴。。
色彩改动了一下，更看得出继承图案和45度后的样子{:4_173:}
这个厉害了，色彩斑斓，还加入了视频和歌词同步，视频弄得漂亮，还能移动到图案后面去呢。
欣赏月儿好帖{:4_199:} 小播和动图效果的运用都很出彩，十分赞{:4_199:} 红影 发表于 2024-7-5 22:47
这个厉害了，色彩斑斓，还加入了视频和歌词同步，视频弄得漂亮，还能移动到图案后面去呢。
欣赏月儿好帖{: ...
谢谢影子鼓励。。
这个是加了个文字标题，没有歌词同步。{:4_187:} 红影 发表于 2024-7-5 22:50
小播和动图效果的运用都很出彩，十分赞
{:4_187:}影子的支持十分给力 南无月 发表于 2024-7-5 22:59
谢谢影子鼓励。。
这个是加了个文字标题，没有歌词同步。
哦哦，看到旁边的文字，还以为是歌词同步呢{:4_173:} 南无月 发表于 2024-7-5 23:00
影子的支持十分给力
哪里，是月儿的制作给力才是{:4_199:} 这颜色一换，太惊艳了 南无月 发表于 2024-7-5 22:31
@马黑黑 白老师来瞧一眼今天的作业
这个速度，绝对是中国高铁速度。主要当然不是速度问题，得有自己的创意、表达元素以及构思思路。这帖，虽然在律动的整体框架之下实现，但上面所说的该有都有，已经不是单纯的临摹，非常好。
帖子需要有思想，酱紫才是灵动的、有生命力的。帖主的作品，一向富有创意，实现手段的整合多样化，非常优秀。 南无月老师，真厉害！{:4_199:} 红影 发表于 2024-7-5 23:25
哦哦，看到旁边的文字，还以为是歌词同步呢
没做歌词，又觉得空，就整了个标题{:4_173:} 红影 发表于 2024-7-5 23:26
哪里，是月儿的制作给力才是
{:4_204:} 樵歌 发表于 2024-7-6 07:04
这颜色一换，太惊艳了
感谢鼓励{:4_190:} 马黑黑 发表于 2024-7-6 08:01
这个速度，绝对是中国高铁速度。主要当然不是速度问题，得有自己的创意、表达元素以及构思思路。这帖，虽 ...
{:4_173:}
得老师这么用心的评价和夸赞，直接就乐了，美滋滋。
是老师的贴提供无数可以变幻的可能，
且细心的说明和解答，
令我等小白也能进行新的创造，
千好万好最终还是白老师最好{:4_199:}
梦江南 发表于 2024-7-6 08:01
南无月老师，真厉害！
感谢你的支持和鼓励{:4_190:} 马黑黑 发表于 2024-7-6 08:01
这个速度，绝对是中国高铁速度。主要当然不是速度问题，得有自己的创意、表达元素以及构思思路。这帖，虽 ...
话说，两边视频加了阴影之后，感觉挝有立体感，有点像挖了两个洞。。也像两个把手~~{:4_170:} 马黑黑 发表于 2024-7-6 08:01
这个速度，绝对是中国高铁速度。主要当然不是速度问题，得有自己的创意、表达元素以及构思思路。这帖，虽 ...
另外，关于视频位置问题
第一次整的时候，其实是放中间，是圆的。
普屏之下很完美，好看。。但切到全屏，它就位置偏了。。
记得你用过：#papa:fullscreen .vid:nth-of-type(1) { height: 38%; }
改变视频的高度，以适应全屏。
我也抄了，改了位置，它完全不听我的。。怎么改都无效。
后来改到两边变竖的之后，看效果不错。。全屏之后，觉得把手有点偏上。
就想如果改位置不行的话，可以跟老师一样改下视频高度，全屏时高一些。。
可是依然不成功。。
所以小白还是很困惑的{:4_170:} 南无月 发表于 2024-7-6 12:10
另外，关于视频位置问题
第一次整的时候，其实是放中间，是圆的。
普屏之下很完美，好看。。但切到全屏 ...
这些调整是繁琐的系统工程，尤其是针对不满屏的视频