vue项目开发中,为了让项目看起来更活泼,会给对应的组件增加一些动画,今天我们通过css来实现轻微左右晃动的效果。
效果
代码
<template>
<div class="cardBody" ref="body">
<div class="block">
</div>
</div>
</template>
<script>
export default {
name: "title",
data() {
return {}
},
components: {},
watch: {},
mounted() {
},
}
</script>
<style lang="scss" scoped>
.cardBody {
position: relative;
width: 100%;
overflow: hidden;
margin: 0 auto;
height: calc(100% - 10px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.block {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
width: 100px;
height: 100px;
-webkit-animation: cardMove 4s ease-in-out 0s infinite alternate;
animation: cardMove 4s ease-in-out 0s infinite alternate;
background: red;
}
}
@-webkit-keyframes cardMove {
0% {
transform: translateX(-10px)
}
100% {
transform: translateX(10px)
}
}
@-moz-keyframes cardMove {
0% {
transform: translateX(-10px)
}
100% {
transform: translateX(10px)
}
}
@-ms-keyframes cardMove {
0% {
transform: translateX(-10px)
}
100% {
transform: translateX(10px)
}
}
@keyframes cardMove {
0% {
transform: translateX(-10px)
}
100% {
transform: translateX(10px)
}
}
</style>