Skip to content

Commit 3d80623

Browse files
unbugunbug
committed
add candy doodle
1 parent 3021000 commit 3d80623

File tree

3 files changed

+116
-42
lines changed

3 files changed

+116
-42
lines changed

‎src/components/Doodle.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,17 @@ import React from 'react';
22
import 'css-doodle';
33

44
export default function Doodle(props) {
5+
const { text } = props;
6+
let doodle = null;
7+
if (/鱼|fish/i.test(text)) {
8+
doodle = 'fish';
9+
} else if (/糖|甜|candy|圣诞|Christmas|xmas|春节/i.test(text)) {
10+
doodle = 'candy'
11+
}
12+
13+
if (!doodle) { return null; }
14+
515
return (
6-
<css-doodle use="var(--rule)"></css-doodle>
16+
<css-doodle use="var(--rule)" class={doodle}></css-doodle>
717
)
818
}

‎src/containers/MainContainer.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@ export default function MainContainer(props) {
113113
}
114114

115115
function renderDoodle() {
116-
if (!/鱼|fish/i.test(state.searchValue)) { return null; }
117-
return <Doodle/>
116+
if (state.variableList.length == 0) { return null; }
117+
return <Doodle text={state.searchValue} />
118118
}
119119

120120
function setState(payload) {

‎styles/_doodle.scss

+103-39
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,117 @@
22
css-doodle {
33
position: fixed;
44
z-index: -1;
5+
// fish
6+
&.fish {
7+
--color: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);
8+
--color-fade: var(--color)@repeat2(@p([0-9a-b]));
9+
--noise: @svg-filter(
10+
<svg>
11+
<filter>
12+
<feTurbulence type="fractalNoise" baseFrequency=".016" numOctaves="1" seed="@r(1000)" />
13+
<feDisplacementMap in="SourceGraphic" scale="10" />
14+
</filter>
15+
</svg>
16+
);
517

6-
--color: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);
7-
--color-fade: var(--color)@repeat2(@p([0-9a-b]));
8-
--noise: @svg-filter(
9-
<svg>
10-
<filter>
11-
<feTurbulence type="fractalNoise" baseFrequency=".016" numOctaves="1" seed="@r(1000)" />
12-
<feDisplacementMap in="SourceGraphic" scale="10" />
13-
</filter>
14-
</svg>
15-
);
18+
--rule: (
19+
:doodle {
20+
@grid: 12x1 / 100vw 100vh;
21+
background-position: 50%;
22+
filter: var(--noise);
23+
}
1624

17-
--rule: (
18-
:doodle {
19-
@grid: 12x1 / 100vw 100vh;
20-
background-position: 50%;
21-
filter: var(--noise);
22-
}
25+
@size: 100% 50%;
26+
position: absolute; top: 25%;
27+
transform: rotate(calc((@i() - 1) * 360deg / @size()));
28+
29+
:after {
30+
--c: var(--color);
31+
--s: @r(5);
32+
content: '';
33+
position: absolute;
34+
@size: @r(40vmin, 61vmin) @r(12vmin, 17vmin);
35+
border-left: @r(3px) solid @var(--c);
36+
border-radius: 50vmin;
37+
background:
38+
radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 42% / 3px 6px no-repeat,
39+
radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 58% / 3px 6px no-repeat,
40+
@m20(linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 @r(100%) / @r(20%) 1px no-repeat),
41+
linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 50% / @r(40%, 60%) 1px no-repeat,
42+
linear-gradient(to right, rgba(255, 255, 255, .015), transparent);
43+
transform: rotateY(0) scaleX(@var(--s)) translateZ(50vmin);
44+
transform-origin: 0 50%;
45+
will-change: transform;
46+
animation: r @r(10s, 20s) linear infinite;
47+
animation-delay: -@r(50s);
48+
}
2349

24-
@size: 100% 50%;
25-
position: absolute; top: 25%;
26-
transform: rotate(calc((@i() - 1) * 360deg / @size()));
50+
@keyframes r {
51+
to { transform: rotateY(-1turn) scaleX(@var(--s)) translateZ(50vmin) }
52+
}
53+
);
54+
}
2755

56+
// candy
57+
&.candy {
58+
--rule: ( :doodle {
59+
position: absolute;
60+
width: 100%;
61+
@grid: 10 / 101% 100vh;
62+
overflow: hidden;
63+
}
64+
animation: bounce linear @r(7s, 15s) @r(-1s, -5s) infinite;
65+
opacity: @r(0.3, 1);
66+
@place-cell: @r(100%) @r(100%);
67+
@random(.3) {
2868
:after {
29-
--c: var(--color);
30-
--s: @r(5);
31-
content: '';
69+
content: '🍭';
3270
position: absolute;
33-
@size: @r(40vmin, 61vmin) @r(12vmin, 17vmin);
34-
border-left: @r(3px) solid @var(--c);
35-
border-radius: 50vmin;
36-
background:
37-
radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 42% / 3px 6px no-repeat,
38-
radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 58% / 3px 6px no-repeat,
39-
@m20(linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 @r(100%) / @r(20%) 1px no-repeat),
40-
linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 50% / @r(40%, 60%) 1px no-repeat,
41-
linear-gradient(to right, rgba(255, 255, 255, .015), transparent);
42-
transform: rotateY(0) scaleX(@var(--s)) translateZ(50vmin);
43-
transform-origin: 0 50%;
44-
will-change: transform;
45-
animation: r @r(10s, 20s) linear infinite;
46-
animation-delay: -@r(50s);
71+
font-size: @r(25px, 35px);
72+
transform: rotate(@r(360deg));
73+
}
74+
}
75+
@random(.2) {
76+
:after {
77+
content: '🍫';
78+
position: absolute;
79+
@place-cell: @r(100%) @r(100%);
80+
font-size: @r(15px, 25px);
81+
z-index: @p(1, 2);
82+
transform: rotate(@r(360deg));
83+
}
84+
}
85+
@random(.2) {
86+
:before {
87+
content: '🧁';
88+
position: absolute;
89+
@place-cell: @r(100%) @r(100%);
90+
font-size: @r(15px, 25px);
91+
z-index: @p(1, 2);
92+
transform: rotate(@r(360deg));
93+
}
94+
}
95+
@random(.2) {
96+
:before {
97+
content: '🍪';
98+
position: absolute;
99+
@place-cell: @r(100%) @r(100%);
100+
font-size: @r(15px, 25px);
101+
z-index: @p(1, 2);
102+
transform: rotate(@r(360deg));
103+
}
47104
}
48105

49-
@keyframes r {
50-
to { transform: rotateY(-1turn) scaleX(@var(--s)) translateZ(50vmin) }
106+
@keyframes bounce {
107+
0% {
108+
transform: translateY(@r(-101vh, -110vh));
109+
}
110+
100% {
111+
transform: translateY(@r(101vh, 110vh));
112+
}
51113
}
52-
);
114+
);
115+
}
116+
53117
}
54118
}

0 commit comments

Comments
 (0)