《紫竹调》 -- 民乐
本帖最后由 加林森 于 2022-4-22 17:17 编辑 <br /><br /><style>.spiBox {
top:120px;left:-302px;
position: relative;
width: 1200px;
height: 675px;
background: #FFF url('https://pic.imgdb.cn/item/62623d7f239250f7c52d0cc4.jpg') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;
border-radius:12px;
}
.ball { /* 球体 */
left:200px;top: 180px; width: 60px; height: 60px;
background: Blue linear-gradient(135deg,rgba(65,105,225,.85),rgba(100,149,237,.95));
position: absolute; border-radius: 50%;
filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
transform: skew(2deg); cursor: pointer;
}
.ball::before { content: ''; position: absolute; } /* 伪元素：修饰 */
.ball::before { /* 伪元素一：高亮 */
left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
}
.ball div { /* 子元素共2个：动画 */
position: absolute; border: 8px solid rgba(0,0,0,.45); border-radius: 50%;
border-color: #4682B4 #6495ED #4682B4 #6495ED;opacity: .55;
}
.ball div:nth-child(1) { left: -8px; top: -8px; right: -8px; bottom: -8px; animation: rot 4s linear infinite;}
.ball div:nth-child(2) { left: -16px; top: -16px; right: -16px; bottom: -16px;animation: rot 12s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } } /* 动画 转圈 */
.spiBox img {
position: absolute;
width: 139px;
height: 108px;
top: 40%;
right: 0px;
animation: walk 42s linear infinite;
}
@keyframes walk {
0% { transform: rotate(0deg); right: 300px;top:330px; }
10% { transform: rotate(0deg); right: 470px;top:310px; }
20% { transform: rotate(0deg); right: 640px;top:290px; }
30% { transform: rotate(0deg); right: 810px;top:290px; }
40% { transform: rotate(0deg); right: 980px;top:310px; }
50%{ transform: rotateY(180deg); right: 1000px;top:330px; }
60%{ transform: rotateY(180deg); right: 830px;top:350px; }
70%{ transform: rotateY(180deg); right: 660px;top:370px; }
80%{ transform: rotateY(180deg); right: 490px;top:370px; }
90%{ transform: rotateY(180deg); right: 320px;top:350px; }
100%{ transform: rotateY(360deg); right: 300px;top:330px; }
}
.xiewen {/* 斜纹文本 */
position: absolute;left:280px;top: 120px;
width: 660px;
height: 200px;
line-height: 200px;
font-family: '微软雅黑', '宋体';
font-size: 4.2rem;
font-weight: 900;
text-align: center;
background: darkgreen linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 55%, transparent 0);
background-size: 4px 4px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #111;
animation: wenzi 4s linear infinite alternate;
}
@keyframes wenzi { 0%{opacity: 0.8;} 100% { opacity: 0.3; } }
/* 文字走马灯 */
.txtFly {
position: absolute;
--w: 300px;
width: var(--w);
left: 450px;
top: 566px;
overflow: hidden;
}
.txtFly div {
word-break: keep-all;
white-space: nowrap;
font: normal 22px /24px '楷体','微软雅黑';
color:#ccff99; text-shadow: 0 0 2px #ff66ff;
animation: fly 32s linearinfinite;
}
/* 走马灯动画 */
@keyframes fly {
from { transform: translateX(100%); }
to { transform: translateX(calc(-680% - var(--w))); }
}
</style>
<div class="spiBox">
<img src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" />
<div class="ball">
<div></div>
<div></div>
</div>
<div class="xiewen">紫竹调--民乐</div>
<div class="txtFly" >
<div>紫竹调是广泛传播于吴语区(苏南、上海、浙江大部、皖南等)的传统小调歌曲，其源头可以追溯到春秋战国时期的民歌。经过历代艺人的传唱和修改，各地的《紫竹调》都加入了自己的地方特色，在音节的处理上有所不同。但其词其曲，皆有浓厚的吴风。</div>
</div></div><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/21/65dc3cdb07d38587dbabba473b23eb49.mp3";
au.autoplay = flag;
au.loop= true;
au.style.display = "none"
ball.appendChild(au);
ball.onclick = function(){
if(flag) {
Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
au.pause();
flag = false;
} else {
Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
au.play();
flag = true;
}
}
</script>
此制作根据红影的帖制作的，请红影谅解。谢谢！ 太棒了，谢谢你，谢谢红影。紫竹调是我很喜欢的乐曲之一，它清新优雅 流畅柔美 热情奔放，听起来十分惬意。 好像缺语句？论坛框都变形了。 看到了，是多了</td></tr></table>，帮你删掉了。
不错啊，也做了斜纹文字和那个按钮。蝴蝶只要往回走就行了，不需要Y轴转向的。 加林森 发表于 2022-4-22 13:55
此制作根据红影的帖制作的，请红影谅解。谢谢！
没事啊，反正都是黑黑的代码，我只是组合一下而已，要谢应该谢黑黑才是{:4_173:} 队长用的文字比较多， transform: translateX(calc(-140% - var(--w)));里面的-140要调一下，至少-200以上，才能容纳所有文字，具体多少要试的，能看到最后一个字出来就行。 梦油 发表于 2022-4-22 14:51
太棒了，谢谢你，谢谢红影。紫竹调是我很喜欢的乐曲之一，它清新优雅 流畅柔美 热情奔放，听起来十分惬意。
梦油喜欢就多听听。{:4_190:} 加林森 发表于 2022-4-22 16:42
梦油喜欢就多听听。
我听了好几遍啦。 红影 发表于 2022-4-22 15:05
好像缺语句？论坛框都变形了。
就是就是。 红影 发表于 2022-4-22 15:10
看到了，是多了，帮你删掉了。
不错啊，也做了斜纹文字和那个按钮。蝴蝶只要往回走就行了，不需要Y轴转 ...
嗯嗯。谢谢红影了。{:4_204:} 红影 发表于 2022-4-22 15:11
没事啊，反正都是黑黑的代码，我只是组合一下而已，要谢应该谢黑黑才是
嗯嗯，都应该感谢的。{:4_204:} 红影 发表于 2022-4-22 15:20
队长用的文字比较多， transform: translateX(calc(-140% - var(--w)));里面的-140要调一下，至少-200以上 ...
好的好的，我去调整。 红影 发表于 2022-4-22 15:20
队长用的文字比较多， transform: translateX(calc(-140% - var(--w)));里面的-140要调一下，至少-200以上 ...
调整好了，红影再来看看。{:4_204:} 梦油 发表于 2022-4-22 16:50
我听了好几遍啦。
好的好的，喜欢就多听听。{:4_190:} 加林森 发表于 2022-4-22 17:19
好的好的，喜欢就多听听。
也许因为我的年纪大了，我对老歌、红歌很有兴趣。年轻时我喜欢玩萨克斯，现在老了也不摸它了。 梦油 发表于 2022-4-22 17:53
也许因为我的年纪大了，我对老歌、红歌很有兴趣。年轻时我喜欢玩萨克斯，现在老了也不摸它了。
哦，我喜欢吹笛子、拉小提琴、弹钢琴。。。有点多。{:5_117:} 加林森 发表于 2022-4-22 17:56
哦，我喜欢吹笛子、拉小提琴、弹钢琴。。。有点多。
太棒了。看来，我们还有一些共同的爱好。 梦油 发表于 2022-4-22 18:32
太棒了。看来，我们还有一些共同的爱好。
嗯嗯，是的。 音乐很好，帖子很美
页:
[1]
2