论坛 › 欢乐水吧 › 樱花树下（学习黑师小眼镜渐变视频效果）

雨中悄然 发表于 2023-3-26 13:09

樱花树下（学习黑师小眼镜渐变视频效果）

本帖最后由 雨中悄然 于 2023-3-26 19:04 编辑 <br /><br /><style>
#papa {
      margin: -80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/641fc3dfa682492fcc2cadde.jpg') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
      position: absolute;
      display: block;
      opacity: 1;
      animation: opa 20s infinite alternate linear;
      z-index: 1;
}
#mplayer {
      position: absolute;
      left: calc(50% - 15px);
      bottom: 5px;
      width: 30px;
      height: 30px;
      border: 2px solid PaleVioletred;
      border-radius: 50%;
      opacity: 0;
      transition: .7s;
      display: grid;
      place-items: center;
      --disp1: 0; --disp2: 1;
z-index: 1;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color: PaleVioletred;
      cursor: pointer;
      transition: .4s;
}
#mplayer::before {
      width: 0;
      height: 0;
      left: 10px;
      border-width: 10px 12px;
      border-color: transparent transparent transparent PaleVioletred;
      opacity: var(--disp1);
}
#mplayer::after {
      width: 2px;
      height: 20px;
      border-width: 0 4px 0 4px;
      opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
.xiewen {/* 斜纹文本 */
      position: absolute;
      left: 240px;
      bottom: -160px;
      width: 760px;
      height: 200px;
      font-family: '微软雅黑', '宋体';
      font-size: 5rem;
      font-weight: 900;
      text-align: center;
      background: PaleVioletred 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;
      z-index: 2;
}
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <div id="mplayer"></div>
</div>
<div class="xiewen">樱花树下</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=255604" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/43/5d22103f91a2f.mp4" loop autoplay></video>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 50, ww, hh, 0, 0, ww + 100, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

雨中悄然 发表于 2023-3-26 13:11

字跑那么高{:4_170:}

马黑黑 发表于 2023-3-26 13:11

据日本学者撰著权威性樱花专著《樱大鉴》记载，樱花原生中国，最早是从喜马拉雅山脉传入日本的。全世界的樱花有150多种，中国有50多种。

马黑黑 发表于 2023-3-26 13:13

雨中悄然 发表于 2023-3-26 13:11
字跑那么高

高到都看不到

雨中悄然 发表于 2023-3-26 13:14

马黑黑 发表于 2023-3-26 13:13
高到都看不到

为啥不下来{:4_170:}

小辣椒 发表于 2023-3-26 13:16

看见悄然的字在网页上面了

雨中悄然 发表于 2023-3-26 13:16

马黑黑 发表于 2023-3-26 13:13
高到都看不到

第一次学加字，之前没用过。
抄书房里的一段代码加进去
是不是又加错了

小辣椒 发表于 2023-3-26 13:17

悄然速度的，我刚看见黑黑的教程分享，转身你已经做好了{:4_199:}

马黑黑 发表于 2023-3-26 13:20

雨中悄然 发表于 2023-3-26 13:16
第一次学加字，之前没用过。
抄书房里的一段代码加进去
是不是又加错了

你的斜纹字体代码：

.xiewen {/* 斜纹文本 */
      position: absolute; left: 240px;top: 200px;
      width: 760px;
      height: 200px;
      font-family: '微软雅黑', '宋体';
      font-size: 5rem;
      font-weight: 900;
      text-align: center;
      background: PaleVioletred 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;
      z-index: 1;
}


红色这句，#papa 选择器使用了，你得把 1 改为 2 或更大的数字。

雨中悄然 发表于 2023-3-26 13:20

小辣椒 发表于 2023-3-26 13:16
看见悄然的字在网页上面了

登高望远一下，现在总算回来了{:4_170:}

雨中悄然 发表于 2023-3-26 13:21

小辣椒 发表于 2023-3-26 13:17
悄然速度的，我刚看见黑黑的教程分享，转身你已经做好了

现在我知道你说的套用是什么意思了{:4_189:}

雨中悄然 发表于 2023-3-26 13:24

马黑黑 发表于 2023-3-26 13:20
你的斜纹字体代码：

.xiewen {/* 斜纹文本 */


改成2，播放按纽也可以了。。。。
最早这字在底层，就加了个层让它出来的。

马黑黑 发表于 2023-3-26 15:32

雨中悄然 发表于 2023-3-26 13:24
改成2，播放按纽也可以了。。。。
最早这字在底层，就加了个层让它出来的。

因为画布的存在，元素间的层级受影响，所以要设置一下

亦是金 发表于 2023-3-26 15:53

我试了试，你的帖子文字的位置，会随网页尺寸大小的变化，会到处游荡呢！

亦是金 发表于 2023-3-26 15:57

应该把 位置：绝对   改为   位置：相对；

.xiewen {/* 斜纹文本 */
      position: relative;

红影 发表于 2023-3-26 16:15

粉嫩嫩的画面，看着就让人神清气爽，悄然好美的制作{:4_199:}

红影 发表于 2023-3-26 16:16

雨中悄然 发表于 2023-3-26 13:16
第一次学加字，之前没用过。
抄书房里的一段代码加进去
是不是又加错了

我也喜欢去文字仓库搬文字，这个斜纹字好漂亮的{:4_187:}

亦是金 发表于 2023-3-26 16:54

红影 发表于 2023-3-26 16:16
我也喜欢去文字仓库搬文字，这个斜纹字好漂亮的

请问红影！文字仓库在什么地方？？？我没有找到呢！请指点！{:4_187:}

千羽 发表于 2023-3-26 17:13

漂亮的樱花，浪漫的树下，色调也是美美哒{:4_187:}

千羽 发表于 2023-3-26 17:15

斜纹字好漂亮，问好悄然{:4_187:}

查看完整版本: 樱花树下（学习黑师小眼镜渐变视频效果）