思念谁（黑黑按钮学习）TO：队长
<style>.spiBox {
top:150px;left:-300px;
position: relative;
width: 1196px;
height: 619px;
background: #FFF url('https://wj.zp68.com/lxx/yunhua/2022/05/14/1196X619.gif') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;
border-radius:12px;
}
.ball { /* 球体 */
left:900px;top: 380px; width: 40px; height: 40px;
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: 32px;
height: 32px;
top: 55%;
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: 410px;
width: 660px;
height: 200px;
line-height: 200px;
font-family: '微软雅黑', '宋体';
font-size: 3.5rem;
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: 320px;
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 60s linearinfinite;
}
/* 走马灯动画 */
@keyframes fly {
from { transform: translateX(100%); }
to { transform: translateX(calc(-860% - var(--w))); }
}
</style>
<div class="spiBox">
<img src="https://wj.zp68.com/lxx/yunhua/2022/05/14/32X32.jpg" alt="">
<div class="ball">
<div></div>
<div></div>
</div>
<div class="xiewen">岁月粒子效果</div>
<div class="txtFly">
<div><font color="Silver">黑黑的按钮分享 小辣椒捣鼓一个送给队长感谢队长每天坚守水区 辛苦了！</font></div>
</div></div><br>
<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "https://wj.zp68.com/lxx/yunhua/2022/05/14/03.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>
<br><br><br><br><br><br><br><br><br><br><br><br>
黑黑这个按钮和斜文字体教程我没有看的，直接按队长的分享做了一个，背景加了岁月的粒子效果，感谢三位了
岁月的粒子效果
泪的小雨
https://www.huachaowang.com/foru ... =59417&fromuid=4275
(出处: 花潮论坛)
@走过岁月 黑黑，这个滚动字速度我不知道在哪里修改，感觉快了一点，记得你上传那个打字效果说过可以改数字，这里我没有找到@马黑黑 小辣椒制作出来的作品真是太精美，太漂亮了。{:4_199:} 加林森 发表于 2022-5-14 13:11
小辣椒制作出来的作品真是太精美，太漂亮了。
队长，是按你那个别人拿去的代码制作的。我现在就套用大家的代码玩了 小辣椒 发表于 2022-5-14 13:13
队长，是按你那个别人拿去的代码制作的。我现在就套用大家的代码玩了
好的好的。我不会你那个粒子的，就看你的玩了。 本帖最后由 大猫咪 于 2022-5-14 13:18 编辑
辣椒制作真棒！画面真漂亮！湖面泛起的微波，优美动人的风景画，刻画得如此细腻，赞！
特别喜欢的歌！感人肺腑，如醇厚的酒，越陈，回味就越浓。队长收礼开心！
{:4_204:}{:4_199:} 巫启贤演唱的思念谁 曾经小辣椒也是很喜欢的，找出来送给队长，其实被人思念也是一种幸福 加林森 发表于 2022-5-14 13:15
好的好的。我不会你那个粒子的，就看你的玩了。
队长这个就大家分享快乐的，开心玩就好 大猫咪 发表于 2022-5-14 13:16
辣椒制作真棒！画面真漂亮！湖面泛起的微波，优美动人的风景画，刻画得如此细腻，赞！
特别喜欢的歌！感 ...
猫猫这个是黑黑按钮和文字与岁月的粒子效果一起玩了，合做一个帖里面了 小辣椒 发表于 2022-5-14 13:10
黑黑，这个滚动字速度我不知道在哪里修改，感觉快了一点，记得你上传那个打字效果说过可以改数字，这里我没 ...
打字的效果在这里：
文字效果集中营 - 第6页 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57643&page=6#pid1482303 加林森 发表于 2022-5-14 13:20
打字的效果在这里：
文字效果集中营 - 第6页 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https ...
谢谢队长，这个滚动字速度我想改慢一点 小辣椒 发表于 2022-5-14 13:20
猫猫这个是黑黑按钮和文字与岁月的粒子效果一起玩了，合做一个帖里面了
嗯看出来了 粒子效果加的真棒！ 赞！辣椒真棒！
{:4_204:}{:4_199:} 小辣椒 发表于 2022-5-14 13:21
谢谢队长，这个滚动字速度我想改慢一点
嗯嗯 小辣椒 发表于 2022-5-14 13:18
队长这个就大家分享快乐的，开心玩就好
好的好的 小辣椒 发表于 2022-5-14 13:17
巫启贤演唱的思念谁 曾经小辣椒也是很喜欢的，找出来送给队长，其实被人思念也是一种幸福
谢谢小辣椒，我很喜欢这首歌曲，很有味道的，慢慢去欣赏了。 加林森 发表于 2022-5-14 13:20
打字的效果在这里：
文字效果集中营 - 第6页 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https ...
这个滚动字感觉不一样的，我自己老喜欢瞎加代码，这次就等黑黑教了。不乱改了 大猫咪 发表于 2022-5-14 13:21
嗯看出来了 粒子效果加的真棒！ 赞！辣椒真棒！
谢谢猫猫夸奖，粒子效果是岁月的精彩制作，我不会就只能这样移花接木了{:4_173:} 小辣椒 发表于 2022-5-14 13:26
这个滚动字感觉不一样的，我自己老喜欢瞎加代码，这次就等黑黑教了。不乱改了
老黑说的可以调整的。