小辣椒 发表于 2022-7-24 17:34

草原绿了(同玩岁月粒子效果)


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1277px;
      height: 745px;
      position: relative;
      background: #000 url('https://wx.ttt.dj/2022/07/24/3IF.gif') no-repeat;
      left: -340px;
      top: 150px
}

/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox50 {
      margin: 10px;
      position: relative;
      width: 50px; height: 50px;
      line-height: 50px; font-size: 14px;
      background: linear-gradient(Green,Chartreuse,Green);
      outline:none;
      color: Indigo;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 0.7px rgba(0,0,0,0.45);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox50:hover { opacity: 0.8; }
.roBox50:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute;width: 500px; left:350px; top:550px; color: #3b6304;"><marqueescrollamount="5" direction="left" ><b><font face="微软雅黑" size="5">草儿绿了 大地一派生机勃勃 像铺上了绿地毯牛羊有了美味的食物 都纷纷出动了</font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox50" style="left:74.8%;top:80.5%;">●</div>
</div>

<audio id="ymusic" src="https://wx.ttt.dj/2022/07/24/cyll.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-7-24 17:35

@走过岁月

小辣椒 发表于 2022-7-24 17:36

今天休息,捣鼓一个,谢谢岁月的草原粒子效果,小辣椒感觉这个绿真漂亮

小辣椒 发表于 2022-7-24 17:37

加了黑黑的转盘播放器@马黑黑

小辣椒 发表于 2022-7-24 17:37

来不及回帖~~~先去吃饭了{:4_170:}

马黑黑 发表于 2022-7-24 17:51

小辣椒 发表于 2022-7-24 17:37
加了黑黑的转盘播放器@马黑黑

盘子好看。你的草地下面是不是藏龙卧虎,动静不小呢{:4_170:}

红影 发表于 2022-7-24 19:12

亲爱的真厉害,加了动物后,这片会动的草地更是生机勃勃了{:4_199:}

绿叶清舟 发表于 2022-7-24 19:20

辣椒也太快了,这个更有画面感了

小辣椒 发表于 2022-7-24 19:36

马黑黑 发表于 2022-7-24 17:51
盘子好看。你的草地下面是不是藏龙卧虎,动静不小呢

黑黑,当初学习玩小光盘的时候都不知道怎么换颜色,捣鼓了几次才明白,现在就知道应该怎么换颜色比较漂亮了{:4_173:}

小辣椒 发表于 2022-7-24 19:38

红影 发表于 2022-7-24 19:12
亲爱的真厉害,加了动物后,这片会动的草地更是生机勃勃了

哈哈~~捣鼓岁月的粒子效果也是算我的兴趣爱好吧{:4_170:}

小辣椒 发表于 2022-7-24 19:39

绿叶清舟 发表于 2022-7-24 19:20
辣椒也太快了,这个更有画面感了

今天看见岁月的这个草原的粒子感觉也是不错的,就捣鼓一个玩玩{:4_189:}

马黑黑 发表于 2022-7-24 19:44

本帖最后由 马黑黑 于 2022-7-24 19:46 编辑

小辣椒 发表于 2022-7-24 19:36
黑黑,当初学习玩小光盘的时候都不知道怎么换颜色,捣鼓了几次才明白,现在就知道应该怎么换颜色比较漂亮 ...
我在教程地盘做了个梳理性质的教材,能够帮助大家巩固基础知识和强化基本技能,建议花点时间瞧瞧

小辣椒 发表于 2022-7-24 19:46

马黑黑 发表于 2022-7-24 19:44
我再教程地盘做了个梳理性质的教材,能够帮助大家巩固基础知识和强化基本技能,建议花点时间瞧瞧

在你地盘?现在我去看看

马黑黑 发表于 2022-7-24 19:46

小辣椒 发表于 2022-7-24 19:46
在你地盘?现在我去看看

{:4_190:}

绿叶清舟 发表于 2022-7-24 20:05

小辣椒 发表于 2022-7-24 19:39
今天看见岁月的这个草原的粒子感觉也是不错的,就捣鼓一个玩玩

很美的看得心旷神怡

上海朝阳 发表于 2022-7-24 20:41

美美的

小辣椒 发表于 2022-7-24 20:46

马黑黑 发表于 2022-7-24 19:46


谢谢黑黑,真的讲的很仔细,这么多的综合知识点,其实我平时学习太少了

小辣椒 发表于 2022-7-24 20:47

上海朝阳 发表于 2022-7-24 20:41
美美的

朝阳大哥晚上好,谢谢欣赏{:4_187:}

小辣椒 发表于 2022-7-24 20:50

绿叶清舟 发表于 2022-7-24 20:05
很美的看得心旷神怡

是的,我也是感觉辽阔的大草原,万物复苏 生机勃勃,然后草原粒子随音乐而抖动,还有岁月这个绿颜色选的非常好

走过岁月 发表于 2022-7-24 20:52

小辣椒 发表于 2022-7-24 17:35
@走过岁月

来了小辣椒
页: [1] 2
查看完整版本: 草原绿了(同玩岁月粒子效果)