css-doodle ：落花缤纷
本帖最后由 马黑黑 于 2023-5-9 20:40 编辑 <br /><br /><style>.papa {}
.papa > p { margin: 8px 0;}
.mama {
height: fit-content;
display: grid;
grid-template-columns: 50px auto;
place-items: center start;
padding: 0;
margin: 20px 0;
background: #f9f9f9;
box-shadow: 0 0 2px #000;
position: relative;
}
.hCode, .hLineNum {
margin: 0;
padding: 10px 4px;
width: 100%;
box-sizing: border-box;
}
.hCode { overflow-x: auto; tab-size: 3; }
.hLineNum {
border-right: 1px solid #ccc;
text-align: right;
user-select: none;
}
.stage { display: grid; place-items: center; }
</style>
<div class="papa">
<p>实现方法：建立一定数量单元格的 css-doodle 网格，令各单元格以伪元素呈现花朵字符；所有单元格以改变 top 属性实现自上而下掉落效果，下落过程旋转一圈到两圈之间，不断循环。代码如下——</p>
<div class="mama">
<pre class="hLineNum"></pre>
<pre class="hCode">
<css-doodle grid="16" click-to-update>
:doodle {
@size: 760px 500px;
background: #333;
}
position: absolute;
left: @r(100)%;
top: -20%;
:after {
position: absolute;
content: '@p(✿,❁,❀,💮,🌺)';
color: snow;
font-size: @r(10, 40)px;
}
animation: fall @r(6,20)s @r(-6, 6)s infinite;
@keyframes fall {
0% { top: -20%; transform: rotate(0deg); }
100% {top: 120%; transform: rotate(@p(360, 720)deg); }
}
</css-doodle></pre>
</div>
<p><button class="btnRun" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>其中的技巧，值得一提的是运行关键帧动画属性 animation 的赋值，各单元格的运行周期时长从 6 秒到 20 秒之间随机获得，运行延时从 -6秒 到 6 秒之间随机选取，如此，css-doodle 已开始运行就会有落花在途中，且落花错落有致，整个画面及其后续变化都很自然。</p>
</div>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnRun'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script> 南无月 发表于 2023-5-14 10:36
目前看的都只能从上往下落，无底洞没法停啊
animation属性你去查查 这个运行代码点击后，出来一片五彩缤纷的效果 小辣椒 发表于 2023-5-9 20:31
这个运行代码点击后，出来一片五彩缤纷的效果
好看不 而且我手机也是秒看见，刚才那谁的我刷新无数次才看见的 马黑黑 发表于 2023-5-9 20:32
好看不
非常好看，就不知道为什么有的手机会看不见 小辣椒 发表于 2023-5-9 20:33
非常好看，就不知道为什么有的手机会看不见
也许是手机网速不稳定？ 而且现在的效果这么多我一下子就打开了 小辣椒 发表于 2023-5-9 20:34
而且现在的效果这么多我一下子就打开了
这是后续打开：帖子打开时，css-doodle效果没有运行，点击按钮之后才运行 小辣椒 发表于 2023-5-9 20:33
非常好看，就不知道为什么有的手机会看不见
不是手机看不见，是手机的浏览器不行 马黑黑 发表于 2023-5-9 20:34
也许是手机网速不稳定？
同样的网速，看你现在的我秒开，刚才那谁的我看不见，后来刷新刷新再刷新看见了，赶紧修改了回复 小辣椒 发表于 2023-5-9 20:36
同样的网速，看你现在的我秒开，刚才那谁的我看不见，后来刷新刷新再刷新看见了，赶紧修改了回复
额，可能是代码运行的东东太多 马黑黑 发表于 2023-5-9 20:36
不是手机看不见，是手机的浏览器不行
同样的浏览器，同样的手机 马黑黑 发表于 2023-5-9 20:35
这是后续打开：帖子打开时，css-doodle效果没有运行，点击按钮之后才运行
帖子一片代码我看不见播放器，怎么点击？ 小辣椒 发表于 2023-5-9 20:38
帖子一片代码我看不见播放器，怎么点击？
我这个不是有运行代码按钮吗 小辣椒 发表于 2023-5-9 20:37
同样的浏览器，同样的手机
这不可能，如果网速正常的话 马黑黑 发表于 2023-5-9 20:37
额，可能是代码运行的东东太多
应该不是，就一个图，一个音乐 小辣椒 发表于 2023-5-9 20:40
应该不是，就一个图，一个音乐
图片所在服务器不好也会导致帖子打开困难 马黑黑 发表于 2023-5-9 20:39
我这个不是有运行代码按钮吗
就在说你这个我秒开，刚才是朵拉那个帖，我一直看不见，刷新无数次最后看见啦，看见效果了前面的回帖赶紧去修改了 马黑黑 发表于 2023-5-9 20:39
这不可能，如果网速正常的话
就我现在啊，我是手机，而且想速度快，还用了WiFi 马黑黑 发表于 2023-5-9 20:41
图片所在服务器不好也会导致帖子打开困难
哦，这个也是有可能的