论坛 › 欢乐水吧 › 禅定（学习新按钮、斜纹字以及蜘蛛转弯）

红影 发表于 2022-4-20 19:28

禅定（学习新按钮、斜纹字以及蜘蛛转弯）

<style>
.spiBox {
   top:120px;left:-302px;
   position: relative;
   width: 1200px;
   height: 675px;
   background: #FFF url('https://pic.imgdb.cn/item/625ca2fe239250f7c50800be.jpg') no-repeat center/cover;
   box-shadow: 4px 4px 5px #888;
   border-radius:12px;
}
.ball { /* 球体 */
      left:200px;top: 180px; width: 60px; height: 60px;
      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: 139px;
      height: 108px;
      top: 40%;
      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: 120px;
      width: 660px;
      height: 200px;
      line-height: 200px;
      font-family: '微软雅黑', '宋体';
      font-size: 4.2rem;
      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: 300px;
      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 32s linearinfinite;
}
/* 走马灯动画 */
@keyframes fly {
                from { transform: translateX(100%); }
                to { transform: translateX(calc(-140% - var(--w))); }
      }
</style>
<div class="spiBox">
      <img src="https://pic.imgdb.cn/item/625ca31b239250f7c50820ac.gif" alt="" />
<div class="ball">
      <div></div>
      <div></div>
</div>
<div class="xiewen">禅定 - 巫娜</div>
<div class="txtFly" >
   <div>逍遥湖上酒微醒，青烟静谧荡轻盈。浮生一梦醉眼看，繁花落尽，飞绪游思不定。</div>
</div></div><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=304937.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>

红影 发表于 2022-4-20 19:31

进入4月份，老老实实在家禅定闭关，不能出家门也好，可以借机修心养性了。
嗯，现在粮食还有，否则还得兼修辟谷功夫。

红影 发表于 2022-4-20 19:32

只当那一方水面是我家的使用面积，外围的山水属于建筑面积。
我只能在这么一块使用面积的范围内溜达，不能越界。{:4_173:}

东篱闲人 发表于 2022-4-20 19:33

漂亮！{:5_116:}

千羽 发表于 2022-4-20 19:38

那船儿好可爱，转弯掉头时太有意思了……{:4_205:}

千羽 发表于 2022-4-20 19:40

美景里影儿用了几个刚学不久的元素，制作得挺好的{:4_187:}

樵歌 发表于 2022-4-20 20:07

挖，师妹手艺猛然精进！恭喜!{:4_187:}

樵歌 发表于 2022-4-20 20:08

千羽 发表于 2022-4-20 19:38
那船儿好可爱，转弯掉头时太有意思了……

同感同感哈。{:4_174:}

樵歌 发表于 2022-4-20 20:08

红影 发表于 2022-4-20 19:31
进入4月份，老老实实在家禅定闭关，不能出家门也好，可以借机修心养性了。
嗯，现在粮食还有，否则还得兼 ...

就当成一场苦难的修行好了，怎么办呢。{:4_187:}

樵歌 发表于 2022-4-20 20:10

红影 发表于 2022-4-20 19:32
只当那一方水面是我家的使用面积，外围的山水属于建筑面积。
我只能在这么一块使用面积的范围内溜达，不能 ...

我们虽不能进来，但大家心与你们同游在哪方山水。

大猫咪 发表于 2022-4-20 20:11

红影这制作好看，看着舒服    音乐融合的真棒，有空学习 ！

{:4_204:}{:4_199:}

马黑黑 发表于 2022-4-20 20:23

这是很成熟的作品，几个技术，都用的很娴熟。

值得点赞的是，作品主体鲜明，有意境。构思精巧，实现手法多样化而未有技术堆积感，一切自然而然。

加林森 发表于 2022-4-20 21:22

红影制作得真漂亮，几个教程都用上了，融合得真好。播放器的颜色也改变了。{:4_199:}

闲言不语 发表于 2022-4-20 21:46

红影 发表于 2022-4-20 19:31
进入4月份，老老实实在家禅定闭关，不能出家门也好，可以借机修心养性了。
嗯，现在粮食还有，否则还得兼 ...

金山、奉贤社会面清零了，快走出家们了。

千羽 发表于 2022-4-20 21:50

樵歌 发表于 2022-4-20 20:08
同感同感哈。

很担心船上的人儿，，但愿平安无事，别掉进水里{:4_203:}

闲言不语 发表于 2022-4-20 21:54

红影 发表于 2022-4-20 19:31
进入4月份，老老实实在家禅定闭关，不能出家门也好，可以借机修心养性了。
嗯，现在粮食还有，否则还得兼 ...

紧闭房门,静描音画三两卷。栖身楼下,疫情榜上有名人。{:4_170:}

樵歌 发表于 2022-4-21 07:22

千羽 发表于 2022-4-20 21:50
很担心船上的人儿，，但愿平安无事，别掉进水里

放心，有俺们大家伙在旁边站岗，不会有事的{:4_190:}

千羽 发表于 2022-4-21 19:57

樵歌 发表于 2022-4-21 07:22
放心，有俺们大家伙在旁边站岗，不会有事的

嗯，樵歌老师会奋不顾身地下水救人{:4_187:}

樵歌 发表于 2022-4-22 08:08

千羽 发表于 2022-4-21 19:57
嗯，樵歌老师会奋不顾身地下水救人

对对，以前就这样干过，真的，我水性很好。大海里也敢游泳{:4_205:}

岩新新 发表于 2022-4-22 10:48

分享精彩制作！

查看完整版本: 禅定（学习新按钮、斜纹字以及蜘蛛转弯）