天空依然孤独（学习黑黑风效果）TO：黑黑
<style>.outer { left: -302px; width: 1236px; height: 763px; top: 150px; background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/04/0F.gif') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width:500px; inherit; height: 135px;left: 730px;top: 150px; background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/04/105.png'); animation: cloud_fly 40s linear infinite; }
.outer meter { position: absolute; width: 100px; left: 50px; left: 820px;top: 310px;bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 830px; bottom: 110px; width: 80px; height: 10px; top: 260px;background: green; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left:calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px;background: darkgreen; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
</style>
<div class="outer">
<div class="sky"></div>
<meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div class="btn"></div>
</div>
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/06/04/tkyrgd.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');
aud.addEventListener('timeupdate', () => {
meter.value = aud.currentTime / aud.duration * 100;
});
btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');
</script>
<div style="position:absolute; width:500px; left:950px; top: 1420px; text-align:center;">
<style>
.txtBg {
font-size: 2.5rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }
}
</style>
<div class="txtBg">帖赠：黑黑
</script> </div></div>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑黑黑这个天空我加的小了一点，风只得用小一点了 @走过岁月
谢谢岁月的AE效果
天空依然孤独
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57528&fromuid=4275
(出处: 花潮论坛)
端午节，总算做了一个玩玩，谢谢黑黑的无私奉献，这么多的教程分享。辛苦了{:4_187:} CSS代码分多处放置不是一个好习惯，应将其整合在一起，放在 HTML 代码之前。做帖子应当遵循这样的代码布置：
<style>
/* CSS代码 */
</style>
<!-- HTML 代码 -->
<div class="mydiv"></div>
<script>
// JS 代码
</script>
小结：一个帖子，CSS + HTML + JS 这样的代码顺序是规范要求。
小辣椒 发表于 2022-6-4 11:08
@马黑黑黑黑这个天空我加的小了一点，风只得用小一点了
挺好 马黑黑 发表于 2022-6-4 11:14
CSS代码分多处放置不是一个好习惯，应将其整合在一起，放在 HTML 代码之前。做帖子应当遵循这样的代码布置 ...
文字高度就错在这里？ 小辣椒 发表于 2022-6-4 11:17
文字高度就错在这里？
也不是，但写代码是有规范的。这和家里放东西是一个道理：菜刀、碗筷之类的放在厨房，不应放在衣柜里，对吧 亲爱的总是能把粒子运用得那么完美。真漂亮的制作。黑黑收礼开心{:4_187:} 马黑黑 发表于 2022-6-4 11:18
也不是，但写代码是有规范的。这和家里放东西是一个道理：菜刀、碗筷之类的放在厨房，不应放在衣柜里，对 ...
{:4_173:}
这个就是操作不规范的原因 红影 发表于 2022-6-4 11:21
亲爱的总是能把粒子运用得那么完美。真漂亮的制作。黑黑收礼开心
亲爱的，是你夸的，我没有这么好哦{:4_173:} 小辣椒 发表于 2022-6-4 11:22
这个就是操作不规范的原因
除非必要，否则按规矩来 马黑黑 发表于 2022-6-4 11:25
除非必要，否则按规矩来
主要以前只要空间上传都不会出现这些问题，所以我都不当回事，现在直接代码发帖就容易出现错误了 小辣椒 发表于 2022-6-4 11:27
主要以前只要空间上传都不会出现这些问题，所以我都不当回事，现在直接代码发帖就容易出现错误了
以前你的那个做法，应该是CSS独立出来的，是一个.css文件 马黑黑 发表于 2022-6-4 11:28
以前你的那个做法，应该是CSS独立出来的，是一个.css文件
对的 小辣椒 发表于 2022-6-4 11:29
对的
那它也是CSS、HTML、JS分开的 马黑黑 发表于 2022-6-4 11:36
那它也是CSS、HTML、JS分开的
我一个文件夹上传的 小辣椒 发表于 2022-6-4 11:38
我一个文件夹上传的
一般都这样规划。通常，做网站，JS独立一个文件夹，CSS独立一个文件夹，HTML文档根据需要放在不同的文件夹 马黑黑 发表于 2022-6-4 11:40
一般都这样规划。通常，做网站，JS独立一个文件夹，CSS独立一个文件夹，HTML文档根据需要放在不同的文件 ...
我是师父一直这样教下来的，笨学生一个{:4_173:} 漂亮的制作，赞!{:4_199:}
页:
[1]
2