二龙戏珠（学习黑师《归来》变幻彩球加飘花效果）
本帖最后由 南无月 于 2023-5-14 20:18 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://s1.ax1x.com/2023/05/10/p9Db3lR.md.jpg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
z-index: 1;
--state: paused;
overflow: hidden;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 3%;
opacity: .23;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }</style><div id="papa">
<css-doodle grid="6" id="mplayer">
:doodle {@size: 260px;
@shape: circle;left: 390px;top: 260px;
cursor: pointer;z-index: 2;
animation: rot 5s infinite linear forwards var(--state);}
border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6));
border-radius: 50%;
transform: scale(@r(6, 15));
border-radius: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
animation: hue 6s infinite alternate var(--state);
transform: scale(@r(6, 15));
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: hue-rotate(360deg);}}</css-doodle>
<css-doodle grid="20">
:doodle {@size: 1024px 640px;}
@grid: 40x1 / 150vmin 140vmin;
:container { perspective: 123vmin;
}
position: absolute;
pointer-events: auto;
left: @r(90)%;top: -40%;:after {position: absolute;content: "@p(金,木,火,水,卐，卐，卐)"; color: DarkCyan;font-size: @r(20, 60)px;}
@size: 100%;
@place-cell: center;
border-radius: 10%;
transform-style: preserve-3d;
animation: scale-up 6s linear infinite var(--state);
animation-delay: calc(@i * -.8s);
@keyframes scale-up { 0% { opacity: 0;
transform: translate3d(0, 0, 0) rotate(0);
}
10% {
opacity: 1;
} 95% {
transform: translate3d(0, 0, @r(120vmin, 60vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0;
transform: translate3d(0, 30, 40vmin); } }
</css-doodle> <video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4cd3d86de5a.mp4" autoplay="" loop="" muted=""></video><audio id="aud" src="https://music.163.com/song/media/outer/url?id=31654455" autoplay="" loop=""></audio></div><script>
(function(){
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => papa.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-5-14 19:09
写给朋友点赞！手机看不到效果视频遮住了！
{:4_170:}好的电脑的时候看 没有加
(function () {
/*JS代码*/
})();
评分后效果无效 这个球的外面好像有个方框，去掉方框会不会更好一点？ 视频以及那些字符很漂亮，欣赏月儿好帖{:4_187:} 能把这个球这么用，也算是发挥了它的作用呢{:4_187:} 马黑黑 发表于 2023-5-14 19:16
没有加
(function () {
啊。。论坛发贴不知道规矩。。。等我改改 红影 发表于 2023-5-14 19:18
这个球的外面好像有个方框，去掉方框会不会更好一点？
这个是抄《归来》贴子里的彩球。截个图？我看不到框 南无月 发表于 2023-5-14 19:20
啊。。论坛发贴不知道规矩。。。等我改改
这是研究许久才发现的，有的是JS自执行匿名函数 红影 发表于 2023-5-14 19:19
视频以及那些字符很漂亮，欣赏月儿好帖
万字不断的字符，别的金木水火土压在球底下去了 红影 发表于 2023-5-14 19:19
能把这个球这么用，也算是发挥了它的作用呢
这是个魔球{:4_170:} 马黑黑 发表于 2023-5-14 19:16
没有加
(function () {
黑老师再瞧瞧，是这样子的么 马黑黑 发表于 2023-5-14 19:21
这是研究许久才发现的，有的是JS自执行匿名函数
我试着加了一下，你看看对么 南无月 发表于 2023-5-14 19:44
我试着加了一下，你看看对么
评过分不能再评了，你可以用自己的其他ID测试一下 南无月 发表于 2023-5-14 19:43
黑老师再瞧瞧，是这样子的么
我其实不黑的{:4_203:} 醉美水芙蓉 发表于 2023-5-14 19:51
做得不错的！朋友想象力丰富！
哎呀，可以看到了啊 马黑黑 发表于 2023-5-14 19:46
我其实不黑的
马二黑。。不黑。。。地球人都知道啊。。。