炫酷css样式__视觉伪动态效果

jym中午好，这个功能是通过在鼠标悬停时改变图片的剪裁路径（clip-path）和旋转（transform）来实现的，主要是一个鼠标悬停在图片上时，图片呈现视差滚动的效果。

效果图 话不多说开干

首先创建一个包含两个 <img> 元素的 <template> 区域，并为每个元素设置不同的 src 属性值，分别对应不同的图片。

<template>
<img src="./assets/微信截图_20230923172457.png" alt="the back of random person">
<img src="./assets/微信截图_20230923172657.png" alt="an eagle" style="--f:.12;--r:5px">
</template>

在样式中，定义了一些自定义属性，用于控制视差效果和圆角。关键点是--f和--r属性，--f 控制视差因子，即视差效果的强度，数值越小则效果越明显；--r 控制圆角的大小。

然后使用 CSS Grid 布局将图片水平排列在容器中心，并且设置了一些样式属性如背景颜色、间距等。再给图片添加样式，其中 object-fit: cover; 让图片自适应容器大小并保持比例不变，clip-path 则根据视差因子和圆角设置剪裁路径。当鼠标悬停在图片上时，使用 :hover 选择器修改 clip-path 的值，从而改变剪裁路径，同时通过 transform 实现旋转效果，使得图片向左移动并旋转。就可以实现效果了

下面是全部代码

<script setup lang="ts">
</script>
<template>
<img src="./assets/微信截图_20230923172457.png" alt="the back of random person">
<img src="./assets/微信截图_20230923172657.png" alt="an eagle" style="--f:.12;--r:5px">
</template>
<style>
img {
  --f: .1;
  --r: 10px;
  
  --_f: calc(100%*var(--f)/(1 + var(--f)));
  --_a: calc(90deg*var(--f));
  width: 400px;
  aspect-ratio: calc(1 + var(--f));
  object-fit: cover;
  clip-path: inset(0 var(--_f) 0 0 round var(--r));
  transform: perspective(400px) var(--_t,rotateY(var(--_a)));
  transition: .5s;
  cursor: pointer;
}
img:hover {
  clip-path: inset(0 0 0 var(--_f) round var(--r));
  --_t: translateX(calc(-1*var(--_f))) rotateY(calc(-1*var(--_a)))
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 30px;
  background: white;
}
</style>