勇于尝试：《小马过河》的启示 - 学习马老师贴《那匹马》 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-7-5 16:48

勇于尝试：《小马过河》的启示 - 学习马老师贴《那匹马》

本帖最后由杨帆于 2025-7-5 21:44 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小马过河</title>
</head>
<body>
<script type="importmap">
   {
         "imports": {
            "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
            "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
         }
   }
</script>
<style>
#papa {position: relative; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; overflow: hidden; background: url('https://pic.imgdb.cn/item/66ab97d2d9c307b7e9734c2d.jpg') no-repeat center/cover;box-shadow: 0 0 10px rgba(0, 0, 0, .5);z-index: 1; }
#btnFs { position: absolute; left: 20px; top: 20px; padding: 6px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; pointer-events: auto; z-index: 10; }
#player { position: absolute; bottom: 5px; right: 48px; width: 120px; height: 120px; border: 3px solid orange; border-radius: 50%; cursor: pointer; transform: rotateX(60deg); z-index: 10; --tt: 6s; }
#player::before, #player::after { position: absolute; content: ''; border: inherit; border-radius: inherit; animation: rot var(--tt) linear infinite var(--state); }
#player::before { inset: 20px; border-color: transparent gold; }
#player::after { inset: 40px; border-width: 12px; border-style: dashed; --tt: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
#player:hover { filter: drop-shadow(0 0 50px fuchsia); }
#vid1 { position: absolute; right: 20px; bottom: -15px; width: 180px; height: 260px; opacity: 0.8; border-radius: 50%; mix-blend-mode: screen; transform: rotateY(60deg); -webkit-mask: radial-gradient(circle, silver, transparent, transparent); }
#vid2 { position: absolute; left: 0px; top: -120px; width: 130%; height: 150%; object-fit: cover; pointer-events: none; mix-blend-mode:soft-light; opacity: 0.8; z-index: -1; }
#vid3 { position: absolute; right: -120px; bottom: -120px; width: 100%; height: 40%; object-fit: cover; pointer-events: none; opacity: 0.8; mix-blend-mode: screen; z-index: -1; }
#vid4 { position: absolute; top: -80px; left: 0px; width: 100%; height: 120%; object-fit: cover; pointer-events: none; opacity: 0.8; mix-blend-mode: screen; z-index: -1; }
#vid5{ width: 100%; height: 100%; z-index:1; position:absolute; top:0%; left:0%; opacity: .9; object-fit: cover; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 12% 7.5% at 44% 88%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 99%); }
.dancer{ position: absolute; z-index:1;}
.my-words span { position: relative; animation: my-words 1.5s infinite var(--state); }
.my-words span:nth-child(1n) { animation-delay: 0.2s; }
.my-words span:nth-child(2n) { animation-delay: 0.4s; }
.my-words span:nth-child(3n) { animation-delay: 0.25s; }
.my-words span:nth-child(4n) { animation-delay: 0.35s; }
h4{ margin: 150px auto; padding: 5px; letter-spacing: 20px; text-align: center; font-weight: 580; text-transform: uppercase; column-count: 1; font-size: 5rem; font-family: 华文行楷; line-height: 38px; color: #E6E6FA; -webkit-background-clip: text; text-shadow: 0px 0px 10px red, -10px -10px 10px #00FF00; }
h4 span:nth-child(1n) { color: #9932CC; }
h4 span:nth-child(2n) { color: #FFD700; }
h4 span:nth-child(3n) { color: #FF1493; }
h4 span:nth-child(4n) { color: #ADFF2F; }
@keyframes my-words { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } }
</style>
<div id="papa">
   <span id="btnFs"></span>
   <video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b610e8f58.mp4" autoplay loop
         muted></video>
   <video id="vid2" src="https://video.699pic.com/videos/08/39/95/b_AhjCDc0FWt281561083995_10s.mp4" autoplay loop
         muted></video>
   <video id="vid3" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8f4ab37a1.mp4" autoplay loop
         muted></video>
   <video id="vid4" src="https://img.tukuppt.com/video_show/2422006/00/01/63/5b480d44a9c85.mp4" autoplay loop
         muted></video>
   <video id="vid5" src="https://img.tukuppt.com/video_show/2418175/01/81/85/6418f81fdb6db.mp4" autoplay loop
         muted></video>
   <audio id="aud" src="http://music.163.com/song/media/outer/url?id=1420026410.mp3" autoplay loop></audio>
   <h4 class="my-words span"><span>小</span><span>马</span><span>过</span><span>河</span></h4>
   <div id="player"></div>
   <img class="dancer" src="https://pic1.imgdb.cn/item/6868dda058cb8da5c890fc41.png" style="width: 256px; height:256px; left:5%; top: 40%;" alt="" />
   <img class="dancer" src="https://pic1.imgdb.cn/item/6868de0658cb8da5c890fc56.png" style="width: 84px; height: 67px; left:35%; top:60%;" alt="" />
</div>
<script>
   var mState = () => {
         papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
         player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
         player.title = aud.paused ? '播放' : '暂停';
      if (aud.paused) {vid1.pause(); vid2.pause();vid3.pause();vid4.pause();vid5.pause();
         } else { vid1.play(); vid2.play();vid3.play();vid4.play(); vid5.play();
         }
   };
   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
   player.onclick = () => {
   if (aud.paused) {aud.play();vid1.play(); vid2.play();vid3.play();vid4.play(); vid5.play();
         } else { aud.pause();vid1.pause();vid2.pause();vid3.pause();vid4.pause();vid5.pause();
         }
         mState();
   };
</script>
<script type="module">
   import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
   import { OrbitControls } from "three/addons/controls/OrbitControls.js";
   import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
   import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

   basic3(papa);
   renderer.outputEncoding = THREE.sRGBEncoding;
   const controls = new OrbitControls(camera, renderer.domElement);
   let mixer, actions = [], btns = [];
   const url = 'https://638183.freep.cn/638183/web/3models/Horse.glb';
   scene.add(new THREE.AmbientLight()); // 环境光

new GLTFLoader().load(url, gltf => {
const model = gltf.scene;
const scale = 0.005;
model.scale.set(scale, scale, scale);
model.rotateY(Math.PI / 5);
model.position.y -= 1.2;
scene.add(model);
mixer = new THREE.AnimationMixer(model);

if (gltf.animations.length > 0) {
   gltf.animations.forEach((a, k) => {
         actions.push(a);
   });
   playModel();
}
animate();
});
function animate() {
requestAnimationFrame(animate);
camera.lookAt(.2, .4, 3);
const delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
function playModel(idx = null) {
const playIdx = idx !== null ? idx : Math.floor(Math.random() * actions.length);
for (let k = 0; k < actions.length; k++) {
   const clip = mixer.clipAction(actions);
   if (k === playIdx) {
         clip.play();
   } else {
         clip.stop();
   }
}
}
qp.fs('papa', 'btnFs');
aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
</script>
</body>
</html>

梦油发表于 2025-7-5 17:07

老牛也要过河啊？{:4_189:}

杨帆发表于 2025-7-5 17:25

本帖最后由杨帆于 2025-7-5 17:38 编辑

梦油发表于 2025-7-5 17:07
老牛也要过河啊？
呵呵，老牛现在不过河，刚与小马说过它对这条河深浅的感受

梦江南 发表于 2025-7-5 17:31

小松鼠看得好认真，小马好像过了一半又退回去了呢？音乐助力，小马加油！{:4_199:}

杨帆发表于 2025-7-5 17:40

本帖最后由杨帆于 2025-7-5 17:45 编辑

梦江南发表于 2025-7-5 17:31
小松鼠看得好认真，小马好像过了一半又退回去了呢？音乐助力，小马加油！
一、故事
小马帮妈妈做事，要把半口袋麦子驮到河对岸的磨坊去。途中遇到一条小河，老牛说河水很浅，松鼠说河水很深，小马很为难，不知道该怎么办，只好跑回家问妈妈。妈妈鼓励小马自己去试试，小马再次来到河边，小心地过了河，发现河水既不像老牛说的那样浅，也不像松鼠说的那样深。

二、寓意
这个故事告诉我们，
做事要勇于尝试，不能光听别人说，要自己去实践、去体验，才能得出正确的结论。
同时也体现了面对问题时，要独立思考，具体问题具体分析，不能盲目听从他人的意见。

三、音乐

《菊次郎的夏天》
久石让的经典之作，旋律清新自然、活泼俏皮，充满了夏日的轻松与惬意，仿佛能让人置身于小马欢快奔跑的场景中，适合表现小马探索世界、勇敢前行的过程。

梦江南 发表于 2025-7-5 17:50

杨帆发表于 2025-7-5 17:40
一、故事
小马帮妈妈做事，要把半口袋麦子驮到河对岸的磨坊去。途中遇到一条小河，老牛说河水很浅，松鼠 ...

哦，原来是只小马过河的故事啊！寓意深刻。{:4_187:}

杨帆发表于 2025-7-5 17:54

梦江南发表于 2025-7-5 17:50
哦，原来是只小马过河的故事啊！寓意深刻。

呵呵，东拼西凑，鼓捣着玩呢{:4_204:}

梦油发表于 2025-7-5 20:22

杨帆发表于 2025-7-5 17:25
呵呵，老牛现在不过河，刚与小马说过它对这条河深浅的感受

这个创意真好

杨帆发表于 2025-7-5 20:44

梦油发表于 2025-7-5 20:22
这个创意真好

谢谢梦油超版鼓励，祝开心{:4_191:}

红影发表于 2025-7-5 21:32

杨帆还根据这个通话故事，加入了牛和松鼠作为故事陪衬呢，让这个故事更完整了。
欣赏杨帆好帖{:4_199:}

红影发表于 2025-7-5 21:34

河里还有魅力的鱼儿呢。这个播放器也很漂亮。
杨帆把这匹马的效果用得真快，很赞{:4_199:}

杨帆发表于 2025-7-5 21:40

红影发表于 2025-7-5 21:32
杨帆还根据这个通话故事，加入了牛和松鼠作为故事陪衬呢，让这个故事更完整了。
欣赏杨帆好帖

谢谢影子鼓励，祝开心{:4_204:}

梦油发表于 2025-7-6 10:52

杨帆发表于 2025-7-5 20:44
谢谢梦油超版鼓励，祝开心

杨帆朋友的思路很宽。

红影发表于 2025-7-6 12:26

杨帆发表于 2025-7-5 21:40
谢谢影子鼓励，祝开心

杨帆把这匹马运用得特别好呢{:4_187:}

杨帆发表于 2025-7-6 12:51

梦油发表于 2025-7-6 10:52
杨帆朋友的思路很宽。

谢谢老兄鼓励，祝开心{:4_190:}

杨帆发表于 2025-7-6 12:51

红影发表于 2025-7-6 12:26
杨帆把这匹马运用得特别好呢

呵呵，谢谢鼓励，祝开心{:4_171:}

红影发表于 2025-7-6 16:30

杨帆发表于 2025-7-6 12:51
呵呵，谢谢鼓励，祝开心

问好杨帆，周日快乐{:4_187:}

页: [1]

花潮论坛's Archiver

勇于尝试：《小马过河》的启示 - 学习马老师贴《那匹马》