Come on, order this moon cake and see what happens

stdue 2021-09-15 10:57:04

Come on , Click this moon cake and see what happens

I'm participating in the Mid Autumn Festival Creative submission competition , Details please see : Mid Autumn Festival Creative submission contest font.png Now it looks like it's just an ordinary rabbit moon cake , But if you click : tuzi.gif html+css, Used a little svg,js Native interactions , No additional plug-ins are required , Easy to use ~

1. Prepare the material

In fact, there are only three materials needed , written words 、 Rabbit moon cakes and fingers , The words I use here are png Format picture , Get web site as :izihun.com/ , Rabbit moon cake and finger access website is well known iconfont

2. Build a page

Rabbit moon cake

The rabbit moon cake I got is like this :

image.png Here are svg Code for :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg 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.976c-11.456-0.768-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 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 0-56-17.696 77.44 77.44 0 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-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 0 2.688 0.096c21.344 0.064 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 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.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 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 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.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 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 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 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.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 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512" fill="#E15523" p-id="4078"></path>
</svg>
 Copy code 

You can see , Some of the information is useless , At the beginning 、class、 The version number can be deleted , The following is a simplified version ~

<svg viewBox="0 0 1024 1024" width="200" height="200">
<path d="M376.192 366.976c-11.456-0.768-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 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 0-56-17.696 77.44 77.44 0 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-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 0 2.688 0.096c21.344 0.064 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 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832" fill="#E15523"></path>
<path d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 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 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.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 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 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 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.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 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512" fill="#E15523"></path>
</svg>
 Copy code 

viewBox Set up the canvas ,width height Set width and height ,path For the path element ,d The properties inside will be described in detail when the line is drawn later ,fill Meaning of filling

Turn the icon into the effect we want , Just put the fill Set to none, And add attributes to the element stroke( Frame ), Through stroke-width( Border width ) Adjust accordingly to get :

image.png

Adjust the code :

<svg viewBox="0 0 1024 1024" width="200" height="200">
<path d="M376.192 366.976c-11.456-0.768-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 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 0-56-17.696 77.44 77.44 0 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-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 0 2.688 0.096c21.344 0.064 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 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832" fill="none" stroke="#000" stroke-width="7"></path>
<path d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 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 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.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 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 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 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.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 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512" fill="none" stroke="#000" stroke-width="7"></path>
</svg>
 Copy code 

click

image.png

There's nothing to say about this , The hand icon points to the right when it is taken over , adopt transform: rotate(270deg); You can achieve the pointing up effect

written words

image.png

If it's not a transparent background ps Then you can.

round ( The moon )

image.png

New square , Add borders , Set the background color to transparent , Use border-radius Adjust the fillet (px The value is div Half the length is just right )

Remember to add box-sizing:border-box( Count the border as the width ), Otherwise, the circle will feel awkward

image.png

Line

image.png Here is pure svg, Red is the first line , White is the second line

image.png Post the code first :

<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 code 

The properties described above will not be repeated here , Here is the introduction d This attribute :

m For the beginning ,l Draw a line for ,c Draw a curve for ,m And l All accept a coordinate , and c Accept three , The coordinates are separated by spaces , No formatting is required for the rest , The starting position is the upper left corner , I'm here through class To move the whole to the position you want to place

The above code has two path Elements , The first is the first line , The second is the second line , The following explanations take the first line as a reference

M

Set the starting point , As mentioned above, the starting point starts from the top left ( Coordinate for 0 0),x The axis is positive to the right ,y The axis downward is positive , As the above code m700 100 Is to move the starting point to (700,100) Draw the position of

L

Draw line , There must be coordinates ahead , Add your own coordinates based on the previous coordinates , Two points and one line , As the above code l-300 0 From (700,100) To (-300 0) Draw a straight line (ps:m Move the coordinates to (700,100), Take this coordinate as (0,0) Start and draw again L, therefore L Only changed x The coordinates complete the operation of drawing a straight line )

