First look at the effect, finally have the complete source code:

Implementation:

  1. Define the tag:
 <div class="card">
        <img src="3.3.png" alt="x" width="100%">
        <h3>Night of the Northern Lights</h3>
        <p >Live, blunder, fall, rejoice in victory, and recreate life from life!</p>
    </div>
Copy the code
  1. Basic card and text style:
 .card{
            width: 200px;
            height: 300px;
            box-shadow: 1px 1px 5px # 555;
            cursor: pointer;
            background-color: rgb(243.243.243);
            position: relative;
            overflow: hidden;
        }
        .card h3..card p{
            padding: 5px;
            text-align: center;
            font-family: 'fangsong';
            font-weight: bold;
            user-select: none;
        }
Copy the code

cursor: pointer; Mouse style for small hands. overflow: hidden; Child elements whose size exceeds the card area are hidden. user-select: none; Text is not selected.

  1. Js section, see comments.
 <script>
         /* Get the element */
         var card = document.querySelector('.card');
          /* Bind the click event */
         card.addEventListener('click'.function(e){
              /* Get the horizontal position of the mouse click */
             let x = e.clientX - this.offsetLeft;
             /* Get the vertical position of the mouse click */
             let y = e.clientY - this.offsetTop;
              /* Create a span element */
             let circle = document.createElement('span');
             /* Add the left attribute */ for the span element
             circle.style.left = x + 'px';
              /* Adds the positioned top attribute */ to the span element
             circle.style.top = y + 'px';
              /* Card adds the created SPAN element */
             card.appendChild(circle);
             /* after 1s, remove the span element */
             setInterval(function(){
                 circle.remove();
             },1000)

         })

    </script>
Copy the code
  1. Add the CSS style of the SPAN element created in the previous step
  .card span{
            position: absolute;
            transform: translate(-50%, -50%);
  
            background-color: rgb(255.254.254);
            border-radius: 50%;
            animation: big 1s  ;
        }
        @keyframes big{
            0%{
                width: 0px;
            height: 0px;
            opacity: 1;
            }
            100%{
                width: 400px;
            height: 400px;
            opacity: 0; }}Copy the code

position: absolute; Absolute positioning. transform: translate(-50%,-50%); Move half your width and height to the left and up. Animation: big 1 s; Define the animation, exactly 1s to complete the animation. opacity: 1; Opaque. opacity: 0; Transparent.

Full source code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: radial-gradient(white,black);
        }
        .card{
            width: 200px;
            height: 300px;
            box-shadow: 1px 1px 5px # 555;
            cursor: pointer;
            background-color: rgb(243.243.243);
            position: relative;
            overflow: hidden;
        }
        .card h3..card p{
            padding: 5px;
            text-align: center;
            font-family: 'fangsong';
            font-weight: bold;
            user-select: none;
        }
        .card span{
            position: absolute;
            transform: translate(-50%, -50%);
  
            background-color: rgb(255.254.254);
            border-radius: 50%;
            animation: big 1s  ;
        }
        @keyframes big{
            0%{
                width: 0px;
            height: 0px;
            opacity: 1;
            }
            100%{
                width: 400px;
            height: 400px;
            opacity: 0; }}</style>
</head>
<body>
    <div class="card">
        <img src="3.3.png" alt="x" width="100%">
        <h3>Night of the Northern Lights</h3>
        <p >Live, blunder, fall, rejoice in victory, and recreate life from life!</p>
    </div>
    <script>
         
         var card = document.querySelector('.card');
         card.addEventListener('click'.function(e){
             
             let x = e.clientX - this.offsetLeft;
             let y = e.clientY - this.offsetTop;

             let circle = document.createElement('span');
             circle.style.left = x + 'px';
             circle.style.top = y + 'px';
             
             card.appendChild(circle);

             setInterval(function(){
                 circle.remove();
             },1000)})</script>
</body>
</html>
Copy the code

Conclusion:

Not just cards, on buttons, menus, etc. Other articles ~ : Simple clock special effects HTML + CSS + JS Cyberpunk button HTML + CSS Responsive card Hover effect HTML + CSS Water loading animation HTML + CSS Navigation bar scrolling gradient effect HTML + CSS Page turning HTML + CSS 3D stereo album HTML + CSS Colorful streamer button HTML + CSS Remember some CSS properties summary (a) Sass summary note…… , etc.