论坛 › 欢乐水吧 › 假如有如果（动态树叶学习）

红影 发表于 2022-3-29 22:13

假如有如果（动态树叶学习）

<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -304px;
      width: 1200px;
      height: 660px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/62430e3327f86abb2ac6057b.jpg') no-repeat center/cover;
      opacity: 0.95;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 音乐控制按钮 */
.picBtn {
       position: absolute;
       width: 127px;
       height: 150px;
       left: 820px;
       top: 460px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif') no-repeat;
       cursor: pointer;
}
/* 变色文本 */
.txtBg {
      position: absolute;
      top: 100px;
      right: 120px;
      font-size: 4rem;
      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; }
}

/* 动图定位 */
.dongtu {
      position: absolute;
      width: 312px;
      height: 447px;      
      left: 840px;
      top: 180px;
      
}
/* 绿叶水珠 */


.leaf {
   position: relative;
   left: 240px;
   top: 10px;
   width: 200px;
   height: 200px;
   border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
   background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
   transform-origin: 0 0;
   animation: swift 5s ease-in infinite;
}

.leaf::before, .leaf::after { content: ''; position: absolute; }

.leaf::before {
   width: 30px;
   height: 8px;
   background: olive;
   opacity: .75;
   border-radius: 1px;
   left: -25px;
   top: -5px;
   transform: rotate(15deg);
}

.leaf::after {
   width: 25px;
   height: 20px;
   border-radius: 50%;
   background: #eee;
   opacity: 0.4;
   left: 25%;
   top: 25%;
   animation: bigger 5s linear infinite;
}
@keyframes bigger {
   0% { left: -10px;top: -10px; width: 10px; height: 8px; opacity: .1; }
   10% { left: 35%;top: 35%; width: 15px; height: 20px;opacity: .2 }
   20% { left: 45%; top: 44%; width: 25px; height: 30px;opacity: .3 }
   30% { left: 55%; top: 54%; width: 35px; height: 40px;opacity: .4 }
   40% { left: 65%; top: 64%; width: 45px; height: 45px;opacity: .4 }
   50% { left: 65%; top: 64%; width: 45px; height: 50px;opacity: .4 }
   60% { left: 65%; top: 64%; width: 50px; height: 50px;opacity: .4 }
   70% { left: 70%; top: 70%; width: 50px; height: 55px;opacity: .3 }
   80% { left: 80%; top: 80%; width: 50px; height: 60px;opacity: .2 }
   90% { left: 80%; top: 100%; width: 50px; height: 60px;opacity: .2 }
   100% { left: 80%; top: 120%; width: 45px; height: 50px;opacity: 0 }
}

@keyframes swift {
   to { transform: rotate(5deg); }
}
</style>

<div id="tzDiv">
                <div class="txtBg">假如有如果</div>
      <div class="leaf"></div>

      <div class="dongtu">
      <img alt="" src="https://pic.imgdb.cn/item/624312dd27f86abb2ad7fa52.gif"/>
      </div>
      
      <button id="picBtn" class="picBtn"></button>
      <audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/03/28/64c1c21f71d91c57d29c67a0ab8e1aab.mp3"

loop="loop" autoplay="autoplay" ></audio>
</div><br><br><br><br><br>

<script language="javascript">


var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif')") :
(mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')";
});
</script>
<br><br><br><br><br>

红影 发表于 2022-3-29 22:15

好像水珠有点大呢，试着调了半天，还是不太像滴落过程{:4_173:}

转转 发表于 2022-3-29 22:17

哈哈啊，好，像叶子吐泡泡{:4_172:}

红影 发表于 2022-3-29 22:18

右边散出的小球的动图被我切了一半，放这里正好{:4_173:}

红影 发表于 2022-3-29 22:19

@马黑黑来收作业了{:4_187:}

加林森 发表于 2022-3-29 22:20

挺好玩的。红影制作得真好看。

马黑黑 发表于 2022-3-29 23:01

蜥蜴等了一千年都喝不上一滴水{:5_106:}

马黑黑 发表于 2022-3-29 23:01

构思精巧，帖子整体活泼可爱，赞

红影 发表于 2022-3-29 23:36

转转 发表于 2022-3-29 22:17
哈哈啊，好，像叶子吐泡泡

哈哈，还真有点像呢{:4_173:}

红影 发表于 2022-3-29 23:37

加林森 发表于 2022-3-29 22:20
挺好玩的。红影制作得真好看。

黑黑的这个树叶非常漂亮，试着用在帖子里{:4_173:}

红影 发表于 2022-3-29 23:38

马黑黑 发表于 2022-3-29 23:01
蜥蜴等了一千年都喝不上一滴水

这里的水足够多，能把蜥蜴灌得饱透{:4_173:}

红影 发表于 2022-3-29 23:39

马黑黑 发表于 2022-3-29 23:01
构思精巧，帖子整体活泼可爱，赞

谢谢黑黑，是你那树叶可爱{:4_187:}

加林森 发表于 2022-3-29 23:46

红影 发表于 2022-3-29 23:37
黑黑的这个树叶非常漂亮，试着用在帖子里

挺漂亮的{:4_171:}

红影 发表于 2022-3-30 09:51

加林森 发表于 2022-3-29 23:46
挺漂亮的

叶片上的水珠还没调好，本来想让它掉到下面跃起的水中的{:4_173:}

来看你 发表于 2022-3-30 11:13

妥妥的活学活用 {:4_187:}

加林森 发表于 2022-3-30 12:41

红影 发表于 2022-3-30 09:51
叶片上的水珠还没调好，本来想让它掉到下面跃起的水中的

没什么的，边学习边修改。

红影 发表于 2022-3-30 16:25

来看你 发表于 2022-3-30 11:13
妥妥的活学活用

这个树叶好漂亮的，我的背景图选得不好，感觉它还能在其他背景里更漂亮{:4_173:}

红影 发表于 2022-3-30 16:26

加林森 发表于 2022-3-30 12:41
没什么的，边学习边修改。

嗯嗯，学会怎么改了，接下来只是花功夫的事而已了。

加林森 发表于 2022-3-30 17:04

红影 发表于 2022-3-30 16:26
嗯嗯，学会怎么改了，接下来只是花功夫的事而已了。

就是，现在就是要有耐心来修改了。

红影 发表于 2022-3-30 20:36

加林森 发表于 2022-3-30 17:04
就是，现在就是要有耐心来修改了。

慢慢调总能找到想要的结果的{:4_173:}

查看完整版本: 假如有如果（动态树叶学习）