An example of implementing a simple finger click animation with CSS3 Animation

An example of implementing a simple finger click animation with CSS3 Animation

This article mainly introduces an example of implementing a simple finger click animation in CSS3 Animation, and shares it with you. The details are as follows:

Rendering 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>CSS3--Simple finger click animation through Animation</title>
        <style>
        .wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black}
        .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;
      background: url("./circle.png") center center no-repeat;
          width:62px;height:62px;animation:circleHide 1s ease infinite both}
        .finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both}
        @keyframes fingerHandle{
            0%{transform:none}
            70%{transform:scale3d(.8,.8,.8)}
            100%{transform:none}
        }
        @keyframes circleHide{
            0%{opacity:0;transform:scale3d(0,0,0)}
            70%{opacity:1;transform:scale3d(1.2,1.2,1.2)}
            100%{opacity:0;transform:scale3d(0,0,0)}
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="circle"></div>
            <div class="finger"></div>
        </div>
    </body>
</html>

This concludes this article about examples of implementing simple finger click animations with Animation in CSS3. For more relevant CSS3 finger click animation content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  How to limit the input box to only input pure numbers in HTML

>>:  HTML+CSS to achieve charging water drop fusion special effects code

Recommend

Singleton design pattern in JavaScript

Table of contents 1. What is a design pattern? 2....

A brief discussion on the execution details of Mysql multi-table join query

First, build the case demonstration table for thi...

VMware virtual machine three connection methods example analysis

NAT In this way, the virtual machine's networ...

Summary of uncommon js operation operators

Table of contents 2. Comma operator 3. JavaScript...

Analyzing ab performance test results under Apache

I have always used Loadrunner to do performance t...

MySQL database Load Data multiple uses

Table of contents Multiple uses of MySQL Load Dat...

Record the whole process of MySQL master-slave configuration based on Linux

mysql master-slave configuration 1. Preparation H...

Redission-tomcat quickly implements deployment from single machine to multi-machine deployment

Preface In the early stages of some projects, dev...

Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox

I like to pay attention to some news on weekdays a...

JavaScript implements double-ended queue

This article example shares the specific code of ...

Detailed explanation of MySQL combined index method

For any DBMS, indexes are the most important fact...

Vue implements dynamic query rule generation component

1. Dynamic query rules The dynamic query rules ar...

Comparative Analysis of MySQL Binlog Log Processing Tools

Table of contents Canal Maxwell Databus Alibaba C...

Vue: Detailed explanation of memory leaks

What is a memory leak? A memory leak means that a...

Build a high-availability MySQL cluster with dual VIP

Table of contents 1. Project Description: 2. Proj...