我要的是图片上下浮动,不是颜色渐变,还有该有的class名,请在div或者img上也写出来
时间: 2024-09-27 16:15:59 浏览: 23
如果你想让图片本身上下浮动而不是添加线条,你可以直接修改CSS部分,使用伪元素 `::before` 和 `::after` 来模拟图片的移动效果。这里有一个基础的示例,我们将使用Vue的自定义指令来控制图片的浮动状态:
```html
<template>
<div class="floating-image" v-floating-img :src="imageUrl" :direction="direction" @mouseenter.stop="stopMoving" @mouseleave="startMoving"></div>
</template>
<script setup>
import { ref, onMounted, directive } from 'vue';
const imageUrl = ref('your-image-url');
const direction = ref('up'); // 或者 'down'
let moving = ref(false);
// 自定义指令
directive('v-floating-img', {
inserted(el, binding, vnode) {
const moveUp = () => {
el.style.transform = 'translateY(-100%)';
};
const moveDown = () => {
el.style.transform = 'translateY(100%)';
};
vnode.context.$on('move-up', moveUp);
vnode.context.$on('move-down', moveDown);
},
unbind(el, binding, vnode) {
vnode.context.$off('move-up', binding.value);
vnode.context.$off('move-down', binding.value);
}
});
function startMoving() {
moving.value = true;
}
function stopMoving() {
moving.value = false;
}
onMounted(() => {
if (moving.value) {
// 初始化图片运动方向
direction.value === 'up' ? moveUp() : moveDown();
}
});
</script>
<style scoped>
.floating-image {
position: relative;
overflow: hidden;
}
.floating-image img {
display: block;
width: 100%;
transition: transform 0.5s ease-in-out;
}
.floating-image img::before,
.floating-image img::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
}
/* 图片向上浮动 */
.floating-image.move-up img::before {
bottom: 0;
transform: translateY(100%);
}
.floating-image.move-up img::after {
top: 0;
}
/* 图片向下浮动 */
.floating-image.move-down img::before {
top: 0;
transform: translateY(-100%);
}
.floating-image.move-down img::after {
bottom: 0;
}
</style>
```
在这个例子中,我们创建了一个名为 `.floating-image` 的容器,并在鼠标进入时停止图片移动,离开时开始移动。`.move-up` 和 `.move-down` 类用于切换图片的浮动方向。请注意替换 `'your-image-url'` 为你的图片URL。
阅读全文