探索一下html5动画【架子鼓】添加在css音画里的方法
本帖最后由 亚伦影音工作室 于 2023-3-9 16:16 编辑 <br /><br /><style>#papa { margin: 10px -230px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,linear-gradient(80deg, #000080, #000090, #000000, #111111); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#jzg{ width: 500px;height: 400px;position: absolute; top:36%; left:0%; z-index:1}
#btn:hover #jzg {
opacity: 0.1; transition: 0.3s;
}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round{0% {opacity: 0;}
10% {opacity: 1;}
18% {opacity: 0;}
}
img:nth-child(1) {
animation-delay: 42s;
}
img:nth-child(2) {
animation-delay: 36s;
}
img:nth-child(3) {
animation-delay: 30s;
}
img:nth-child(4) {
animation-delay: 24s;
}
img:nth-child(5) {
animation-delay: 18s;
}
img:nth-child(6) {
animation-delay: 12s;
}
img:nth-child(7) {
animation-delay: 6s;
}
img:nth-child(8) {
animation-delay: 0s;
}
.stop img:nth-child(1) {
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 36s;animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-delay: 0s;animation-play-state: paused;
}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;
background:radial-gradient(circle 672px at 50% 50%, rgba(146, 254, 157, 0) 20%,rgba(255, 14, 0, 0.82) 100%);
animation: bh 6s infinite linear;
}
@keyframes bh {
100%{
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1);}
50% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)}
0% {
opacity: 1;clip-path: inset(0 0 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
</style >
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=260540901" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/648408cabf20c4655c3eb32a84893b46.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/4c7ef7af54065bcd017bcc13e214207e.jpg" />
<img alt="" class="photo"src="https://www.kumeiwp.com/sub/filestores/2023/02/02/19c9f45206f6f64759dc830d6dc86cb5.jpg" />
<img alt=""class="photo"src="https://www.kumeiwp.com/sub/filestores/2023/02/05/5927de67e7926ddc3e5d3cc2314e39de.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/be8344391339f448193565c593076320.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/0096f3ca64524d35e535e5f4c01ece34.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/7d72de6bf18b678741be4431eaf6f145.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/6eb62dad1fe487cead64a5165eabffd1.jpg" />
</div>
<div id='ganguang' > </div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div><div id="jzg"><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://365.tf/disk/tf/1677432888.html" width="500"></iframe></div></div>
<div class="lrc">
<div class="p"> <liid="ullrc" >
</li>
</div>
</div>
</div>
</div>
<style>
.bfbj{
width: 100%; height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
width: 600px;
display: block;
margin: 0 auto;
}
#btn{
display: block;
margin: 0 ;
}
.lrc{
width: 980px;
height: 140px;position: absolute;top:85%; left:10%;
z-index: 3;
overflow: hidden;
display: block;
margin: 0px 0px;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
background-position: 0px 0;
-webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
0%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(180%)brightness(500%);}
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:71%; left:17%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)}
100%{transform: rotate(0deg);}
}
</style>
<style type="text/css">.items { animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >
var lrc = ` 为情所伤(DJ 豪大大版)-庄心妍
词：镜喜
曲：祁隆
你说不会在爱情里犯错
也说过会永远的爱我
才发现只剩下虚伪的承诺
用泪水把回忆包裹
我也曾经想把爱去闪躲
可摆脱不了那份寂寞
结果都是让我一错再错
被伤过的心再次漂泊
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
你说不会在爱情里犯错
也说过会永远的爱我
才发现只剩下虚伪的承诺
用泪水把回忆包裹
我也曾经想把爱去闪躲
可摆脱不了那份寂寞
结果都是让我一错再错
被伤过的心再次漂泊
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 80, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
var image = document.getElementById("testImg"),
button = document.getElementById("btn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
ganguang.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>ganguang.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>ganguang.style.animationPlayState = 'paused');
</script >
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
欣赏 俺先欣赏美女再听歌{:4_358:} 做得真好{:4_190:} 欣赏
就架子鼓动画而言，称作css动画更合适。 这个架子鼓动画原来是代码弄的，不说的话还以为是用个动图呢。
制作真漂亮。欣赏亚伦老师好帖{:4_187:} 樵歌 发表于 2023-2-26 17:25
俺先欣赏美女再听歌
樵哥哥我一直等都没有看见美女啊{:4_203:} 这个架子鼓漂亮的{:4_199:} 这个是html代码制作的 亚伦老师制作漂亮，好帖！欣赏学习中！{:4_205:} 小辣椒 发表于 2023-2-26 21:08
这个是html代码制作的
代码太多只好打包了！ 亚伦影音工作室 发表于 2023-2-26 23:45
代码太多只好打包了！
给你发的密电码看见没有？ 好看的播放器，欣赏老师的精彩！{:4_187:}
页:
[1]