<template>
<view>
<view class="animation-box flex align-center flex-wrap">
<view class="box-1 box-a"></view>
<view class="box-2 box-a"></view>
<view class="box-3 box-a"></view>
<view class="box-4 box-a"></view>
<view class="box-5 box-a"></view>
<view class="box-6 box-a"></view>
<view class="box-7 box-a"></view>
<view class="box-8 box-a"></view>
<view class="box-9 box-a"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
oneFlag: false
}
}
}
</script>
<style lang='scss' scoped>
.animation-box{
position: relative;
padding:30rpx;
width:538rpx;
height:610rpx;
margin:100rpx auto 0;
background-color: #eee;
.box-a{
position: absolute;
width: 100rpx;
height: 100rpx;
background-color: #20c080;
margin:20rpx;
transform: rotate(45deg);
border: 2rpx solid black;
}
.box-1{
top: 300rpx;
left: 10rpx;
animation: falling01 1s linear;
}
.box-2{
top: 410rpx;
left: 120rpx;
animation: falling02 1s linear;
}
.box-3{
top: 520rpx;
left: 230rpx;
animation: falling03 1s linear;
}
.box-4{
top: 200rpx;
left: 120rpx;
animation: falling04 0.8s linear;
}
.box-5{
top: 310rpx;
left: 230rpx;
animation: falling05 0.8s linear;
}
.box-6{
top: 410rpx;
left: 340rpx;
animation: falling06 0.8s linear;
}
.box-7{
top: 90rpx;
left: 220rpx;
animation: falling07 0.6s linear;
}
.box-8{
top: 200rpx;
left: 330rpx;
animation: falling08 0.6s linear;
}
.box-9{
top: 300rpx;
left: 450rpx;
animation: falling09 0.6s linear;
}
}
@keyframes falling09{
0% {
top: 0rpx;
}
100% {
top: 300rpx;
}
}
@keyframes falling08{
0% {
top: 0rpx;
}
100% {
top: 200rpx;
}
}
@keyframes falling07{
0% {
top: 0rpx;
}
100% {
top: 90rpx;
}
}
@keyframes falling06 {
0% {
top: 0rpx;
}
100% {
top: 410rpx;
}
}
@keyframes falling05 {
0% {
top: 0rpx;
}
100% {
top: 310rpx;
}
}
@keyframes falling04 {
0% {
top: 0rpx;
}
100% {
top: 200rpx;
}
}
@keyframes falling01 {
0% {
top: 0rpx;
}
100% {
top: 300rpx;
}
}
@keyframes falling02 {
0% {
top: 0rpx;
}
100% {
top: 410rpx;
}
}
@keyframes falling03{
0% {
top: 0rpx;
}
100% {
top: 520rpx;
}
}
/* */
.scroll-view {
padding: 20rpx;
margin: 30rpx 20rpx;
background-color: #eee;
}
.img {
width: 80rpx;
height: 90rpx;
animation: run-left-a 1s linear infinite backwards;
}
@keyframes run-left-a {
from {
left: 0;
}
to {
left: -50%;
}
}
.stop {
animation-play-state: paused;
}
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.flex-wrap{
flex-wrap: wrap;
}
</style>
动画animation
于 2023-07-26 09:27:51 首次发布