CSS 向上扩展动画

上干货

import {ref} from 'vue';const isAnimating = ref(false); // 控制是否应用旋转动画的响应式状态function startAnimation() {// 鼠标进入容器时，启动旋转动画isAnimating.value = true;}function stopAnimation() {// 鼠标离开容器时，停止旋转动画isAnimating.value = false;}.container {/* 定义容器宽度和高度 */width: 100px;height: 100px;margin-top: 50px;margin-left: 40%;}.box {/* 定义方块宽度和高度 */width: 100px;height: 100px;background-color: blue;/* 定义过渡效果 */transition: transform 0.5s;}/* 根据isAnimating的状态应用或移除旋转动画类 */.box.animate {-webkit-animation: scale-up-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation: scale-up-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}/* 定义旋转动画 */@-webkit-keyframes scale-up-top {0% {-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}100% {-webkit-transform: scale(1);transform: scale(1);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}}@keyframes scale-up-top {0% {-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}100% {-webkit-transform: scale(1);transform: scale(1);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}}

教学视频地址

点击跳转教学视频