In a Birds Eye

马黑黑 发表于 2024-7-17 08:01

马黑黑 发表于 2024-7-17 08:03

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv { --width: 1000px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 667px; background: url('https://638183.freep.cn/638183/t24/3/birdeye.jpg') no-repeat center/cover; box-shadow: 0 0 10px rgba(0,0,0,.45); z-index: 1; pointer-events: none; position: relative; }
#mydiv::before, #mydiv::after { position: absolute; pointer-events: auto; cursor: pointer; }
#mydiv::before { content: ''; left: 500px; top: 80px; width: 180px; height: 80px; background: url('https://638183.freep.cn/638183/t24/3/birdeye.jpg') no-repeat -500px -80px; transform: rotate(-5deg); animation: fly 2s infinite alternate var(--state); }
#mydiv::after { content: url('https://638183.freep.cn/638183/small/ying.png'); left: 10px; top: 10px; transform: scale(.8) rotate(0deg); filter: drop-shadow(0 0 16px lightblue); animation: rot 8s linear infinite var(--state); }
.cloud { position: absolute; left: 30%; top: 20%; width: 50px; height: 50px; border-radius: 45% 50%; background: snow; box-shadow: snow 65px -15px 0 -5px, white 25px -25px, snow 30px 10px, snow 60px 15px 0 -10px, snow 85px 5px 0 -5px; opacity: .5; }
.cloud:nth-of-type(2) { left: 45%; top: 5%; transform: scale(.6) skew(15deg); opacity: .4; }
.cloud:nth-of-type(3) { left: 70%; top: 10%; transform: scale(1.2) skew(-15deg); opacity: .6; }
@keyframes fly {to { transform: rotate(10deg); } }
@keyframes rot { to {transform: scale(.8) rotate(360deg); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=439614" autoplay loop></audio>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

南无月 发表于 2024-7-17 08:25

先赞叹一声，三朵白云居然是代码画出来的，白老师你是美术老师嘛

南无月 发表于 2024-7-17 08:29

两个伪元素一个让鹰飞飞，一个让小播转动～
小播科技转简单，加个背景也可以理解，
为啥可以刚好裁出鹰头，这个又神奇到我了

南无月 发表于 2024-7-17 08:30

代码就这么一丢丢，天高任你飞意境就有了～
高级得很～
今天回复没有重复，看来不引用会好一些

梦江南 发表于 2024-7-17 10:29

大热天的黑黑老师辛苦了！{:4_187:}

梦江南 发表于 2024-7-17 10:31

黑黑老师您真厉害，代码随玩玩了！{:4_199:}

马黑黑 发表于 2024-7-17 12:53

梦江南发表于 2024-7-17 10:31
黑黑老师您真厉害，代码随玩玩了！

{:4_190:}

马黑黑 发表于 2024-7-17 12:54

南无月发表于 2024-7-17 08:25
先赞叹一声，三朵白云居然是代码画出来的，白老师你是美术老师嘛

做体育老师的时候代过美术老师的课

马黑黑 发表于 2024-7-17 12:54

南无月发表于 2024-7-17 08:30
代码就这么一丢丢，天高任你飞意境就有了～
高级得很～
今天回复没有重复，看来不引用会好一些

{:4_190:}

马黑黑 发表于 2024-7-17 12:54

梦江南发表于 2024-7-17 10:29
大热天的黑黑老师辛苦了！

{:4_180:}

红影发表于 2024-7-17 15:50

这个有趣，小播漂亮，和主题很相符。
从原图上裁出鹰来，纯代码制造出云来，都是本帖的亮点{:4_199:}

红影发表于 2024-7-17 15:54

这底图选得有趣，没看懂左下的一排栅栏有什么用，建筑的外围墙那么高，是抵挡海啸用的么{:4_173:}
估计选这个图图是因为那只鹰比较干净，便于裁出来吧{:4_187:}

马黑黑 发表于 2024-7-17 18:26

红影发表于 2024-7-17 15:50
这个有趣，小播漂亮，和主题很相符。
从原图上裁出鹰来，纯代码制造出云来，都是本帖的亮点

{:4_190:}

马黑黑 发表于 2024-7-17 18:27

红影发表于 2024-7-17 15:54
这底图选得有趣，没看懂左下的一排栅栏有什么用，建筑的外围墙那么高，是抵挡海啸用的么
估计选 ...

这是吊桥，破败了，不齐整了

红影发表于 2024-7-17 19:44

马黑黑发表于 2024-7-17 18:26

记得黑黑之前的帖子也有原图上截小图的呢，非常有趣的功能。{:4_187:}

红影发表于 2024-7-17 19:47

马黑黑发表于 2024-7-17 18:27
这是吊桥，破败了，不齐整了

原来是这样，看那房子也有些年头了呢{:4_173:}

绿叶清舟 发表于 2024-7-17 20:02

这个代码看上去很少啊

马黑黑 发表于 2024-7-17 20:05

绿叶清舟发表于 2024-7-17 20:02
这个代码看上去很少啊

不多，也容易懂

马黑黑 发表于 2024-7-17 20:05

红影发表于 2024-7-17 19:44
记得黑黑之前的帖子也有原图上截小图的呢，非常有趣的功能。

这个技巧应该掌握了吧

页: [1] 2 3 4

花潮论坛's Archiver

In a Birds Eye