房前
<css-doodle id="mplayer">:doodle {
margin: -80px 0 0 calc(50% - 593px);
@grid: 26x1 / 1024px 640px;
background: #eee url('https://638183.freep.cn/638183/t23/1/r3.jpg') no-repeat center / cover;
box-shadow: 0 0 8px #000;
pointer-events: none;
position: relative;
-webkit-box-reflect: below 0px linear-gradient(transparent,transparent 85%,rgba(0,0,0,.8));
--state: paused;
}
--colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
--color-1: @p(--colors);
--color-2: @P;
--transform: translateY(@r(2, 90)%);
--size: 30px;
transform: var(--transform) rotate(0deg);
transform-origin: 50% 100%;
@random(0.5) { animation: swing @r(3, 5)s ease infinite alternate both; }
@random(0.5) { animation: swingLeft @r(3, 5)s ease infinite alternate both; }
@keyframes swing {
0% { transform: var(--transform) rotate(0deg); }
100% { transform: var(--transform) rotate(1deg); }
}
@keyframes swingLeft {
0% { transform: var(--transform) rotate(0deg); }
100% { transform: var(--transform) rotate(-1deg); }
}
@keyframes rot {
0% { transform: var(--transform) rotate(0deg); }
100% { transform: var(--transform) rotate(360deg); }
}
::after {
content: "";
position: absolute;
top: -15px;
left: calc(50% - var(--size) / 2);
width: var(--size);
height: var(--size);
background: @p(
radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)),
@doodle(
@grid: 1 / 100%;
::after {
content: "@p(✿,❁,❀,❃,❊)";
position: absolute;
top: -4px;
left: 50%;
transform: translate3d(-50%, 0, 0);
font-size: 40px;
color: transparent;
background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
-webkit-background-clip: text;
}
),
@doodle(
@grid: 1 / 100%;
::after {
content: "@p(🌸,🌼)";
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
font-size: 28px;
color: transparent;
background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
-webkit-background-clip: text;
}
)
);
}
background: @doodle(
@grid: 1x40;
background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent));
@nth(1, 2) {
::before { display: none; }
}
@random(.5) {
::before {
content: "";
@place: 10px center;
@size: 50% 100%;
border-radius: 0 100% 0 100%;
background: @p(--colors);
-webkit-box-reflect: @p(right, initial);
}
}
);
@at(@X, @Y) {
@size: 100px;
@shape: clover 4;
@place: 50% 10%;
background: crimson;
transform-origin: 50% 50%;
animation: rot 6s infinite linear var(--state);
::before { display: none; }
::after { display: none; }
cursor: pointer;
pointer-events: auto;
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1436678253" autoplay loop></audio>
<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 = () => 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>
摇曳的树丛来自大佬的作品，这是源码：
<css-doodle>
:doodle {
flex: none;
@grid: 25x1;
@size: 1000px 800px;
overflow: hidden;
}
--colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
--color-1: @p(--colors);
--color-2: @P;
--transform: translateY(@r(2, 90)%);
--size: 30px;
transform: var(--transform) rotate(0deg);
transform-origin: 50% 100%;
@random(0.5) {
animation: swing @r(3, 5)s ease infinite alternate both;
}
@random(0.5) {
animation: swingLeft @r(3, 5)s ease infinite alternate both;
}
@keyframes swing {
0% {
transform: var(--transform) rotate(0deg);
}
100% {
transform: var(--transform) rotate(1deg);
}
}
@keyframes swingLeft {
0% {
transform: var(--transform) rotate(0deg);
}
100% {
transform: var(--transform) rotate(-1deg);
}
}
::after {
content: "";
position: absolute;
top: -15px;
left: calc(50% - var(--size) / 2);
width: var(--size);
height: var(--size);
background: @p(
radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)),
@doodle(
@grid: 1 / 100%;
::after {
content: "@p(✿,❁,❀,❃,❊)";
position: absolute;
top: -4px;
left: 50%;
transform: translate3d(-50%, 0, 0);
font-size: 40px;
color: transparent;
background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
-webkit-background-clip: text;
}
),
@doodle(
@grid: 1 / 100%;
::after {
content: "@p(🌸,🌼)";
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
font-size: 28px;
color: transparent;
background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
-webkit-background-clip: text;
}
)
);
}
background: @doodle(
@grid: 1x40;
background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent));
@nth(1, 2) {
::before { display: none; }
}
@random(.5) {
::before {
content: "";
@place: 10px center;
@size: 50% 100%;
border-radius: 0 100% 0 100%;
background: @p(--colors);
-webkit-box-reflect: @p(right, initial);
}
}
);
</css-doodle>
我在这个源码基础上：
一、给帖子加个背景图并给帖子整体做个小倒影；
二、抽出最后一个单元格做深红色四叶草，通过它控制帖子的背景音乐。 原来那么多树丛都是代码做的，厉害了{:4_187:} 这房前摇曳的花儿挺美的，播放器玲珑精致，喜欢{:4_187:} 颜色、高度、花朵等都是随机的，每次刷新都不一样呢。 醉美水芙蓉 发表于 2023-5-5 20:30
房前花挺美的，每次刷新都不一样！
随机的 红影 发表于 2023-5-5 20:10
原来那么多树丛都是代码做的，厉害了
这组代码很巧妙的。它实际上是在css-doodle图案里又用css-doodle做单元格的背景啥的，还配合伪元素、倒影等技术实现了诸多细节。 红影 发表于 2023-5-5 20:20
颜色、高度、花朵等都是随机的，每次刷新都不一样呢。
对，随机因素大量使用 好漂亮的屋后，欣赏问好！{:4_187:} 千羽 发表于 2023-5-5 20:18
这房前摇曳的花儿挺美的，播放器玲珑精致，喜欢
{:4_180:} 梦缘 发表于 2023-5-5 20:45
好漂亮的屋后，欣赏问好！
是房前，屋后在另外一个帖子 真能呀，居然用代码就实现那小苗苗的生长。很阳光很儿童的。估计小辣椒和清舟最喜欢了{:4_189:} 春天了吧 色彩都这么明媚，艳丽 听音看图陶醉鸟。。
{:4_204:}{:4_199:} 樵歌 发表于 2023-5-5 21:04
真能呀，居然用代码就实现那小苗苗的生长。很阳光很儿童的。估计小辣椒和清舟最喜欢了
晚上嚎 大猫咪 发表于 2023-5-5 21:06
春天了吧 色彩都这么明媚，艳丽 听音看图陶醉鸟。。
初夏 马黑黑 发表于 2023-5-5 21:12
晚上嚎
同嚎同嚎{:4_189:} 马黑黑 发表于 2023-5-5 20:44
这组代码很巧妙的。它实际上是在css-doodle图案里又用css-doodle做单元格的背景啥的，还配合伪元素、倒影 ...
这个有点太复杂了点，看了会，有点蒙圈{:4_173:} 红影 发表于 2023-5-5 21:34
这个有点太复杂了点，看了会，有点蒙圈
逻辑理清一下就好理解了