CSS3 sample code to achieve element arc motion
|
How to use CSS to control the arc movement of elements We all know that CSS3's new attribute transfrom transition effect can achieve element displacement, rotation, and scaling. Combined with the animation attribute, you can achieve the animation effect of the element. But how to use CSS to achieve arc movement of elements:
As shown in the animation above, the ball moves in an arc. Analyze the movement:
Cubic Bezier function There is an animation-timing-function property in the animation property, which is the speed function of the animation. This property uses a mathematical function called the Cubic Bezier function to generate the speed curve.
cubic-bezier (x1, y1, x2, y2): (For the specific meaning of cubic Bezier function, please refer to relevant materials):
You can use this website portal to adjust the curve value in real time. The animation-timing-function attribute already provides several packaged speed functions: ease, linear, ease-in, ease-out, and ease-in-out, which we commonly use.
Effect realization The first thing we can think of is to separate the displacement animation of the X-axis and Y-axis. However, an element's animation can only execute one animation (the last one declared) at a time. So we can think from another perspective and use two parent-child elements. Add X-axis displacement animation to the parent element and Y-axis displacement animation to the child element. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element arc motion</title>
<style>
.box{
width: 400px;
height: 400px;
border: 2px solid #ff8800;
}
span{
display: block;
width: 40px;
height: 40px;
border: 1px solid #222;
animation: center1 2s ease-in forwards;
}
span:after{
content: '';
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: greenyellow;
animation: center2 2s ease-out forwards;
}
@keyframes center1 {
to{transform: translateX(360px)}
}
@keyframes center2 {
to{transform: translateY(360px)}
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
</body>
</html>At this time, I used the element's pseudo-class after to replace the child element, and the effect is the same. Giving span a colored border allows you to observe the movement trajectories of the two elements for easy observation. The animation effect is as follows:
At this time, it is still relatively obvious that the green ball is moving in an arc. Extensions: If you feel that the arc is not big enough or obvious enough at this time, we can adjust the value of the Cubic Bezier function ourselves. According to the website portal.
The CSS code at this time is as follows:
span{
display: block;
width: 40px;
height: 40px;
border: 1px solid #222;
animation: center1 2s cubic-bezier(.66,.01,1,1) forwards;
}
span:after{
content: '';
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: greenyellow;
animation: center2 2s cubic-bezier(0,0,.36,1) forwards;
} The arc of the animation effect at this time is even more obvious:
This concludes this article about sample code for implementing element arc motion with CSS3. For more relevant content on CSS3 element arc motion, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Learning about UDP in Linux
>>: Beginner's guide to building a website ⑦: It's so easy to make a beautiful website
Recommend
Tutorial diagram of using Jenkins for automated deployment under Windows
Today we will talk about how to use Jenkins+power...
Does MySql need to commit?
Whether MySQL needs to commit when performing ope...
Implementation process of the magnifying glass effect in the Javascript example project
Table of contents Preface Case: Imitation of JD.c...
A brief discussion on simulating multi-threaded and multi-process crashes in Linux
Conclusion: In a multithreaded environment, if on...
JavaScript Snake Implementation Code
This article example shares the specific code of ...
What is TypeScript?
Table of contents 1. JavaScript issues 2. Advanta...
Detailed explanation of how to upgrade software package versions under Linux
In the Linux environment, you want to check wheth...
Conventional JS processing functions for Vue Element front-end application development
Table of contents 1. Filter, map, and reduce proc...
Detailed steps for installing, configuring and uninstalling QT5 in Ubuntu 14.04
1. I downloaded QT5.13 version before, but after ...
Install Windows Server 2019 on VMware Workstation (Graphic Tutorial)
If prompted to enter a key, select [I don’t have ...
ES6 loop and iterable object examples
This article will examine the ES6 for ... of loop...
How to configure eureka in docker
eureka: 1. Build a JDK image Start the eureka con...
js to achieve simulated shopping mall case
Friends who are learning HTML, CSS and JS front-e...
Vue implements image drag and drop function
This article example shares the specific code of ...
Detailed introduction to nobody user and nologin in Unix/Linux system
What is the nobody user in Unix/Linux systems? 1....