千羽 发表于 2022-3-30 21:56

【学习帖】小水滴

<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -304px;
      width: 1200px;
      height: 660px;
      top: 80px;
      background: #eee url('http://www.hongrenju.net/data/attachment/forum/202203/30/211034wtccq20ntgtg27ng.jpg') no-repeat center/cover;
      opacity: 0.95;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 音乐控制按钮 */
.picBtn {
       position: absolute;
       width: 100px;
       height: 100px;
       left: 280px;
       top: 540px;
       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://music.163.com/song/media/outer/url?id=1811771647.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-30 22:10

不错哈

千羽 发表于 2022-3-30 22:14

用影子的代码，费老大劲了……{:6_211:}

千羽 发表于 2022-3-30 22:15

马黑黑 发表于 2022-3-30 22:10
不错哈

好像又有点乱了{:6_217:}

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

活泼可爱，羽儿的制作真漂亮{:4_199:}

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

千羽 发表于 2022-3-30 22:15
好像又有点乱了
你的结尾多了</td></tr></table>，导致页面有点错位。
帮你删掉了，现在没问题了。

千羽 发表于 2022-3-30 22:25

红影 发表于 2022-3-30 22:18
活泼可爱，羽儿的制作真漂亮

背景图是拼的，有点乱{:4_173:}

千羽 发表于 2022-3-30 22:25

红影 发表于 2022-3-30 22:18
你的结尾多了，导致页面有点错位。
帮你删掉了，现在没问题了。

知道了，谢谢影子{:4_179:}

加林森 发表于 2022-3-30 22:57

挺好的，很漂亮的。{:4_199:}

马黑黑 发表于 2022-3-30 23:30

千羽 发表于 2022-3-30 22:15
好像又有点乱了

还可以的

红影 发表于 2022-3-31 11:25

千羽 发表于 2022-3-30 22:25
背景图是拼的，有点乱

很好的呢，这片叶子在这个环境里特别协调{:4_187:}

红影 发表于 2022-3-31 11:25

千羽 发表于 2022-3-30 22:25
知道了，谢谢影子

不客气啊，羽儿做得很快，特别赞呢{:4_187:}

加林森 发表于 2022-3-31 11:32

加油，更上一层楼。{:5_154:}

千羽 发表于 2022-4-1 21:51

加林森 发表于 2022-3-30 22:57
挺好的，很漂亮的。

谢队长鼓励哦{:4_187:}

千羽 发表于 2022-4-1 21:52

马黑黑 发表于 2022-3-30 23:30
还可以的

谢了哦{:4_187:}

千羽 发表于 2022-4-1 21:53

红影 发表于 2022-3-31 11:25
很好的呢，这片叶子在这个环境里特别协调

当时不知道把这叶子放那好，匆忙中找了一图……{:4_173:}

千羽 发表于 2022-4-1 21:54

红影 发表于 2022-3-31 11:25
不客气啊，羽儿做得很快，特别赞呢

谢谢影子鼓励{:4_185:}

千羽 发表于 2022-4-1 21:55

加林森 发表于 2022-3-31 11:32
加油，更上一层楼。

好的谢谢队长{:4_187:}

大猫咪 发表于 2022-4-1 22:01

真清爽，画面太漂亮了，千羽真棒，{:4_187:}{:4_190:}

千羽 发表于 2022-4-1 22:03

大猫咪 发表于 2022-4-1 22:01
真清爽，画面太漂亮了，千羽真棒，

一点也不棒啊，自己不满意{:4_203:}
页: [1] 2
查看完整版本: 【学习帖】小水滴