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
Detailed explanation of CSS3+JS perfect implementation of magnifying glass mode
About a year ago, I wrote an article: Analysis of...
DIV and image horizontal and vertical centering compatible with multiple browsers
The first type: full CSS control, layer floating ...
Problems and solutions encountered when installing mininet on Ubuntu 16.04.4LTS
Mininet Mininet is a lightweight software defined...
Design Theory: Ten Tips for Content Presentation
<br /> Focusing on the three aspects of text...
SQL implementation of LeetCode (181. Employees earn more than managers)
[LeetCode] 181.Employees Earning More Than Their ...
A brief analysis of the event delegation mechanism and deep and shallow copying in JavaScript
Table of contents 1. Event delegation Event Bubbl...
Summary of commonly used operators and functions in MySQL
Let’s build the data table first. use test; creat...
Website front-end performance optimization: JavaScript and CSS
I have read an article written by the Yahoo team ...
The problem of introducing specified font @font-face in CSS to be compatible with various browsers
When making a web page, if you want to use a spec...
How to generate PDF and download it in Vue front-end
Table of contents 1. Installation and introductio...
Detailed installation process of MySQL5.6.40 under CentOS7 64
MySQL5.6.40 installation process under CentOS7 64...
vue.config.js packaging optimization configuration
The information on Baidu is so diverse that it...
Differences and usage examples of for, for...in, for...of and forEach in JS
for loop Basic syntax format: for(initialize vari...
How to dynamically add modules to Nginx
Written in front Often, after we install Nginx ba...
How to set background blur with CSS
When making some pages, in order to make the page...