sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

动画优化

v1.2.0
于肖磊 2025-01-15 15:17:10 +08:00
parent 9fea5bf201
commit 7191314731
11 changed files with 431 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/common/custom-module/animation-config/index.vue
View File

@ -16,12 +16,12 @@
<script lang="ts" setup>
// 动画类型
const animation_type = defineModel('type', { type: String, default: 'default' });
const animation_type = defineModel('type', { type: String, default: 'none' });
// 动画次数
const animation_number = defineModel('number', { type: String, default: 'infinite' });
// 动画类型选项
const animation_option = [
{ name: '无', value: 'default' },
{ name: '无', value: 'none' },
{ name: '中心放大', value: 'scale-up-center' },
{ name: '中心缩小', value: 'scale-out-center' },
{ name: '垂直放大', value: 'scale-up-ver-bottom' },
@ -33,10 +33,19 @@ const animation_option = [
{ name: '文字铺开', value: 'tracking-in-expand' },
{ name: '左侧弹跳', value: 'bounce-in-left' },
{ name: '左侧滑动', value: 'slide-in-left' },
{ name: '向上弹跳', value: 'bounce-top' },
{ name: '向下弹跳', value: 'bounce-bottom' },
{ name: '向左弹跳', value: 'bounce-left' },
{ name: '向右弹跳', value: 'bounce-right' },
{ name: '中心滑动', value: 'slide-in-fwd-center' },
{ name: '左旋转', value: 'swirl-in-left-fwd' },
{ name: '模糊显示', value: 'text-focus-in' },
{ name: '心跳', value: 'heartbeat' },
{ name: '脉动', value: 'pulsate-bck' },
{ name: '翻转', value: 'flip-in-diag-2-tl' },
{ name: '摇动', value: 'shake-bottom' },
{ name: '震动', value: 'vibrate' },
{ name: '果冻', value: 'jello-horizontal' }
];
// 动画类型次数
const animation_number_option = [

13
src/components/common/custom-module/data-rendering/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w h re custom-other">
<div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
<div v-for="(item, index) in list" :key="item.id" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
</template>
@ -95,6 +95,17 @@ const percentage_count = (val: number) => {
};
const custom_height = computed(() => props.dataHeight * props.scale + 'px');
const animation_class = computed(() => {
return (val: any) => {
const { type = 'none', number = 'infinite' } = val?.animation_style || {};
if (type != 'none') {
return type + (number == 'infinite' ? `-${number}` : '');
} else {
return '';
}
}
});
</script>
<style lang="scss" scoped>

2
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
View File

@ -15,6 +15,8 @@
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
<div class="bg-f5 divider-line" />
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<custom-tabs-content :value="form" :options="options" @operation_end="operation_end"></custom-tabs-content>

2
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -69,6 +69,8 @@
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">

2
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -40,6 +40,8 @@
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
<div class="bg-f5 divider-line" />
<card-container class="h">
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">

2
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -39,6 +39,8 @@
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
</el-form>
</div>
</template>

2
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -35,6 +35,8 @@
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">

2
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -102,6 +102,8 @@
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">

24
src/components/model-custom/components/index-default.ts
View File

@ -55,6 +55,10 @@ const text_com_data = {
field: '', // 字段id
type: '', // 条件类型
value: '', // 值
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
// 图片的默认值
@ -99,6 +103,10 @@ const img_com_data = {
field: '', // 字段id
type: '', // 条件类型
value: '', // 值
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
// 线条的默认值
@ -116,6 +124,10 @@ const line_com_data = {
field: '', // 字段id
type: '', // 条件类型
value: '', // 值
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
@ -168,6 +180,10 @@ const icon_com_data = {
field: '', // 字段id
type: '', // 条件类型
value: '', // 值
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
@ -202,6 +218,10 @@ const panel_com_data = {
field: '', // 字段id
type: '', // 条件类型
value: '', // 值
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
@ -227,6 +247,10 @@ const custom_group_com_data = {
is_scroll_bar: false, // 是否需要滚动条
data_style: {
...defaultCustom.style
},
animation_style: {
type: 'none',
number: 'infinite',
}
}
// 判断两个矩形是否有交集或者被包裹

17
src/components/model-custom/components/index.vue
View File

@ -68,7 +68,7 @@
<div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
<!-- @mouseover="on_choose(index)" -->
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>
@ -191,6 +191,17 @@ const url_computer = (name: string) => {
return new_url;
};
//#endregion
// 动画class处理
const animation_class = computed(() => {
return (val: any) => {
const { type = 'none', number = 'infinite' } = val?.animation_style || {};
if (type != 'none') {
return type + (number == 'infinite' ? `-${number}` : '');
} else {
return '';
}
}
});
// 获取历史记录存储的别名
//#region 组件边线相关
const is_show_component_line = ref(false);
@ -457,6 +468,10 @@ watch(() => center_height.value, () => {
...item.com_data?.data_source_link_field ?? { id: '', option: {} },
id: !isEmpty(item.com_data?.data_source_link_field?.id || '')? item.com_data.data_source_link_field.id : '',
},
animation_style: {
type: item.com_data?.animation_style?.type || 'none',
number: item.com_data?.animation_style?.number || 'infinite',
},
},
}));
// 容器高度变化时，组件不绑定右侧数据

382
src/styles/animation.scss
View File

@ -1,24 +1,22 @@
// 放大缩小
.scale-up-center {
-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.slide-out-bck-center-infinite {
-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
.scale-up-center-infinite {
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@keyframes slide-out-bck-center {
@keyframes scale-up-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: translateZ(-1100px);
transform: translateZ(-1100px);
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
// 中心缩小
@ -53,16 +51,42 @@
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@keyframes scale-up-ver-bottom {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
80% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
85% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
95% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
// 交替垂直放大
.scale-up-ver-bottom-alternate {
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
}
.scale-up-ver-bottom-alternate-infinite {
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes scale-up-ver-bottom {
@keyframes scale-up-ver-bottom-alternate {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
@ -244,14 +268,160 @@
}
}
// 向上弹跳
.bounce-top {
-webkit-animation: bounce-top 1.5s both;
animation: bounce-top 1.5s both;
}
.bounce-top-infinite {
-webkit-animation: bounce-top 1.5s infinite both;
animation: bounce-top 1.5s infinite both;
}
@keyframes bounce-top {
0%, 30%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
// 向下弹跳
.bounce-bottom {
-webkit-animation: bounce-bottom 1.5s both;
animation: bounce-bottom 1.5s both;
}
.bounce-bottom-infinite {
-webkit-animation: bounce-bottom 1.5s infinite both;
animation: bounce-bottom 1.5s infinite both;
}
@keyframes bounce-bottom {
0%, 30%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
// 向左弹跳
.bounce-left {
-webkit-animation: bounce-left 1.5s both;
animation: bounce-left 1.5s both;
}
.bounce-left-infinite {
-webkit-animation: bounce-left 1.5s infinite both;
animation: bounce-left 1.5s infinite both;
}
@keyframes bounce-left {
0%, 30%, 60%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
// 向右弹跳
.bounce-right {
-webkit-animation: bounce-right 1.5s both;
animation: bounce-right 1.5s both;
}
.bounce-right-infinite {
-webkit-animation: bounce-right 1.5s infinite both;
animation: bounce-right 1.5s infinite both;
}
@keyframes bounce-right {
0%, 30%, 60%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateX(40px);
transform: translateX(40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
// 左侧弹跳
.bounce-in-left {
-webkit-animation: bounce-in-left 1.1s both;
animation: bounce-in-left 1.1s both;
-webkit-animation: bounce-in-left 2s both;
animation: bounce-in-left 2s both;
}
.bounce-in-left-infinite {
-webkit-animation: bounce-in-left 1.1s infinite both;
animation: bounce-in-left 1.1s infinite both;
-webkit-animation: bounce-in-left 2s infinite both;
animation: bounce-in-left 2s infinite both;
}
@keyframes bounce-in-left {
@ -328,17 +498,17 @@
transform: rotate3d(1, 1, 0, 0deg);
opacity: 1;
}
}
}
// 从左滑动
.slide-in-left {
-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-left-infinite {
-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes slide-in-left {
@ -377,4 +547,164 @@
opacity: 1;
}
}
// 左前轮旋转
.swirl-in-left-fwd {
-webkit-animation: swirl-in-left-fwd 2s ease-out both;
animation: swirl-in-left-fwd 2s ease-out both;
}
.swirl-in-left-fwd-infinite {
-webkit-animation: swirl-in-left-fwd 2s ease-out infinite both;
animation: swirl-in-left-fwd 2s ease-out infinite both;
}
@keyframes swirl-in-left-fwd {
0% {
-webkit-transform: rotate(-540deg) scale(0);
transform: rotate(-540deg) scale(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
opacity: 1;
}
}
// 摇动
.shake-bottom {
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.shake-bottom-infinite {
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-bottom {
0% {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
80% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
85% {
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
}
95% {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
}
// 震动
.vibrate {
-webkit-animation: vibrate 0.3s linear both;
animation: vibrate 0.3s linear both;
}
.vibrate-infinite {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@keyframes vibrate {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
40% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
60% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
80% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
// 模糊显示
.text-focus-in {
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.text-focus-in-infinite {
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
// 果冻
.jello-horizontal {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}
.jello-horizontal-infinite {
-webkit-animation: jello-horizontal 0.9s infinite both;
animation: jello-horizontal 0.9s infinite both;
}
@keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}