This is the 8th day of my participation in the August More Text Challenge
Background demand
The result is shown below: Develop a dynamic effect that rotates along an elliptical trajectory
Design and dismantling
Div blocks are superimposed, with a ball moving along an elliptical trajectory and a twinkling ball as the base image below.
code
First let’s understand the syntax of animation (screenshot from W3CSchool)
A little ball that twinkled
First of all to achieve a simple dot flashing, REM is the project needs, copy code can be directly multiplied by 100 to PX.
Animation: animOpa 0.5s infinite Linear;
Infinite indicates an infinite number of plays. This parameter can be filled with the sub-value of the group.
Linear means that the speed of the animation is the same from beginning to end
0.5s indicates the time set for a period of animation playback
AnimOpa is a custom KeyFrams where 0% means start and 100% means end.
Opacity here means that the transparency changes uniformly from 0 to 1. This process is completed once within 0.5 seconds and repeated for unlimited times.
The rest of the CSS mainly implements the small ball style
<template>
<div class="areaNamePanel">
<div class="opacityBall"></div>
</div>
</template>
<script>
export default {
name: 'MapMarkerAnim'.data() {
return{}}}</script>
<style lang="less" scoped>
@keyframes animOpa {
0% {
opacity: 0;
}
100% {
opacity: 1; }}.areaNamePanel {
height: 0.144 rem;
width: 0.4416 rem;
transform: translate(-50%, -0.3072 rem);
.opacityBall {
position: absolute;
width: 0.048 rem;
height: 0.048 rem;
left: 0.0432 rem;
top: 0.12 rem;
box-shadow: 0px 0px 8px #ff6000;
border-radius: 8px;
background-color: #f8cc03;
animation: animOpa 0.5 sinfinite linear; }}</style>
Copy the code
A small round ball moving in an elliptical trajectory
The key code
animation: animX 2s cubic-bezier(0.36.0.0.64.1) -1s infinite alternate,
animY 2s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate,
scale 4s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate;
Copy the code
Cubic bezier(0.36, 0, 0.64, 1)
The ellipse consists of three elements: three Bezier curves + left-right movement delay minus one second +scale is x+y total time. Scale is mainly to have a more three-dimensional sense of vision, near big far small.
The complete code
<template>
<div class="areaNamePanel">
<div class="animatianBall"></div>
<div class="opacityBall"></div>
</div>
</template>
<script>
export default {
name: 'MapMarkerAnim'.data() {
return{}}}</script>
<style lang="less" scoped>
@keyframes animX {
0% {
left: 0px;
}
100% {
left: 0.4416 rem; }}@keyframes animY {
0% {
top: 0px;
}
100% {
top: 0.144 rem; }}@keyframes scale {
0% {
opacity: 0.1;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.1;
transform: scale(0.7); }}@keyframes animOpa {
0% {
opacity: 0;
}
100% {
opacity: 1; }}.areaNamePanel {
height: 0.144 rem;
width: 0.4416 rem;
transform: translate(-50%, -0.3072 rem);
.animatianBall {
position: absolute;
width: 0.048 rem;
height: 0.048 rem;
box-shadow: 0px 0px 8px #ff6000;
border-radius: 0.064 rem;
background-color: #f8cc03;
animation: animX 2s cubic-bezier(0.36.0.0.64.1) -1s infinite alternate,
animY 2s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate,
scale 4s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate;
}
.opacityBall {
position: absolute;
width: 0.048 rem;
height: 0.048 rem;
left: 0.0432 rem;
top: 0.12 rem;
box-shadow: 0px 0px 8px #ff6000;
border-radius: 8px;
background-color: #f8cc03;
animation: animOpa 0.5 sinfinite linear; }}</style>
Copy the code