亮框提示

最新推荐文章于 2025-09-17 23:42:30 发布

原创最新推荐文章于 2025-09-17 23:42:30 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#亮框提示

css 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和Vue.js实现的图片hover效果，当鼠标悬停在图片上时，图片会向上移动，亮度增加，并添加盒子阴影及边框。通过CSS的display、transition、transform、filter和box-shadow属性，结合Vue.js的数据绑定和组件化特性，实现了这一视觉效果。

效果图（鼠标经过图片上移，亮度增加，添加盒子阴影以及边框）：

代码：

<template>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style>
li {
  display: inline-block;
  height: 200px;
  width: 150px;
  background: url("../assets/face.png");
  background-size: 100%;
  border: 2px solid transparent;
  border-radius: 5px;
  filter: brightness(0.7);
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 100px;
}
li:hover {
  /* 阴影 */
  box-shadow: 0 0 10px 0 skyblue;
  /* 边框 */
  border: 2px solid skyblue;
  /* 偏移距离 */
  transform: translate(0%, -20%);
  /* 滤镜控制亮度 */
  filter: brightness(1.5);
}
</style>