半妖倾城

马黑黑 发表于 2024-5-24 07:46

本帖最后由马黑黑于 2024-5-24 07:52 编辑 <br /><br /><style>
#papa {
   position: relative;
   margin: 20px 0 20px calc(50% - 720px);
   width: 1280px;
   height: 720px;
   background: url('https://media.9game.cn/gamebase/2021/4/23/226964855.jpeg') no-repeat center/cover;
   box-shadow: 2px 2px 6px #333;
   overflow: hidden;
   z-index: 1;
   --state: running;
}
.vid {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: calc(100% + 65px);
   object-fit: cover;
   mix-blend-mode: screen;
}
.vid:nth-of-type(2) { opacity: .5; }
.player {
   position: absolute;
   left: 375px;
   top: 400px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 6px groove tan;
   border-color: black white black;
   opacity: .5;
   transition: 1s;
   cursor: pointer;
}
.player:hover {
   filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
   border-color: purple red plum;
}
.player::before, .player::after {
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   background: radial-gradient(snow, purple, pink, lightblue, transparent);
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   animation: rot 8s linear infinite var(--state);
}
.player::after { animation-delay: -1s; }
.player:nth-of-type(2) { left: 750px; top: 470px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=430787639" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/53950850/05/48/30/649e911ea2def.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
<div class="player" title="播放/暂停"></div>
<div class="player" title="播放/暂停"></div>
</div>

<script>
var players = document.querySelectorAll('.player'),
   vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => {
   papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2024-5-24 07:49

帖子代码
<style>
#papa {
   position: relative;
   margin: 20px 0 20px calc(50% - 720px);
   width: 1280px;
   height: 720px;
   background: url('https://media.9game.cn/gamebase/2021/4/23/226964855.jpeg') no-repeat center/cover;
   box-shadow: 2px 2px 6px #333;
   overflow: hidden;
   z-index: 1;
   --state: running;
}
.vid {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: calc(100% + 65px);
   object-fit: cover;
   mix-blend-mode: screen;
}
.vid:nth-of-type(2) { opacity: .5; }
.player {
   position: absolute;
   left: 375px;
   top: 400px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 6px groove tan;
   border-color: black white black;
   opacity: .5;
   transition: 1s;
   cursor: pointer;
}
.player:hover {
   filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
   border-color: purple red plum;
}
.player::before, .player::after {
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   background: radial-gradient(snow, purple, pink, lightblue, transparent);
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   animation: rot 8s linear infinite var(--state);
}
.player::after { animation-delay: -1s; }
.player:nth-of-type(2) { left: 750px; top: 470px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=430787639" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/53950850/05/48/30/649e911ea2def.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
<div class="player" title="播放/暂停"></div>
<div class="player" title="播放/暂停"></div>
</div>

<script>
var players = document.querySelectorAll('.player'),
   vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => {
   papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

红影发表于 2024-5-24 08:56

真的好妖孽啊，这两个小播好，遮住妖孽的长指甲，让妖孽看起来分明更可爱些了{:4_199:}

红影发表于 2024-5-24 08:58

两个视频的效果用在这个帖子里都特别有效果，黑黑很少做这样风格的帖子，很惊艳{:4_199:}

红影发表于 2024-5-24 09:04

鼠标触碰颜色变化特别漂亮，而且两个小播，去点击时其中一个发生变化，也可以让两个小播区分开来，十分细致的构思{:4_187:}

红影发表于 2024-5-24 09:06

这个小播和视频都使用了nth-of-type()，而且js 里把暂停的设置全部包括了。这个好，也就是说想加多少视频想加多少小播都可以呗，这个可以随便扩展了{:4_173:}

红影发表于 2024-5-24 09:08

半妖都这么好看，全妖化了是不是更诱人，去修炼化妖真的很不错啊{:4_170:}

红影发表于 2024-5-24 09:09

主要还是黑黑的代码修饰得好，看原图感觉恐怖，绝对没这么可爱{:4_189:}

马黑黑 发表于 2024-5-24 12:12

红影发表于 2024-5-24 08:56
真的好妖孽啊，这两个小播好，遮住妖孽的长指甲，让妖孽看起来分明更可爱些了

这是拿在手里的法器

马黑黑 发表于 2024-5-24 12:13

红影发表于 2024-5-24 09:09
主要还是黑黑的代码修饰得好，看原图感觉恐怖，绝对没这么可爱

不恐怖的，非常可耐

马黑黑 发表于 2024-5-24 12:13

红影发表于 2024-5-24 08:58
两个视频的效果用在这个帖子里都特别有效果，黑黑很少做这样风格的帖子，很惊艳

妖魔鬼怪的帖子俺做的不少吧{:4_170:}

马黑黑 发表于 2024-5-24 12:13

红影发表于 2024-5-24 09:08
半妖都这么好看，全妖化了是不是更诱人，去修炼化妖真的很不错啊

过之而犹不及

马黑黑 发表于 2024-5-24 12:14

红影发表于 2024-5-24 09:04
鼠标触碰颜色变化特别漂亮，而且两个小播，去点击时其中一个发生变化，也可以让两个小播区分开来，十分细致 ...

这是想想就可以想得出来的吧

南无月 发表于 2024-5-24 12:47

白老师骨子里还是有冲破常规的因子在，
做贴时不时就露出来一些。{:4_170:}
这么邪魅的风格，跟中毒那贴子名字一样，
剑走偏锋，让人印象深刻。。

南无月 发表于 2024-5-24 12:52

看画面就醉了，这眼神恐怖又迷人{:4_173:}
飘渺的视频加得太好了，
似有源源不断的妖能量传递。。
火焰是即将入魔的节奏么。。{:4_170:}

南无月 发表于 2024-5-24 12:54

昨天那么漂亮纯净的立体小播，变成捉妖法器，脑洞大开。。黑妖老师{:4_170:}

梦江南 发表于 2024-5-24 13:13

火焰向上喷，把妖气给喷光了哈！{:4_199:}

朵拉发表于 2024-5-24 14:11

学生看过一部剧叫半妖倾城~~{:4_173:}

小辣椒 发表于 2024-5-24 14:37

哇塞，进来听到这个音乐就感到魔幻的，看见画面更加魔幻了{:4_170:}

小辣椒 发表于 2024-5-24 14:39

黑黑找视频的本事太大了，每个效果出来都非常的棒，小辣椒找视频效果就是感觉一直找不到自己理想的效果，看起来，小辣椒确实太笨的{:4_198:}

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

半妖倾城