still

马黑黑 发表于 2023-4-20 20:09

马黑黑 发表于 2023-4-20 20:10

帖子代码
<style>
#mydiv {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 672px;
background: #000 url('https://638183.freep.cn/638183/t23/1/qbui.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
position: relative;
}
</style>
<div id="mydiv">
<css-doodle id="mplayer">
:doodle {
   @grid: 4 / 200px;
   background: url('https://638183.freep.cn/638183/t23/btn/laba1.png') no-repeat 0px 50px / 100px 100px;
   cursor: pointer;
   position: absolute;
   left: 700px;
   top: 150px;
   --state: running;
}
:doodle(:hover) { transform: skew(2deg); }
position: absolute;
@place-cell: 80px 46%;
:after {
   content: @p(♫,♪,♩,♬);
   color: @p(red,pink,orange,green,blue,white);
}
animation: fly 1s @r(-2,2)s infinite var(--state);
@keyframes fly {
   from { transform: rotate(0deg) translate(0px); }
   to { transform: rotate(@r(-60,60)deg) translate(110px); }
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30375354" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

绿叶清舟 发表于 2023-4-20 20:30

这么快出来了啊，这次没飞了

马黑黑 发表于 2023-4-20 20:44

绿叶清舟发表于 2023-4-20 20:30
这么快出来了啊，这次没飞了

用这个不飞的

绿叶清舟 发表于 2023-4-20 20:55

马黑黑发表于 2023-4-20 20:44
用这个不飞的

JS文件还是在的得去仔细对比一下了

马黑黑 发表于 2023-4-20 21:13

绿叶清舟发表于 2023-4-20 20:55
JS文件还是在的得去仔细对比一下了

前面的，那个和你谈心的，用的是 document.write() 方法，@起个网名好难提供的。这种方法我一直不太用，除了开发的那个纯JS网站时用过，就是因为它会有跳转行为（比如评分时回不到原始页面）；第二种方法就是这个帖子用的，之前也用过，实际上是使用添加的方式。

绿叶清舟 发表于 2023-4-20 21:20

马黑黑发表于 2023-4-20 21:13
前面的，那个和你谈心的，用的是 document.write() 方法，@起个网名好难提供的。这种方法我一直不太用， ...

前面那个方法用起来简单些吧

马黑黑 发表于 2023-4-20 21:26

绿叶清舟发表于 2023-4-20 21:20
前面那个方法用起来简单些吧

看着简单而已。代码并不是越少越简单

绿叶清舟 发表于 2023-4-20 21:33

马黑黑发表于 2023-4-20 21:26
看着简单而已。代码并不是越少越简单

搞懂原理太难了

马黑黑 发表于 2023-4-20 21:34

绿叶清舟发表于 2023-4-20 21:33
搞懂原理太难了

有一些原理不用搞懂

绿叶清舟 发表于 2023-4-20 21:35

马黑黑发表于 2023-4-20 21:34
有一些原理不用搞懂

只管用就可以了吧

马黑黑 发表于 2023-4-20 21:36

绿叶清舟发表于 2023-4-20 21:35
只管用就可以了吧

是的。就像男人不生孩子，但为什么呢不用搞懂，不生就是了

绿叶清舟 发表于 2023-4-20 21:47

马黑黑发表于 2023-4-20 21:36
是的。就像男人不生孩子，但为什么呢不用搞懂，不生就是了

以后可以生了

红影发表于 2023-4-20 21:55

这个真漂亮，黑黑这么快就把那小喇叭做出实例来了，好棒{:4_199:}

小辣椒 发表于 2023-4-20 22:01

这个小喇叭出来的音符还特别的美{:4_178:}

小辣椒 发表于 2023-4-20 22:07

马黑黑发表于 2023-4-20 21:36
是的。就像男人不生孩子，但为什么呢不用搞懂，不生就是了

{:4_172:}

小辣椒 发表于 2023-4-20 22:09

这个效果不是黑黑的第一个？我得去找一下看看

非常开心 发表于 2023-4-20 22:24

制作精湛！创意独特！太棒了.......

马黑黑 发表于 2023-4-20 22:25

非常开心发表于 2023-4-20 22:24
制作精湛！创意独特！太棒了.......

感谢支持。晚上好

马黑黑 发表于 2023-4-20 22:27

小辣椒发表于 2023-4-20 22:09
这个效果不是黑黑的第一个？我得去找一下看看

之前有过一个喇叭，但不是酱紫的效果

页: [1] 2 3

花潮论坛's Archiver

still