C

Draw a curve , Three coordinates , The first start , Second reference , The third end

Reference code ,0 0 start ( And L Of ps The same principle ),-50 0 For reference point ,-50 50 end , Draw a curve ( I drew twice for one turning operation of the line 90, So there will be multiple c The operation of ~)

image.png

It is suggested that the angle you want to draw should not exceed 90~

The lower line needs only a slight change m The coordinates can be realized

3. move !

Use native js obtain dom:

 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 code 

Move down when clicking on rabbit moon cake , That must be a rabbit moon cake (class_icon) To do click events :

icon.addEventListener("click", () => {
if (class_icon.style.marginTop == '150px') {
// return 
class_icon.style.marginTop = '0px';
} else {
// Go to 
class_icon.style.marginTop = '150px';
}
}
 Copy code 

Because no other changes are required , So laziness becomes a fixed value

But the moon cakes seen in this way will only flash , If you want to make the moon cake move smoothly , Just this sentence :

.icon {
transition: all 1s;
}
 Copy code 

Perform any... On this element css When changing , There will be 1s The transition time , This will achieve the effect of moving ~

The same goes for other elements , Before you want to css Add... To the transformed element style transition, The beautiful transition effect will be displayed immediately :

icon.addEventListener("click", () => {
if (class_icon.style.marginTop == '150px') {
// return 
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 {
// Go 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 code 

ps:svg Elements and path The attributes in the element belong to style in , stay js The operation is regarded as a style operation ~

Line movement

Feel if it's almost now ?

And the last step ~

1631155033234.gif

It says so , These two lines are used path It's drawn , So how to achieve the above gif The effect of ?

It's very simple

stay svg There are two properties in , One is stroke-dasharray, One is stroke-dashoffset, The former is responsible for breaking the line into several dotted lines ( According to the value ), The latter controls the number of dashed lines , This is reflected in the code :

.line {
stroke-dasharray: 1490;
stroke-dashoffset: 1490;
}
 Copy code 

ps: This value can be obtained dynamically according to the length of the element , I'm just trying it out here , Please refer to : Handwriting SVG Dynamic line chart _ Bili, Bili _bilibili

stroke-dashoffset With the stroke-dasharray When equal , The lines disappear completely , For 0 when , All lines are displayed ( Factor awareness )

in other words , With these two properties , Just put the stroke-dashoffset From full to 0 You can complete the dynamic effect of lines !

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 code 

4. end

So far, it's all done

Source code , I wish you all a happy mid autumn festival in advance ~

<!DOCTYPE html>
<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.976c-11.456-0.768-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 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 0-56-17.696 77.44 77.44 0 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-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 0 2.688 0.096c21.344 0.064 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 0 68.736-29.44 40.8 40.8 0 0 0-40.64-40.832" fill="none" stroke="#000" stroke-width="7" class="path-stroke"></path>
<path d="M512 809.792c-164.224 0-297.792-133.568-297.792-297.792 0-164.224 133.568-297.792 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 137.632 0 0 0 899.968 288a137.664 137.664 0 0 0-97.12-66.88A137.664 137.664 0 0 0 736 124.064a137.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 0 288 124.032 137.664 137.664 0 0 0 221.12 221.12 137.664 137.664 0 0 0 124.064 288a137.664 137.664 0 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 137.664 0 0 0 97.12 66.88A137.664 137.664 0 0 0 288 899.936a137.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 0 66.88-97.12A137.664 137.664 0 0 0 899.936 736a137.632 137.632 0 0 0 9.344-117.536A137.664 137.664 0 0 0 960 512" fill="none" stroke="#000" stroke-width="7" 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') { // return  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 { // Go 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 code 

M.jpg I.jpg

Chun Mengxin , I hope you guys will forgive me , Give me a compliment, man ( Autumn pear grease !)

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15