css:hover用法（2）霓虹灯效果，主要时hover+ box-shadow属性进行渲染

前端小云儿

于 2022-09-01 17:08:37 发布

阅读量355

点赞数 1

分类专栏：前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126647344

版权

前端静态页面以及逻辑专栏收录该内容

148 篇文章 20 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细介绍了如何利用CSS中的`:hover`伪类和`box-shadow`属性来创建炫酷的霓虹灯效果。通过改变`box-shadow`的偏移、模糊半径和颜色，可以在鼠标悬停时使元素呈现出霓虹般的动态视觉体验。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div id="neon-btn">
      css霓虹灯效果，主要时hover+ box-shadow属性进行渲染
      <button class="btn one">Hover Hover look</button>
      <button class="btn two">Hover Hover look</button>
      <button class="btn three">Hover Hover look</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "page",
  props: {},
  data() {
    return {
      name: "这是子组件的name",
    };
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
#neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-arou