Here, click on this moon cake and see what happens
I am participating in the Mid-Autumn Festival Creative Submission contest. Please see:Mid-Autumn Festival Creative Submission Contest 
1. Prepare materials
In fact, I need a total of three materials, text, rabbit moon cake and finger, the text here I use the PNG format picture, to obtain the website is: izihun.com/, rabbit moon cake and finger to obtain the website is known as iconfont
2. Build the page
The rabbit moon cakes
The rabbit moon cake I got was like this:
<! DOCTYPEsvg PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1631146967061"
class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4076"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css"></style>
</defs>
<path
d="M376.192 366.976 c-11.456-0.7688-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0-56-17.696 77.44 77.44 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464, 16.256 to 174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 2.688 0.096c21.344 0.064 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
fill="#E15523" p-id="4077"></path>
<path
d="M512 809.792 C-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 A137.664 137.664 0 0 0 736 124.064 A137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64C-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 124.064 288a137.664 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 0 0 97.12 66.88A137.664 137.664 0 0 288 899.936 A137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 66.88-97.12 a137.664 137.664 0 0 0 899.936 736a133.632 137.632 0 0 9.344-117.536A137.664 137.664 0 0 960 512"
fill="#E15523" p-id="4078"></path>
</svg>
Copy the codeAs you can see, some of the information is not useful, such as the beginning, class, version number, etc., can be deleted, the following simplified version ~
<svg viewBox="0 0 1024 1024" width="200" height="200">
<path
d="M376.192 366.976 c-11.456-0.7688-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0-56-17.696 77.44 77.44 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464, 16.256 to 174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 2.688 0.096c21.344 0.064 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
fill="#E15523"></path>
<path
d="M512 809.792 C-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 A137.664 137.664 0 0 0 736 124.064 A137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64C-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 124.064 288a137.664 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 0 0 97.12 66.88A137.664 137.664 0 0 288 899.936 A137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 66.88-97.12 a137.664 137.664 0 0 0 899.936 736a133.632 137.632 0 0 9.344-117.536A137.664 137.664 0 0 960 512"
fill="#E15523"></path>
</svg>
Copy the codeViewBox sets the canvas, width height sets the width and height, path is the path element, and d is the property of the path element
To change the icon to the desired effect, simply set fill to None and add the stroke attribute to the element. Adjust the stroke-width accordingly to get:
Adjustment code:
<svg viewBox="0 0 1024 1024" width="200" height="200">
<path
d="M376.192 366.976 c-11.456-0.7688-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0-56-17.696 77.44 77.44 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464, 16.256 to 174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 2.688 0.096c21.344 0.064 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
fill="none" stroke="# 000" stroke-width="Seven"></path>
<path
d="M512 809.792 C-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 A137.664 137.664 0 0 0 736 124.064 A137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64C-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 124.064 288a137.664 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 0 0 97.12 66.88A137.664 137.664 0 0 288 899.936 A137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 66.88-97.12 a137.664 137.664 0 0 0 899.936 736a133.632 137.632 0 0 9.344-117.536A137.664 137.664 0 0 960 512"
fill="none" stroke="# 000" stroke-width="Seven"></path>
</svg>
Copy the codeclick
Transform: rotate(270deg); rotate(270deg); rotate(270deg); Can achieve upward pointing effect
The text
If not transparent background words to photoshop can 🤣
Round (moon)
Create a new square, add a border, set the background color to transparent, and use border-radius to set the rounded corners (the px value is just half of the div length).
Remember to add box-sizing:border-box, otherwise the circle will feel awkward
line
<svg class="line" width="1000" height="505.0000000000001">
<path d="m700 100l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
stroke="#fff" stroke-width="5" />
<path d="m800 200l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
stroke="#fff" stroke-width="5" />
</svg>
Copy the codeThe previous attributes will not be described here, but d is mainly introduced here:
M is the start, L is the line, c is the curve, m and L accept one coordinate, c accepts three, the coordinates are separated by Spaces, the rest do not need any formatting operation, the starting position is the upper left corner, I use class to move the whole to the desired position
The above code has two PATH elements, the first being the first line and the second being the second line. The following explanations use the first line as a reference
M
Set the starting point, for example, the above starting point is from the upper left (the coordinate is 00), X-axis is positive to the right, Y-axis is positive to the bottom, as the above code M700 100 is moved to the position of (700,100) to draw
L
Draw a line, the front must have coordinates, based on the previous coordinate plus its own coordinates, two points and a line, such as the above code L-300 0 is from (700,100) to (-300 0) to draw a line (ps: M moves the coordinate to (700,100) and draws the L starting from the coordinate (0,0), so L only changes the x coordinate to complete the operation of drawing the line.
C
Draw a curve, three coordinates, first start, second reference, third end
Reference code, 0, 0 start (same as L ps principle), -50, 0 as the reference point, -50, 50 end, draw the curve (a curve operation I drew 90 twice, so there will be multiple C operation ~)
It is recommended that the Angle you want to draw should not exceed 90~
The bottom line just needs to change the m coordinates a little bit
3. Move!
Get the DOM using native JS:
var class_icon = document.getElementsByClassName("icon") [0];
var icon = document.getElementById("icon");
var class_button = document.getElementsByClassName('button') [0];
var class_black = document.getElementsByClassName('black') [0];
var class_paths = document.getElementsByClassName('path');
var class_path_stroke = document.getElementsByClassName('path-stroke');
var class_circle = document.getElementsByClassName('circle') [0];
var class_line = document.getElementsByClassName('line') [0];
Copy the codeWhen clicking on bunny moon cake move down, it must be for bunny moon cake (class_icon) to do the clicking event:
icon.addEventListener("click".() = > {
if (class_icon.style.marginTop == '150px') {
/ / back to
class_icon.style.marginTop = '0px';
} else {
/ / to
class_icon.style.marginTop = '150px'; }}Copy the codeSince no other changes are required, it is lazy to fix the value 🤣
But the moon cake will only flash, if you want to make the moon cake smooth shift, just need this sentence:
.icon {
transition: all 1s;
}
Copy the codeAny CSS changes to the element will be transitioned for 1s, so it will move
For other elements, add transition to the style of the element you want to CSS and you’ll see it immediately:
icon.addEventListener("click".() = > {
if (class_icon.style.marginTop == '150px') {
/ / back to
class_icon.style.marginTop = '0px';
class_button.style.opacity = '100%';
class_black.style.top = '-100vh';
for (var i = 0; i < class_paths.length; i++) {
class_paths[i].style.fill = '# 000';
}
for (var k = 0; k < class_path_stroke.length; k++) {
class_path_stroke[k].style.stroke = '# 000';
}
class_circle.style.opacity = '0';
} else {
/ / to
class_icon.style.marginTop = '150px';
class_button.style.opacity = '0';
class_black.style.top = '0px';
for (var i = 0; i < class_paths.length; i++) {
class_paths[i].style.fill = '#fff';
}
for (var k = 0; k < class_path_stroke.length; k++) {
class_path_stroke[k].style.stroke = '#fff';
}
class_circle.style.opacity = '100%'; }});Copy the codePs: SVG elements and attributes in the path element belong to the style, when the JS operation is treated as a style operation
The movement of the line
Feels like it’s almost there now?
There is one last step
The two lines are drawn with path, so how to achieve the above GIF effect?
It’s actually quite simple
In SVG there are two attributes, stroke-dasharray and stroke-dashoffset. The former is responsible for breaking up lines into dashed lines (by value), and the latter is responsible for controlling the number of dashed lines displayed, as shown in the code:
.line {
stroke-dasharray: 1490;
stroke-dashoffset: 1490;
}
Copy the codePs: This value can be dynamically obtained according to the length of the element. Here IS a pure test, please refer to the details: handwritten SVG dynamic line diagram _ bilibili_bilibili
Stroke-dashoffset When equal to stroke-dasharray, the line disappears completely, and when equal to 0, the line is fully displayed (element detection)
That is, with these two properties, just change the stroke-Dashoffset from full to zero to complete the dynamic effect of the line!
Reference code:
icon.addEventListener("click".() = > {
if (class_icon.style.marginTop == '150px') {
for (var j = 0; j < 1500; j++) { class_line.style.strokeDashoffset = j; }}else {
for (var j = 0; j < 1500; j++) {
class_line.style.strokeDashoffset = 1490- j; }}});Copy the codeEnd of 4.
All done at this point
Source code, I wish you a happy Mid-Autumn Festival in advance ~
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.icon {
display: flex;
justify-content: center;
transition: all 1s;
}
#icon {
z-index: 9999;
}
.button {
display: flex;
justify-content: center;
transition: all .8s;
}
.touch {
transform: rotate(270deg);
width: 100px;
height: 100px;
}
.black {
position: absolute;
width: 100%;
height: 100vh;
transition: all .8s;
background-color: black;
top: -100vh;
z-index: -1;
}
.path..path-stroke..black {
transition:.8s;
}
.circle {
width: 200px;
height: 200px;
border: 5px solid #fff;
border-radius: 100px;
position: absolute;
box-sizing: border-box;
top: 300px;
left: 1500px;
opacity: 0;
transition:.8s;
transition-delay:.5s;
}
.line {
position: absolute;
left: 900px;
top: 350px;
stroke-dasharray: 1490;
stroke-dashoffset: 1490;
transition: 1s;
transition-delay: 1s;
}
</style>
</head>
<body>
<div class="icon">
<svg id="icon" viewBox="0 0 1024 1024" width="500" height="500">
<path
d="M376.192 366.976 c-11.456-0.7688-20.416-6.08-20-11.84 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 0.384-5.728 9.984-9.76 21.44-8.992 11.424 0.768 20.352 6.048 19.968 11.808-0.384 5.76-9.984 9.792-21.44 9.024m321.984 196.064c-8.512 0-16.384 2.56-22.944 7.04a124.16 124.16 0 0 0-4.16-16c-13.12-39.648-46.752-72-97.28-93.6a313.472 313.472 0 0-56-17.696 77.44 77.44 0 0 9.088-16.704c17.984 4.544 61.952 14.528 102.976 14.624 19.872 0.032 39.04-2.24 54.24-8.64 28.96-12.096 46.4-34.24 45.536-57.792-0.832-23.04-19.04-42.784-48.704-52.736-53.664-17.984-150.464, 16.256 to 174.272 25.28-22.464-21.728-58.048-35.84-98.016-35.904-67.936-0.128-123.296 40.224-123.392 89.984-0.096 47.424 50.08 86.496 113.6 90.176-6.816 23.04-17.728 78.464 14.016 131.936-20.256 0.832-53.024 5.024-72.32 22.24-9.92 8.8-15.264 19.872-16 32.928-0.8 15.296 5.568 23.36 11.04 27.392 6.368 4.704 14.4 6.24 22.272 6.272 7.616 0 14.976-1.44 20.352-2.816 9.536 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 2.688 0.096c21.344 0.064 10.752 25.632 15.264 42.496 11.744 30.848-6.496 106.976-1.92 147.104 1.824a28.352 28.352 0 0 54.4-20.96 76.928-49.28 10.112-12.736 17.664-26.24 22.656-40.096a40.8 40.8 0 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832"
fill="none" stroke="# 000" stroke-width="Seven" class="path-stroke"></path>
<path
d="M512 809.792 C-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 297.792 164.224 0 297.792 133.568 297.792 297.792 0 164.224-133.568 297.792-297.792 297.792M960 512c0-41.28-18.784-80.48-50.688-106.464A137.632 A137.664 137.664 0 0 0 736 124.064 A137.664 137.664 0 0 0-117.536-9.344A137.664 137.664 0 0 0 512 64C-41.28 0-80.512 18.816-106.464 50.688A137.632 137.632 0 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 124.064 288a137.664 0 0-9.344 117.504A137.664 137.664 0 0 0 64 512c0 41.28 18.784 80.48 50.688 106.464A137.664 137.664 0 0 0 124.032 736a137.664 0 0 97.12 66.88A137.664 137.664 0 0 288 899.936 A137.664 137.664 0 0 0 117.536 9.344A137.664 137.664 0 0 0 512 960c41.28 0 80.48-18.816 106.464-50.688 38.4 14.624 81.76 11.328 117.536-9.344a137.664 137.664 0 0 66.88-97.12 a137.664 137.664 0 0 0 899.936 736a133.632 137.632 0 0 9.344-117.536A137.664 137.664 0 0 960 512"
fill="none" stroke="# 000" stroke-width="Seven" class="path-stroke"></path>
</svg>
</div>
<div class="button">
<h1>click</h1>
<img src="./touch.png" class="touch">
</div>
<div class="circle"></div>
<svg class="line" width="1000" height="505.0000000000001">
<path d="m700 100l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
stroke="#fff" stroke-width="5" />
<path d="m800 200l-300 0c0 0 -50 0 -50 50c0 0 0 50 50 50l100 0c0 0 50 0 50 50c0 0 0 50 -50 50l-500 0 " fill="none"
stroke="#fff" stroke-width="5" />
</svg>
<img src="./font.png" alt="">
<div class="black"></div>
</body>
<script>
var class_icon = document.getElementsByClassName("icon") [0];
var icon = document.getElementById("icon");
var class_button = document.getElementsByClassName('button') [0];
var class_black = document.getElementsByClassName('black') [0];
var class_paths = document.getElementsByClassName('path');
var class_path_stroke = document.getElementsByClassName('path-stroke');
var class_circle = document.getElementsByClassName('circle') [0];
var class_line = document.getElementsByClassName('line') [0];
icon.addEventListener("click".() = > {
if (class_icon.style.marginTop == '150px') {
/ / back to
class_icon.style.marginTop = '0px';
class_button.style.opacity = '100%';
class_black.style.top = '-100vh';
for (var i = 0; i < class_paths.length; i++) {
class_paths[i].style.fill = '# 000';
}
for (var k = 0; k < class_path_stroke.length; k++) {
class_path_stroke[k].style.stroke = '# 000';
}
class_circle.style.opacity = '0';
for (var j = 0; j < 1500; j++) { class_line.style.strokeDashoffset = j; }}else {
/ / to
class_icon.style.marginTop = '150px';
class_button.style.opacity = '0';
class_black.style.top = '0px';
for (var i = 0; i < class_paths.length; i++) {
class_paths[i].style.fill = '#fff';
}
for (var k = 0; k < class_path_stroke.length; k++) {
class_path_stroke[k].style.stroke = '#fff';
}
class_circle.style.opacity = '100%';
for (var j = 0; j < 1500; j++) {
class_line.style.strokeDashoffset = 1490- j; }}});</script>
</html>
Copy the code
Pure sprout new, hope everybody big guy many contain, give a praise big brother people (autumn pear paste! ðŸ˜