?

基礎圖片，是由一個手部圖和一張箭頭圖而成

代碼開箱即用

<template><div class="canvas_box" @click="hanldShow"><div class="hander-icon"><div class="shou" @animationend="hanldShow"></div></div></div> </template><script> let timer = null;let backgroundBlock = 0; // 當前播放進度 let positionTime = null; // 控制動畫export default {data() {return {point: 0,isLoading: true,height: 0,maxPoint: 4,isShow: true,position: {x: 0,y: 0,},};},mounted() {for (let i = 0; i < this.maxPoint; i++) {// setTimeout(() => {this.move(i);// }, 100);}},methods: {hanldShow() {this.isShow = false;},move(point) {if (point === this.point) return;this.point = point;const target = point * 20 - 1;this.movePosition(target > 0 ? target : 0);},movePosition(target) {const height = 240;let animation = () => {const tag = target > backgroundBlock ? -1 : 1;this.position.y += tag * height;backgroundBlock += -tag * 1;clearTimeout(positionTime);if (Math.abs(this.position.y + height * target) > 1) {positionTime = setTimeout(animation, 60);}};clearTimeout(positionTime);positionTime = setTimeout(animation, 10);},handleStopTimer() {clearInterval(timer);timer = null;},}, }; </script><style lang="scss" scoped> .hander-icon {width: r(750);height: r(680);border: 1px solid red;// background: url('https://.png') no-repeat// center center;// background-size: 100% auto;display: flex;justify-content: center;align-items: center;.shou {width: r(200);height: r(200);animation: shou 1.5s linear 120 forwards;transform-origin: center center;border: 1px solid;// background: url('https://.png') no-repeat center center / 100% auto;} } @keyframes shou {25%,75% {transform: translateX(0) rotate(35deg);}50% {transform: translateX(-30%) rotate(20deg);}0%,100% {transform: translateX(30%) rotate(50deg);} } .canvas_box {// position: relative;width: r(750);height: r(750);// background: linear-gradient(to bottom, #fbf0dd, #f5e5cc);border-radius: r(8);box-sizing: border-box;position: absolute;z-index: 10020;border: 1px solid red;background-color: navajowhite; } </style>

?

?

總結

以上是生活随笔為你收集整理的CSS左右摆动动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。