This is the 21st day of my participation in the August Text Challenge.More challenges in August

preface

How to use HTML, CSS to create new mimicry animation?

rendering

I’ve shared a full tutorial on how I went about doing this below. Hopefully the following tutorial will help you.

To do this, you must first create an HTML file.

Step 1: Create the basic structure of the new mimicry button

<div class="container">
    <div class="box">
    </div>
</div>
Copy the code
html.body {
    margin: 0;
    padding: 0;
    background: #efeeee;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 18px 18px 30px rgba(0.0.0.1), -18px -18px 30px rgba(255.255.255.1);
    transition: all .2s ease-out;
}
Copy the code

As in the above style, the 100*100 square button is set. Using box-shadow, you can create a variety of new styles of mimicriness. The X-axis and Y-axis values in box-shadow are opposite, so that it can present a slanted shadow effect. Border-radius makes the button a little rounded, and transition is used for later animation transitions.

Demo effect:

Step 2: Set up the voice icon

<svg t="1630404566247" class="icon" viewBox="0 0 1076 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="6534" width="60" height="60">
    <path
        d="M86.330418 669.335191 H15.445444 a15.004375 15.004375 0 1 1 0-29.995782 h70.884974 a15.004375 15.004375 1 0 0 1 29.995782 z"
        fill="#50FBFF" p-id="6535"></path>
    <path
        d="M50.887931 704.790646a15.004375 15.004375 00 1-15.004375 15.004375 V-70.897942 a15.004375 15.004375 00 1 30.00875 0v70.897942a15.004375 15.004375 00 1-15.004375 15.004375z"
        fill="#50FBFF" p-id="6536"></path>
    <path
        d="M981.237002 778.697244m-26.714791 0a26.714791 26.714791 0 1 0 53.429582 0 26.714791 26.714791 0 1 0-53.429582 0Z"
        fill="#FE7E00" p-id="6537"></path>
    <path
        d="M910.403901 879.513158m-15.886222 0a15.886223 15.886223 01 0 31.772445 0 15.886223 15.886223 01 0-31.772445 0Z"
        fill="#FE7E00" p-id="6538"></path>
    <path
        d="M1017.911482 602.794612m-58.370521 0a58.370521 01 0 116.741041 0 58.370521 58.370521 01 0-116.741041 0Z"
        fill="#FEDF1D" p-id="6539"></path>
    <path
        d="M396.688851 110.490299m5.187338 0l337.48821 0q5.187338 0 5.187338 5.187338l0 506.75105q0 5.187338-5.187338 5.187338 l - 337.48821 0 q - 5.187338 0-5.187338-5.187338 l0 506.75105 q0 5.187338 5.187338 5.187338 Z"
        fill="#FC00FC" p-id="6540"></path>
    <path
        d="M674.483769 a208.284589 112.75976 208.284589 3.657073 38.204744 0 0 1 v238.708327 a208.232716 0 0 1-208.232715-208.232716 208.232715 207.221185 207.221185 0 0 1-138.177716-52.742259c17.961158 96.730885 102.644451 170.027971 204.523769 170.027972 208.297557 208.232716 V268.250216 a208.232716 208.232716 0 0 0 a207.49352 207.49352 0 0 0-70.067968-155.490456 - z"
        fill="#8304AD" p-id="6541"></path>
    <path
        d="M536.25418 833.332882c-196.509332 0-356.370121-159.860789-356.370121-356.370121a29.995782 29.995782 01 1 59.991564 0c0 163.401147 132.964441 296.378557 296.378557 296.378557s296.443398-132.951473 296.443398-296.378557a29.995782 29.995782 01 1 59.991564 0c0 196.509322-159.860789 356.370121-356.434962 356.370121zM328.086306 332.0026a29.995782 29.995782 00 1-30.008751-29.995782 V-29.995782 a30.00875 30.00875 0 1 60.004533 0v29.995782a29.995782 29.995782 00 1-29.995782 29.995782 z"
        fill="#27233A" p-id="6542"></path>
    <path
        d="M624.555641 715.191259 H448.069434 a150.173435 150.173435 0 0 1-149.991879-149.991879 V391.994164 a30.00875 30.00875 0 0 1 60.004533 0 v173. 205216 a90. 091093 90.091093 0 0 0 89.987346 89.987346 h176.486207 a90.091093 90.091093 0 0 0 89.987346 89.987346 V150.004847 a90.091093 90.091093 0 0 0-89.987346-90.000315 H448.069434 a90.091093 90.091093 0 0 0-89.987346-90.000315 v32.018843 a30.00875 30.00875 1-60.004533 0 0 0 0 0 1 150.173435 v - 32.018843 A150.173435 448.069434 0 h176. 486207 a150. 173435 150.173435 0 0 1, 149.991878 150.004847 v415.194533 a150.173435 0 0 1-149.991878-150.173435 149.991879zM536.25418 1023.99349a29.995782 29.995782 00 1-29.995782-30.00875 V-190.634672 a30.00875 30.00875 00 1 60.004532 0v190.634672a29.995782 29.995782 00 1-30.00875 30.00875z"
        fill="#27233A" p-id="6543"></path>
    <path
        d="M707.332587 1023.99349 H355.423577 a30.00875 30.00875 0 0 1 0-60.004532 h351.90901 a30.00875 30.00875 1 0 0 1 60.004532 z"
        fill="#27233A" p-id="6544"></path>
</svg>
Copy the code

The structure above defines a speech chart with a length and width of 60 pixels. An SVG icon is a vector icon, so it will zoom in and out of shape

Demo effect:

Step 3: Animate the new mimicry button

What we want is for the button to sink when the mouse moves over it and recover when the mouse moves away from it

We just need to modify the CSS

.icon {
    transition: all .2s ease-out;
}

.box:hover {
    box-shadow: 0 0 0 rgba(0.0.0.1),
        0 0 0 rgba(255.255.255.1),
        inset 18px 18px 30px rgba(0.0.0.1),
        inset -18px -18px 30px rgba(255.255.255.1);
}

.box:hover .icon {
    transform: scale(.9);
}
Copy the code

In the style above, we add transition to the icon so that the mouse moves over the button and the inset button creates an inner shadow.

Demo effect: