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
Implementation of Jenkins+Docker continuous integration
Table of contents 1. Introduction to Jenkins 2. I...
React implements double slider cross sliding
This article shares the specific code for React t...
Steps to set up and mount shared folders on Windows host and Docker container
Programs in Docker containers often need to acces...
Workerman writes the example code of mysql connection pool
First of all, you need to understand why you use ...
Details on using bimface in vue
Table of contents 1. Install Vue scaffolding 2. C...
Detailed explanation of ActiveMQ deployment method in Linux environment
This article describes the deployment method of A...
3D tunnel effect implemented by CSS3
The effect achievedImplementation Code html <d...
Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study
1. Set CORS response header to achieve cross-doma...
A complete example of implementing a timed crawler with Nodejs
Table of contents Cause of the incident Use Node ...
How to enable JMX monitoring through Tomcat
Build a simulation environment: Operating system:...
8 Reasons Why You Should Use Xfce Desktop Environment for Linux
For several reasons (including curiosity), I star...
MySQL method of generating random numbers, strings, dates, verification codes and UUIDs
Table of contents Generate random numbers Generat...
How to reference external CSS files and iconfont in WeChat applet wxss
cause The way to import external files into a min...
Various ways to modify the background image color using CSS3
CSS3 can change the color of pictures. From now o...
Basic principles for compiling a website homepage
1. The organizational structure of the hypertext d...