当前位置：首页 > news >正文

CSS 纵向底部往上动画

news 2025/8/30 6:29:18

请添加图片描述

<template><div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation"><!-- 旋方块 --><div class="box" :class="{ 'scale-up-ver-bottom': isAnimating }"><!-- 元素内容 --></div></div>
</template><script setup>import {ref} from 'vue';const isAnimating = ref(false); // 控制是否应用动画的响应式状态function startAnimation() {// 鼠标进入容器时，启动动画isAnimating.value = true;}function stopAnimation() {// 鼠标离开容器时，停止动画isAnimating.value = false;}
</script><style>.container {/* 定义容器宽度和高度 */width: 100px;height: 100px;margin-top: 50px;margin-left: 40%;}.box {/* 定义方块宽度和高度 */width: 100px;height: 100px;background-color: blue;}.scale-up-ver-bottom {-webkit-animation: scale-up-ver-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation: scale-up-ver-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}@-webkit-keyframes scale-up-ver-bottom {0% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;}100% {-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;}}@keyframes scale-up-ver-bottom {0% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;}100% {-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;}}</style>