CSS怎么实现镜像效果？

实现镜像效果（包含动画）

需求分析

1. 创建一个可以接收任意内容的 Vue 组件，并在其下方显示该内容的镜像。
2. 镜像效果应包括垂直翻转和渐变透明效果，以模拟真实的倒影。
3. 支持动画效果，使内容和镜像同步运动。
4. 组件应具有高可复用性，可以插入任意内容并生成相应的倒影。

实现思路

1. 创建一个名为 ReflectionComponent 的 Vue 组件，使用插槽接收父组件传递的内容。
2. 使用 CSS transform: scaleY(-1) 属性实现垂直镜像效果。
3. 通过 mask-image 和 -webkit-mask-image 属性实现渐变透明效果，使倒影更逼真。
4. 使用 CSS 动画同步内容和镜像的运动效果。

ReflectionComponent.vue

首先创建一个 ReflectionComponent.vue 文件，作为反射组件。

<template>
  <div class="reflection-container">
    <div class="content">
      <slot></slot> <!-- 插槽用于接收父组件传递的内容 -->
    </div>
    <div class="reflection">
      <slot></slot> <!-- 插槽内容的镜像 -->
    </div>
  </div>
</template>

<script>
export default {
  name: "ReflectionComponent"
};
</script>

<style scoped>
.reflection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.content {
  position: relative;
}
.reflection {
  position: absolute;
  top: calc(100% + 10px); /* 将倒影定位在内容下方 */
  width: 100%;
  transform: scaleY(-1); /* 垂直镜像 */
  opacity: 0.5;
  mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
</style>

App.vue

然后，在 App.vue 文件中使用 ReflectionComponent 组件。

<template>
  <div id="app">
    <reflection-component>
      <div class="moon"></div> <!-- 传递给反射组件的内容 -->
    </reflection-component>
  </div>
</template>

<script>
import ReflectionComponent from "./components/ReflectionComponent.vue"; // 导入反射组件

export default {
  name: "App",
  components: {
    ReflectionComponent
  }
};
</script>

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #282c34;
}
.moon {
  width: 150px;
  height: 150px;
  background-color: #ffdd00;
  border-radius: 50%;
  position: relative;
}
.moon::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 30%;
  width: 150px;
  height: 150px;
  background-color: #282c34;
  border-radius: 50%;
  transform: rotate(180deg);
}
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.moon {
  animation: jump 2s infinite;
}
</style>

main.js

最后，确保在 main.js 中正确引入 Vue 和 App.vue。

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount("#app");

项目结构

确保项目结构类似如下：

your-project/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   └── ReflectionComponent.vue
│   ├── App.vue
│   ├── main.js
├── package.json
└── vue.config.js

效果预览

使用上述代码结构和内容，你可以在浏览器中预览到如下效果：

• 黄色的圆形月亮随着动画上下跳动。
• 月亮下方显示出其倒影，并随着月亮同步跳动。
• 倒影具有渐变透明效果，越靠近原始内容越清晰，越远离越模糊。

通过这种方式，你可以实现一个高可复用性的 Vue 组件，能够接收任意内容并生成相应的倒影效果。

原文地址：https://blog.csdn.net/2301_80817413/article/details/140634687

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！