vue in writing
Write css animation in two steps
The first step: define animation rules
Part II: defined rules scare animation class which you want to move
<template> <div class="money" id="box"> <! - This is related css test -> <-! <P> all internal shadow box-shadow </ p> <div class="one"> </div> --> <!-- <div id="background" class="wall"></div> <div id="midground" class="wall"></div> <div id="foreground" class="wall"></div> <div id="top" class="wall"></div> --> <P> css animation articles </ p> <-! 3d rotation -> <img class="imgimg" src="../img/preview.jpg" alt=""> <! - jumping up and down arrow -> <div class="arrow"> <img src="https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/arrow.png" alt=""> </div> </div> </template> <script> export default { name: "login", data() { return { }; }, mounted() { }, }; </script> <style scoped lang='less'> // 3d旋转 @-webkit-keyframes haha1 { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); } 50% { -webkit-transform: rotate3d(0, -0.5, 0, 180deg); } 100% { -webkit-transform: rotate3d(0, -1, 0, 360deg); } } @ Down arrows @ -webkit- keyframes UpDown { 25% { transform: translateY(-50px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(50px); } } #box { Kimgimg { width: 200px; height: 200px; border-radius: 50%; -webkit-animation: haha1 3s linear infinite; } .arrow { width: 200px; height: 200px; img { width: inherit; -webkit-animation: updown 3s linear infinite } } } </style>